在开发前端网页时，我们经常会使用 overflow CSS属性来控制元素的溢出行为。其中，overflow:scroll可以让元素出现滚动条，实现内容的可滚动性。但是，在使用overflow:scroll属性的同时，会在Chrome浏览器中产生一个重绘（repaint）的警告，导致页面性能下降。那么，如何避免这个问题呢？
重绘和回流
在了解如何解决Chrome浏览器的重绘问题之前，我们需要先了解一些基础知识。在网页渲染过程中，浏览器会将HTML、CSS和JS文件解析并转换成可视化的界面，其中包括两个主要步骤：重绘和回流。
重绘指的是浏览器对修改后的元素样式的重新绘制，而不改变它们的位置和大小。回流则是指浏览器重新计算和排列元素的大小和位置，以响应DOM结构或样式的更改。
由于回流涉及到整个页面布局的更改，因此它比重绘耗费更多资源。当我们频繁地进行回流操作时，就会极大地降低页面的性能。
Chrome浏览器的重绘问题
在Chrome浏览器中，当我们使用overflow:scroll属性时，会导致子元素的滚动触发父元素的重绘。这是因为Chrome浏览器默认会开启GPU加速来渲染页面，而使用了overflow:scroll属性后，GPU加速就会失效，从而导致页面的性能下降。
同时，Chrome浏览器还会在Console面板中给出一个警告：Consider using 'transform' instead of 'top/left' to avoid the warning.这是因为，当我们使用top或left属性来改变元素位置时，也会触发重绘操作。
解决Chrome浏览器的重绘问题
针对Chrome浏览器的重绘问题，我们可以采取以下措施：
1. 使用will-change属性
will-change属性可以告诉浏览器哪些属性即将被改变，以便浏览器提前做好相应的优化工作。在使用overflow:scroll属性时，我们可以将其父元素的will-change属性设置为transform，从而避免重绘的问题。
--------------- - ------------ ---------- -
2. 使用transform属性
在修改元素位置时，可以使用transform属性来代替top和left属性，从而避免重绘操作。同时，使用transform属性还可以开启GPU加速，提高页面的性能。
-------------- - ---------- ----------------- ------------------ -
3. 避免强制同步布局
当我们需要读取元素的某些属性值时，浏览器会进行一次强制同步布局（Layout），从而导致回流操作。因此，我们应该尽量减少或避免频繁地进行强制同步布局。
-- ----- ----- --- - ------------------ ----- ---- - ------------------- -- ---- ----- ---- - -------------------------------- ----- --- - --------- ----- ---- - ----------
示例代码
下面是一个示例代码，包含了使用will-change和transform属性来避
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28632