Web页面回流与重绘

回流（reflow）：

当HTML结构发生变化时，浏览器都需要重新计算一遍最新的DOM结构，重新对当前页面进行渲染

重绘（repaint）：

如果只是改变某个元素的背景色、文字颜色、边框颜色等，而不影响它周围或内部布局的属性，浏览器只需重新渲染当前的元素即可

回流是不可避免的，我们可以通过以下的方式减小回流带来的影响：

1.css中避免使用不必要的复杂选择器，特别是后代选择器，因为这会消耗更多的性能去匹配选择器

2.对于经常使用复杂操作的地方，尝试使用position：absolute/fixed定位；或者是display：none，使之脱离文档流后进行操作，操作完成后再进入到文档流之中。

3.使用js改变元素样式时尽量直接更改其class而非修改属性

4.采用更优的数据绑定方式

我们来对比一下以下的几种数据绑定方式：

①把需要动态绑定的内容一个个的追加到页面中

const ul = document.getElementById('ul')
for (let i = 0; i < arr.length; i++) {
    let cur = arr[i];
    let li = document.createElement('li');
    li.innerHTML = "<span>"+(i+1)+"</span>"+cur.title；
    ul.appendChild(li)；
}
优点：对原来的元素没有任何的影响

缺点：每当创建一个li，我们就添加到页面中，引发一次DOM的回流，最后引发回流次数过多，影响我们的性能。

②先拼接字符串，最后再添加到页面中

const ul = document.getElementById('ul')
let str = "";
for (let i = 0; i < arr.length; i++) {
    let cur = arr[i];
    str += "<li>";
    str += "<span>"+(i+1)+"</span>"；
    str += cur.title;
    str += "</li>"
}
ul.innerHTML += str;
优点：只引发一次回流

缺点：把新拼接的字符串添加到ul中，原有的li绑定的事件都消失了

③利用DocumentFragment，DocumentFragment节点不属于文档树，当请求把一个DocumentFragment节点插入文档树时，插入的不是DocumentFragment自身，而是它的所有子孙节点。这个特性使得DocumentFragment成了占位符，暂时存放那些一次插入文档的节点。我们可以把要增加的内容存储到frg中，然后再添加到页面中

const ul = document.getElementById('ul')
let frg = document.createDocumentFragment();
for (let i = 0; i < arr.length; i++) {
    let cur = arr[i];
    let li = document.createElement('li');
    li.innerHTML = "<span>"+(i+1)+"</span>"+cur.title
    frg.appendChild(li);
}
ul.appendChild(frg);
frg = null;            // 释放内存
 优点：只有一次回流，并且对原来的没有影响，比前两种方式好，采用这种方式绑定数据可以优化页面渲染