無月

前端学习笔记

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必定伴随repaint?

参考文章：