回流与重绘

旧城等待， 2022-06-05 06:22 247阅读 0赞

回流（reflow）：当render树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建时
    称为回流。如改变某个元素的margin，那么其后的元素需要跟着改变。render树需要重新组装。
    
    重绘（repaint）：元素的外观、风格改变并且不会影响页面布局时称为重绘。
    如改变元素的背景颜色，字体颜色等。
    
    注：改变文字大小在一定程度上可能会改变页面的结构，撑破原有的容器。
    
    dom树：包含元素，即html标签；
    
    render树：不仅包含html元素，还能识别样式，即每个节点都有对应的样式修饰。
    但其不包含隐藏的节点（display：none；head节点），包含visibility:hidden元素， 因为设置该样式的元素会影响布局。

回流发生的场景：
    
    1.添加或者删除可见的DOM元素;
    
    2.元素位置改变;
    
    3.元素尺寸改变——边距、边框、填充、宽度和高度;
    
    4.内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变;
    
    5.页面渲染初始化;
    
    6.浏览器窗口尺寸改变——resize事件发生时.

例：
    /*回流必将引起重绘，而重绘不一定引起回流。*/
    var s = document.body.style;
    s.padding = "2px"; // 回流+重绘
    s.border = "1px solid red"; // 再一次 回流+重绘
    s.color = "blue"; // 再一次重绘
    s.backgroundColor = "#ccc"; // 再一次 重绘
    s.fontSize = "14px"; // 再一次 回流+重绘
    // 添加node，再一次 回流+重绘
    document.body.appendChild(document.createTextNode('abc!'));

因此回流比重绘的代价更高，回流的花销与render tree中有多少节点需要重建有关。

浏览器自身的优化：
    
    浏览器会维护1个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量
    或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。
    这样就会让多次的回流、重绘变成一次回流重绘。
    
    但当你请求向浏览器请求一些 style信息的时候，为了提供更准确的值。浏览器会提前flush队列。
    
    如：
    
    1. offsetTop, offsetLeft, offsetWidth, offsetHeight;
    
    2. scrollTop/Left/Width/Height;
    
    3. clientTop/Left/Width/Height;
    
    4. width,height;
    
    5. window.getComputedStyle("对象")["属性名"]或者IE的 obj.currentStyle.属性名;

#### 减少回流与重绘的方式： ####

1.避免逐项更改样式，最好一次性更改style属性，即先定义一个类，为其设置样式，再将该类添加到指定的元素中去。

如：
    <style> .new{ background-color: pink; } </style>
    <script> var body = document.body; body.className += " new";/*注意此处有一个空格*/ </script>

2.在一个设置display: none的元素上进行操作，操作完后让其显示。因为在display： none元素上做的操作不会引起回流与重绘。

3.绝对定位具有复杂动画的元素，使其脱离文档流，不会引起其父元素及后继元素的大量回流。

4.不要多次或循环读取使浏览器提前flush队列的属性。

例：
    /*优化前的做法*/
    for(循环) {
        el.style.left = el.offsetLeft + 5 + "px";
        el.style.top = el.offsetTop + 5 + "px";
    }
    
    /*优化后的做法*/
    /*在循环前将需要操作的属性存储起来*/
    var left = el.offsetLeft,top = el.offsetTop,s = el.style; 
    for (循环) { 
        left += 10; 
        top += 10; 
        s.left = left + "px"; 
        s.top = top + "px"; 
    }