浏览器重绘与重排的区别

浏览器重绘与重排的区别？

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

如何触发重排和重绘？

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

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

如何避免重绘或者重排？

1.集中改变样式

// 判断是否是⿊⾊系样式 const theme = isDark ? 'dark' : 'light'

// 根据判断来设置不同的class ele.setAttribute('className', theme)

2.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);