重绘与回流

重绘与回流的机制

CSS外部文件的引入要放到头部，加载CSS的时候页面渲染是被阻塞的，JS也是会阻塞页面渲染的，UI渲染和JS引擎线程是互斥的，不是并行的，CSS的性能会让JS变慢，优化性能，layout painting。

1. 当render tree中的一部分(或全部)因为元素的规模尺寸，几何属性，布局，隐藏等改变而需要重新构建。这就称为回流。每个页面至少需要一次回流，就是在页面第一次加载的时候。

2. 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

注：回流必将引起重绘，而重绘不一定会引起回流。

哪些情况会发生重绘，回流？

不同的条件下发生重排的范围及程度会不同 ：

1.页面初始渲染

2.改变字体，改变元素尺寸（宽、高、内外边距、边框，改变元素位置等

各种情况：

         设置 style 属性的值 

         激活 CSS 伪类，比如 :hover

         操作 class 属性

        css3的某些属性（https://csstriggers.com/  结合此链接查看哪些属性会触发重排、哪些属性会触发重绘以及哪些属性会触发合成；）

（注意：如果修改属性不影响布局则不会发生重排）

3…改变元素内容（文本或图片等或比如用户在input框中输入文字）

4.添加/删除可见DOM元素（注意：如果是删除本身就display:none的元素不会发生重排；visibility:hidden的元素显示或隐藏不影响重排）

5.fixed定位的元素,在拖动滚动条的时候会一直回流

6. 调整窗口大小（Resizing the window）

7.计算 offsetWidth 和 offsetHeight 属性【注释2】

【注释2：flush队列】

浏览器是聪明的，当对以下属性进行操作的时候：

包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。

浏览器不会马上操作它们，而是会先缓存在队列中，有一定时间顺序去执行这些操作，但是在这过程中我们需要去获取在该队列中的属性时，浏览器为取得正确的值就会触发重排。这样就使得浏览器的优化失效了。

所以，在多次使用这些值时应进行缓存。