前端性能之重排和重绘

 前端性能之重排和重绘 https://www.cnblogs.com/soyxiaobi/p/9963019.html

1：什么是重排、重绘

当DOM的变化引发了元素几何属性的变化,比如改变元素的宽高,元素的位置导致浏览器不得不重新计算元素的几何属性,并重新构建渲染树,这个过程为重排.完成重排后,要将重新构建的渲染树渲染到屏幕上,这个过程就是重绘.

简单地说，重排负责元素的几何属性更新，重绘负责元素的样式更新。而且，重排必然带来重绘，但是重绘未必带来重排。比如，改变某个元素的背景（色、图），这个就不涉及元素的几何属性，所以只发生重绘。

2：重排(回流)触发机制

（1）添加或删除可见的DOM元素

（2）元素位置改变

（3）元素本身尺寸发生改变

（4）内容改变

（5）页面渲染器初始化

（6）浏览器窗口大小发生改变

3：如何进行性能优化

（1）修改样式使用CSSText属性 eg: var el = document.querySelector('.el'); el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px';

（2）切换class类名 也可以减少重排

（3）批量修改DOM

    1）可以先隐藏元素(display:none),进行修改后,然后再显示该元素

    2）使用文档片段document.createDocumentFragment()创建,再进行添加

    3)  将原始元素拷贝到cloneNode()一个独立的节点中,操作该节点然后覆盖原始元素

let old = document.querySelector('#mylist');
let clone = old.cloneNode(true);
appendNode(clone, data);
old.parentNode.replaceChild(clone, old);