浏览器的回流和重绘

浏览器的渲染过程

当我们浏览一个网页的时候，我们的网页是经过浏览器渲染而成的。渲染的过程如下：
1.解析HTML,生成DOM树；解析CSS代码，生成CSSOM树。
2.将DOM树和CSSOM树结合起来生成渲染树
3.回流：根据渲染树，得到节点的几何信息（位置和大小）
4.重绘：根据回流和渲染树得到的几何信息，转化成实际设备的绝对像素值。
5.Display:将像素值发送给GPU,展示在页面上。

何时进行回流和重绘？

频繁地回流和重绘会影响性能，那么何时会进行回流和重绘呢？
1.页面第一次渲染的时候。
2.页面添加或删除元素。
3.元素的位置信息发生了变化。
4.元素的大小发生了变化。
5.浏览器的窗口发生了变化
6.读取offsetWidth/offsetHeight/offsetTop/offsetLeft、
clientLeft/clientTop/clientWidth/clientHeight、
scrollWidth/scrollHeight/scrollLeft/scrollTop属性
和getComputedStyle()方法的时候会强制进行回流和重绘。

如何减少回流和重绘？

1.针对页面第一次的渲染，我们没法优化

2.当我们想添加元素时，我们可以把元素添加到document fragment中，最后一次性添加到文档中。

以添加li标签为例：

function appendLi(dom,num)
{
    for(let i=0;i<num;i++)
    {
       let li=document.createElement("li");
       li.innerText="text";
       dom.appendChild(li);
     }
}
let ul=document.getElementById("list");
let fragment=document.createDocumentFragment();   
appendLi(fragment,5);
ul.appendChild(fragment);

这样就会减少每次循环产生的浏览器的回流和重绘。只会在fragment添加到文档流的时候产生一次回流和重绘。

3.对于需要删除的元素，我们可以使元素先脱离文档流进行删除。

let ul=document.getElementById("list");
ul.style.display="none";
ul.removeChild(ul.firstElementChild);
ul.removeChild(ul.lastElementChild);
ul.removeChild(ul.firstElementChild);
ul.removeChild(ul.firstElementChild);
ul.style.display="block";

这样，只会在元素脱离文档流和重回文档流的时候引起回流和重绘。

4.当元素的的尺寸或位置发生变化的时候，我们可以通过cssText或者为元素添加class属性一次性地对元素进行操作。

const el=document.getElementById("list");
el.style.cssText += 'border-left:1px;border-right:3px;padding:5px;';

或者

const el=document.getElementById("list");
el.className+= ' active';

5.当我们频繁读取到offsetWidth等属性时，可以将offsetWidth属性进行缓存。

假设我想把p标签的宽度设置为一个元素的宽度。

const width=box.offsetWidth;
function initP() {
    for (let i = 0; i < paragraphs.length; i++) {
        paragraphs[i].style.width = width + 'px';
}

6.对于复杂的动画，由于它会经常发生回流和重绘，因此，我们可以使用绝对定位使它脱离文档流。

如何不产生回流和重绘

这时候CSS3硬件加速就出现了。使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘 。

注意：回流一定会导致重绘，重绘不一定导致回流。