我可以对 Chrome 中的“overflow:scroll”div 中的“repaints on scroll”警告做些啥吗

Posted 2023-03-06

【中文标题】我可以对 Chrome 中的“overflow:scroll”div 中的“repaints on scroll”警告做些啥吗

【英文标题】：Can I do anything about "repaints on scroll" warning in Chrome for "overflow:scroll" div我可以对 Chrome 中的“overflow:scroll”div 中的“repaints on scroll”警告做些什么吗

【发布时间】：2014-09-04 15:54:28

【问题描述】：

在 Chrome DevTools 中，在“渲染”下，有一个“显示潜在的滚动瓶颈”选项。

启用此功能后，我在屏幕上使用 overflow:scroll 的一些 div 元素会在顶部显示一个标志，上面写着“滚动时重绘”。

我找不到很多关于这个功能的文档，我不知道它是否是我可以真正修复或改进的东西，或者只是一个事实陈述 - div 有内容，它们确实滚动.

【参考方案1】：

不，你不能修改它，它是一个 Chrome 功能，可以让你知道，窗口中的每个更新都画了什么。

更新可以是很多不同的东西（滚动、鼠标移动、间隔、requestanimationframe...）。

但是，现在您知道了，您可以增强您的代码。

如果（我不知道），浏览器总是重新绘制一个div，如果它设置为溢出滚动，你也许可以做一些JS设置为overflow hidden当屏幕外...

This post谈不同的浏览器布局

【参考方案2】：

您可以在 div 和 overflow: scroll 或 overflow: auto 上应用此 CSS，这会产生滚动瓶颈。

transform: translateZ(0);
-webkit-transform: translateZ(0);

这将迫使浏览器创建一个新层来绘制此元素，并且有时会修复滚动瓶颈（尤其是使用 Webkit）。

【讨论】：

Google 现在支持不带前缀的translateZ

我认为-webkit-backface-visibily: hidden 应该也可以。

@Shikkediel 也可以，但是你拼错了，理想情况下你应该包括所有供应商前缀：-moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden;

啊，你是对的@Chris Barr。我通常拼写检查更好。 webkit 前缀对于较旧的浏览器版本可能是一个很好的前缀。对于 mozilla，我认为可能没有必要，该浏览器似乎以不同的方式处理重绘 - 例如fixed 位置的大块。但我想这取决于具体情况，这里并没有真正给出。

在所有现代浏览器都可以用“will-change”解决问题之前，这应该继续被称为正确答案

【参考方案3】：

这令人惊讶地花了我好几天的时间来追踪发生了什么，只是因为我在 Chromium bugtracker Issue 514303 的错误报告末尾看到了一边评论。以下是发生了什么以及如何解决它：

有一个概念叫做“LCD 文本”，我相信它的意思是亚像素抗锯齿，即“更清晰的文本”。不幸的是，此功能与合成器加速滚动互不兼容。

默认情况下（至少在 Blink/Webkit 上？）在所有非高 DPI 平台（大多数普通显示器；即您可以检查 console.log(devicePixelRatio)）上启用 LCD 文本。另一方面，在高 DPI 设备（想想 Retina 显示器，或大多数移动设备和平板电脑）上默认禁用 LCD 文本，因为在高 DPI 平台上您并不需要“更清晰的文本”功能。

因此，合成器加速滚动的情况正好相反：只有在禁用 LCD 文本的高 DPI 平台上才有可能。

但是，您可以通过将overflow:scroll 元素提升到它自己的层，通过将will-change:transform 添加到该元素或任何将强制溢出元素成为自己层的父级（例如transform:translateZ(0)）。 （请注意，供应商前缀已被删除。）

tl;dr：Chrome 不假设亚像素抗锯齿和 GPU 辅助滚动；选择一个或另一个。亚像素抗锯齿是 Chrome 上的默认选项（手机和视网膜显示器除外，因为它们的文本很小，您不需要该功能，因此在这些平台上您不会注意到此问题）。通过使用will-change:transform 强制元素进入其自己的合成器层来覆盖它（但请注意，您的文本可能看起来并不完美）。

【参考方案4】：

虽然接受的答案解决了问题，但值得查看 CSS will-change 属性。最近，这比transform: translateZ(0); 更受欢迎。这是一篇详细解释差异的文章 - https://dev.opera.com/articles/css-will-change-property/

.scroll-container 
  will-change: transform;

【讨论】：

这应该是首选答案，因为它不像上面的那样是黑客攻击。

奇怪的是，will-change: scroll-position 似乎没有任何效果。

那么我应该同时使用两者来支持旧版浏览器吗？

这解决了我们页面上有滚动区域的奇怪性能问题

你不能只用will-change: transform替换translateZ(0)，对吧？一定要一起用吗？