repaint和reflow

概念介绍
一个页面由两部分组成：

1. DOM：描述该页面的结构
2. render(渲染)：描述 DOM 节点 (nodes) 在页面上如何呈现

• 当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知 render 重新描绘相应的元素, 此过程称为 repaint。
• 如果该次变化涉及元素布局 (如 width), 浏览器则抛弃原有属性, 重新计算并把结果传递给 render 以重新描绘页面元素, 此过程称为 reflow。
  

过程：
1.解析HTML代码并生成一个 DOM 树。
2.解析CSS文件，顺序为：浏览器默认样式->自定义样式->页面内的样式。
3.生成一个渲染树（render tree）。这个渲染树和DOM树的不同之处在于，它是受样式影响的。它不包括那些不可见的节点。
4.当渲染树生成之后，浏览器就会在屏幕上“画”出所有渲染树中的节点。

---

reflow（回流）
用以确定对象位置，或者是调用mozilla的Layout，会触发repaint。
与repaint区别就是他会影响到dom的结构渲染，同时他会触发repaint，他会改变他本身与所有父辈元素(祖先)，这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多效果越明显。

repaint（绘制）
颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍

---

会出现reflow的情况：
1））指定图片宽高的话，图片的载入会使页面reflow, 因为要根据图片宽高来更新frame。这里就有一个提高页面性能的小技巧：如果事先能够确定图片宽高的话，最好在HTML里写上。
２） display:none;
而另外一个切换可见性的属性visibility则不存在reflow问题，置为visibility:hidden的元素的frame并没有销毁，需要显示的时候其实就是一个repaint过程而已，没有reflow，因此效率会更高。
3 ）元素position在absolute和static之间切换的时候

会出现repaint的情况：
1 ）应用新的样式或者修改任何影响元素外观的属性
2 ）visibility:hidden
3 ) 拖动滚动条的时候

会出现reflow+paint的情况：
1）DOM元素的添加、修改（内容）、删除、移动
2 ） Resize 窗口的时候（移动端没有这个问题）
3）修改text属性

优化的方法：
1）需要对多个DOM元素的样式进行修改时，尽量预先定于好对应的class，使用修改classname的方式类修改
el.style.color = 'red;
使用style的话每一次赋值都会造成浏览器重新渲染
2 ）把 DOM 离线后修改（即将元素的display设置为”none”，完成修改后再把display修改为原来的值）
a> 使用 documentFragment 对象在内存里操作 DOM。 b> 先把 DOM 给 display:none (有一次 repaint)，然后你想怎么改就怎么改。比如修改 100 次，然后再把他显示出来。 c> clone 一个 DOM 节点到内存里，然后想怎么改就怎么改，改完后，和在线的那个的交换一下。
3 ）不要把 DOM 节点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性。
4 ）尽可能的修改层级比较低的 DOM节点。当然，改变层级比较底的 DOM节点有可能会造成大面积的 reflow，但是也可能影响范围很小。
5 ）为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是会大大减小 reflow 。使元素脱离标准流，也从DOM树结构中脱离出来，在需要reflow时只需要reflow自身与下级元素
6 ）尽可能不使用 table，因为可能很小的一个小改动会造成整个 table 的重新布局。
7 ）为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是会大大减小 reflow
8 ）避免使用expression,他会每次调用都会重新计算一遍(包括加载页面)
9 ）缓存Layout属性值

对于Layout属性中非引用类型的值（数字型），如果需要多次访问则可以在一次访问时先存储到局部变量中，之后都使用局部变量，这样可以避免每次读取属性时造成浏览器的渲染。
var width = el.offsetWidth; var scrollLeft = el.scrollLeft;

---

参考文章：

1. 【关于reflow—HTMLCSS教程】
2. 【javascript性能优化-repaint和reflow - 潴哥 - 博客园】
3. 【实验：absolute/display隐藏与回流等性能 « 张鑫旭-鑫空间-鑫生活】
4. 【页面重构应注意的repaint和reflow - 网页制作 - 蓝色理想】
5. 【[ JS 进阶 ] Repaint 、Reflow 的基本认识和优化 (2) - 温故而 ' 自信 ' - SegmentFault】
6. 【如何减少浏览器repaint和reflow（上） - 百度互联网技术官方博客 - 博客频道 - CSDN.NET】