在Chrome DevTools中，在渲染下，有一个选项"显示潜在的滚动瓶颈"
当我启用此功能时，我在屏幕上与overflow:scroll一起的一些div元素在顶部显示一个标志，表示"在滚动上重新绘制"。
我找不到很多关于这个功能的文档，我不知道这是我可以实际修复或改进的东西，或者只是一个事实的陈述-div有内容，他们确实滚动。
您可以将此CSS应用于div与overflow: scroll或overflow: auto，创建滚动瓶颈。
transform: translateZ(0);
-webkit-transform: translateZ(0);
这将迫使浏览器创建一个新的图层来绘制这个元素，有时会解决滚动瓶颈(特别是在Webkit中)。
虽然接受的答案解决了问题，但值得查看CSS will-change属性。最近，这比transform: translateZ(0);更受欢迎。下面是一篇详细解释两者区别的文章- https://dev.opera.com/articles/css-will-change-property/
.scroll-container {
will-change: transform;
}
令人惊讶的是，我花了好几天的时间来追踪到底发生了什么，而这仅仅是因为我在一个bug报告的末尾看到了单方面的注释Chromium bugtracker Issue 514303。下面是发生了什么以及如何修复它:
有一个概念叫做"LCD文本"，我认为它的意思是亚像素抗锯齿。"更清晰的文本"。不幸的是，此功能与排版加速滚动不兼容。
LCD文本默认启用(至少在Blink/Webkit上?)在所有非高dpi平台上(大多数普通显示器;例如，你可以检查console.log(devicePixelRatio))。另一方面，LCD文本在高dpi设备(如Retina显示器或大多数移动设备和平板电脑)上默认是禁用的，因为在高dpi平台上你并不真正需要"更清晰的文本"功能。
因此，对于合成加速滚动来说，情况正好相反:只有在禁用LCD文本的高dpi平台上才有可能。
然而，您可以通过将overflow:scroll元素提升到它自己的层，或者将will-change:transform添加到该元素，或者将任何类似的东西强制溢出元素成为它自己的层的父元素(例如transform:translateZ(0))，在大多数监视器上强制组合器加速滚动。(请注意，供应商前缀正在被删除。)
tl;dr: Chrome不假设亚像素抗锯齿和gpu辅助滚动;任选其一。亚像素抗锯齿是Chrome的默认选择(除了手机和视网膜显示器，因为它们的文本太小，你不需要这个功能，所以你不会注意到这些平台上的这个问题)。通过使用will-change:transform强制元素进入其自己的合成层来覆盖此设置(但请注意，可能您的文本看起来不完美)。
不，你不能修改，这是一个Chrome功能，让你知道，什么是绘制在窗口的每次更新
更新可以是很多不同的东西(滚动，鼠标移动，间隔，requestanimationframe，…)。
但是，现在你知道了，你可以增强你的代码。
如果(我不知道)，浏览器总是重新绘制div，如果它被设置为溢出滚动，你也许可以做一些JS设置为overflow hidden时出屏幕…
这篇文章讨论了不同的浏览器布局