浏览器重绘与重排的区别？ 重排: 部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算，表现为重新生成布局，重新排列元素 重绘: 由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新，表现为某些元素的外观被改变 单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分
重排和重绘代价是高昂的，它们会破坏用户体验，并且让UI展示非常迟缓，而相比之下重排的性能影响更大，在两者无法避免的情况下，一般我们宁可选择代价更小的重绘。
『重绘』不一定会出现『重排』，『重排』必然会出现『重绘』。 『重绘』不一定会出现『重排』，『重排』必然会出现『重绘』
如何触发重排和重绘？ 任何改变用来构建渲染树的信息都会导致一次重排或重绘：
添加、删除、更新DOM节点 通过display: none隐藏一个DOM节点-触发重排和重绘 通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化 移动或者给页面中的DOM节点添加动画 添加一个样式表，调整样式属性
用户行为，例如调整窗口大小，改变字号，或者滚动。
如何避免重绘或者重排？ 集中改变样式 我们往往通过改变class的方式来集中改变样式 // 判断是否是黑色系样式 const theme = isDark ? 'dark' : 'light'
// 根据判断来设置不同的class ele.setAttribute('className', theme)
