
DOM的重绘以及回流
发布日期:2021-05-07 10:55:39
浏览次数:21
分类:技术文章
本文共 582 字,大约阅读时间需要 1 分钟。
** 首先**要想了解什么是DOM的重绘和回流,首先我们要知道的是什么是DOM!
DOM的全拼为 Domcument Object Model(文档对象模型)是一种用于HTML和XML文档的编程接口,它给文档提供了一种结构化的标识方法,可以改变文档的内容和呈现方式。
1、什么是DOM的回流
当页面中元素的位置,大小或结构、定位发生改变,会引发浏览器对当前页面的结构进行重新的计算、这是非常耗性能的。
2、什么是DOM的重绘
就是当元素中的背景、透明度、颜色发生变化后,浏览器会进行重新的描绘,这个过程就是浏览器的重绘
3、优化
减少回流,重排
1、在浏览器本身放入优化策略
浏览器会维护一个队列,把所有的引起回流,重绘的操作放入这个队列,等队列中的操作到了一定的数量或者到了一定的事件后,浏览器就会flush队列,进行一个批的处理。
2、我们通过减少DOM树渲染的操作,减少一些style信息【样式】的请求
- 将多次的样式改变的操作合并成一次
- 对于一些不需要进行重新排列的元素,通过属性操作将其脱离文档流,从而不会影响其他元素
- 在内存中通过多次操作节点,完成后在添加到文档中,也就是通过异步获取元素,在添加到元素中。通过在内存中构建DOM树,之后待操作完成,再更新的文档中,减少document中的Dom树的创建次数
- 获取浏览器重排DOM节点的属性值,存储到变量中
发表评论
最新留言
网站不错 人气很旺了 加油
[***.192.178.218]2025年03月26日 00时38分47秒
关于作者

喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
(JAVA小白必看)小白IDEA的安装与配置
2019-03-04
SpringMVC模板代码
2019-03-04
C++ Primer学习笔记——第2章 变量和基本数据类型
2019-03-04
5.11 TEST1
2019-03-04
6.14 阶段考试
2019-03-04
牛客IOI周赛19-普及组
2019-03-04
2020牛客NOIP赛前集训营-普及组(第四、五场)
2019-03-04
uni-app请求头中携带token
2019-03-04
常用的 Git 命令和小技巧(1)
2019-03-04
vue中接收后台的图片验证码并显示
2019-03-04
springboot入门(1)---整合MyBatis
2019-03-04
Vue入门学习笔记(1)
2019-03-04
前端入门经验——页面布局
2019-03-04
ECharts——双向柱状图
2019-03-04
Vue——引进bootstrap
2019-03-04
Vue——引进ivew
2019-03-04
趣谈win10常用快捷键
2019-03-04
趣谈文件扩展名和隐藏文件
2019-03-04
追梦App系列博客——第五次例会总结
2019-03-04
大二数据结构(图的深度遍历的 非递归算法)
2019-03-04