如何解决Chrome浏览器对“overflow:scroll” div的滚动引起的重绘警告问题-JavaScript中文网-JavaScript教程资源分享门户

在开发前端网页时，我们经常会使用 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，从而避免重绘的问题。

.parent-element {
  will-change: transform;
}

2. 使用`transform`属性

在修改元素位置时，可以使用transform属性来代替top和left属性，从而避免重绘操作。同时，使用transform属性还可以开启GPU加速，提高页面的性能。

.child-element {
  transform: translateX(100px) translateY(100px);
}

3. 避免强制同步布局

当我们需要读取元素的某些属性值时，浏览器会进行一次强制同步布局（Layout），从而导致回流操作。因此，我们应该尽量减少或避免频繁地进行强制同步布局。

// 不推荐做法
const top = element.offsetTop;
const left = element.offsetLeft;

// 推荐做法
const rect = element.getBoundingClientRect();
const top = rect.top;
const left = rect.left;

示例代码

下面是一个示例代码，包含了使用will-change和transform属性来避

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/28632

如何解决Chrome浏览器对“overflow:scroll” div的滚动引起的重绘警告问题