repaint和reflow的相关知识

最近了解了下repaint和reflow的相关知识，觉得在页面重构过程中就应该考虑前端开发（js）人员对dom进行操作，能够减轻客户浏览器的鸭梨。
在这里整理了一下相关资料，推荐看帖子底部的文章，如果觉得排版不够好请移步我的博客围观。这是一个讨论帖，抛砖引玉，大家说说自己工作中的经验~

1. 什么是 repaint 和 reflow？

一个页面由两部分组成：
DOM：描述该页面的结构
render：描述 DOM 节点 (nodes) 在页面上如何呈现

当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知 render 重新描绘相应的元素, 此过程称为 repaint。

如果该次变化涉及元素布局 (如 width), 浏览器则抛弃原有属性, 重新计算并把结果传递给 render 以重新描绘页面元素, 此过程称为 reflow。

这两个过程是很耗费浏览器性能的, 从 IE 系列和 Chrome 渲染页面速度上的差距即可看出渲染引擎计算对应值和呈现并不一定高效, 而每次对元素的操作都会发生 repaints 或 reflow, 因此编写 DOM 交互时如果不注意就会导致页面性能低下.
页面渲染的过程如下：

1.解析HTML代码并生成一个 DOM 树。

2.解析CSS文件，顺序为：浏览器默认样式->自定义样式->页面内的样式。

3.生成一个渲染树（render tree）。这个渲染树和DOM树的不同之处在于，它是受样式影响的。它不包括那些不可见的节点。

4.当渲染树生成之后，浏览器就会在屏幕上“画”出所有渲染树中的节点。

2. 什么情况下会触发浏览器的repaint/reflow?

除了页面在首次加载时必然要经历该过程之外，还有以下行为会触发这个行为：
引用:
1. DOM元素的添加、修改（内容）、删除( Reflow + Repaint)
2. 仅修改DOM元素的字体颜色（只有Repaint，因为不需要调整布局）
3. 应用新的样式或者修改任何影响元素外观的属性
4. Resize浏览器窗口、滚动页面
5. 读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、 scrollTop/Left/Width/Height、clientTop/Left/Width/Height、 getComputedStyle()、currentStyle(in IE))
3. 怎么优化？

1. 避免在document上直接进行频繁的DOM操作，如果确实需要可以采用off-document的方式进行，具体的方法包括但不完全包括以下几种：

引用:
1. 先将元素从document中删除，完成修改后再把元素放回原来的位置
2. 将元素的display设置为”none”，完成修改后再把display修改为原来的值
3. 如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document
2. 集中修

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!