哪些操作会引起重排和重绘?

　　在Web开发中，重排(Reflow)和重绘(Repaint)是性能优化中需要重点关注的两个方面。它们都涉及到浏览器对DOM元素的重新计算和重新渲染，但是它们的影响范围和性能开销有所不同。

　　1.重排(Reflow)：

　　·重排是指浏览器需要重新计算元素的位置和大小，然后重新布局页面的过程。

　　·触发重排的操作包括但不限于：

　　·添加、删除、修改DOM元素的结构和内容。

　　·修改元素的样式(尤其是影响布局的样式)，比如修改尺寸、位置、边距、填充等。

　　·改变窗口大小或者旋转设备。

　　·获取某些属性，比如offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollLeft等，因为这些属性的获取需要重新计算元素的布局。

　　·重排是比较昂贵的操作，因为它会导致整个页面布局的重新计算，影响性能。

　　2.重绘(Repaint)：

　　·重绘是指浏览器根据新的样式信息重新绘制元素的过程，但是元素的布局没有改变。

　　·触发重绘的操作包括但不限于：

　　·修改元素的颜色、背景、边框等样式，而不会影响元素的尺寸和位置。

　　·添加或者删除一些CSS类。

　　·显示、隐藏元素。

　　·重绘的开销相比于重排较小，因为它只涉及到样式的重新绘制，而不需要重新计算布局。

　　二.优化策略：

　　1.减少重排和重绘：

　　(1)尽量避免频繁地修改DOM结构和样式，可以通过批量操作、使用DocumentFragment等方式优化。

　　(2)使用cssText或者classList一次性修改多个样式，而不是单独修改每个样式。

　　(3)使用定位、flex布局等减少重排的布局方式。

　　(4)对于需要频繁获取元素尺寸的操作，可以缓存这些值，减少对布局的影响。

　　2.优化重排和重绘的范围：

　　(1)使用分层渲染(Hardware Acceleration)技术，将页面分成多个层级，只对需要重排和重绘的层进行操作，减少整个页面的影响范围。

　　(2)使用transform和opacity等属性来触发GPU加速，减少对布局的影响。

　　3.合理使用CSS性能优化技巧：

　　(1)避免使用昂贵的样式属性，比如box-shadow、border-radius等，因为它们可能导致重排和重绘。

　　(2)使用will-change属性来提示浏览器哪些属性可能会发生变化，从而优化重排和重绘的性能。

　　综上所述，重排和重绘是影响页面性能的重要因素，需要在开发过程中注意避免不必要的重排和重绘，以提高页面的响应速度和用户体验。