Web页面回流与重绘

港控/mmm° 2022-05-15 20:11 259阅读 0赞

**回流（**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 = ""+(i+1)+""+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 += ""+(i+1)+""；
 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 = ""+(i+1)+""+cur.title
 frg.appendChild(li);
 }
 ul.appendChild(frg);
 frg = null; // 释放内存

**优点：**只有一次回流，并且对原来的没有影响，比前两种方式好，采用这种方式绑定数据可以优化页面渲染