Javascript 避免浏览器重绘和重排

重排与重绘的区别

1. 重排: 部分渲染树（或者整个渲染树）需要重新分析并且节点尺⼨需要重新计算，表现为重新⽣成布局，重新排列 元素
2. 重绘: 由于节点的⼏何属性发⽣改变或者由于样式发⽣改变，例如改变元素背景⾊时，屏幕上的部分内容需要更 新，表现为某些元素的外观被改变

单单改变元素的外观，肯定不会引起⽹⻚重新⽣成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分

重排和重绘代价是⾼昂的，它们会破坏⽤户体验，并且让UI展示⾮常迟缓，⽽相⽐之下重排的性能影响更⼤，在两者⽆ 法避免的情况下，⼀般我们宁可选择代价更⼩的重绘。

『重绘』不⼀定会出现『重排』，『重排』必然会出现『重绘』。

如何触发重排和重绘

任何改变⽤来构建渲染树的信息都会导致⼀次重排或重绘：

1. 添加、删除、更新DOM节点
2. 通过display: none隐藏⼀个DOM节点-触发重排和重绘
3. 通过visibility: hidden隐藏⼀个DOM节点-只触发重绘，因为没有⼏何变化
4. 移动或者给⻚⾯中的DOM节点添加动画
5. 添加⼀个样式表，调整样式属性
6. ⽤户⾏为，例如调整窗⼝⼤⼩，改变字号，或者滚动。

如何避免重排或者重绘

集中改变样式

我们往往通过改变class的⽅式来集中改变样式

// 判断是否是⿊⾊系样式 
const theme = isDark ? 'dark' : 'light' 
// 根据判断来设置不同的class 
ele.setAttribute('className', theme) 

使⽤DocumentFragment

我们可以通过createDocumentFragment创建⼀个游离于DOM树之外的节点，然后在此节点上批量操作，最后插⼊

DOM树中，因此只触发⼀次重排

var fragment = document.createDocumentFragment(); 
for (let i = 0;i<10;i  ){ 
let node = document.createElement("p"); 
node.innerHTML = i; 
fragment.appendChild(node); 
}
document.body.appendChild(fragment); 

提升为合成层

将元素提升为合成层有以下优点：

1. 合成层的位图，会交由 GPU 合成，⽐ CPU 处理要快
2. 当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层
3. 对于 transform 和 opacity 效果，不会触发 layout 和 paint

提升合成层的最好⽅式是使⽤ CSS 的 will-change 属性：

#target { 
will-change: transform; 
}

这篇好文章是转载于：学新通技术网