javascript 我可以对 Chrome 中的“overflow:scroll”div 中的“repaints on scroll”警告做任何事情吗
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24741502/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I do anything about "repaints on scroll" warning in Chrome for "overflow:scroll" div
提问by user888734
In Chrome DevTools, under Rendering, there's an option to "Show potential scroll bottlenecks".
在 Chrome DevTools 的 Rendering 下，有一个“显示潜在的滚动瓶颈”选项。
When I enabled this, some divelements I have on the screen with overflow:scrollshow a flag at the top saying "repaints on scroll."
当我启用它时，div我在屏幕上的一些元素overflow:scroll在顶部显示一个标志，上面写着“在滚动时重新绘制”。
I can't find a lot of documentation on this feature, and I don't know whether it's something I can actually fix or improve upon, or just a statement of fact - the divs have content, and they do indeed scroll.
我找不到很多关于这个功能的文档，我不知道它是否是我可以真正修复或改进的东西，或者只是一个事实陈述 - div 有内容，而且它们确实滚动。
回答by lepix
You can apply this CSS on the divwith overflow: scrollor overflow: autothat create scroll bottlenecks.
您可以将此 CSS 应用到divwithoverflow: scroll或overflow: auto创建滚动瓶颈的地方。
transform: translateZ(0);
-webkit-transform: translateZ(0);
That will force the browser to create a new layer to paint this element, and sometimes fix scroll bottlenecks (especially with Webkit).
这将迫使浏览器创建一个新层来绘制这个元素，有时会修复滚动瓶颈（尤其是使用 Webkit）。
回答by msenni
Although the accepted answer solves the problem, it is worth looking at the CSS will-changeproperty. This is preferred over transform: translateZ(0);in recent times. Here is an that article explains the difference in detail - https://dev.opera.com/articles/css-will-change-property/
尽管接受的答案解决了问题，但还是值得查看 CSSwill-change属性。这transform: translateZ(0);在最近是首选。这是一篇文章详细解释了差异 - https://dev.opera.com/articles/css-will-change-property/
.scroll-container {
will-change: transform;
}
回答by ninjagecko
This amazingly took me multiple days to track down what was going on, and only because I saw the one side-comment at the end of a bug report at Chromium bugtracker Issue 514303. Here's what's going on and how to fix it:
这令人惊讶地花了我好几天的时间来追踪发生了什么，这只是因为我在Chromium bugtracker Issue 514303的错误报告末尾看到了一个侧面评论。这是发生了什么以及如何解决它：
There exists a concept called "LCD text", which I believe means subpixel antialiasing, i.e. "crisper sharper text". Unfortunately, this feature is mutually incompatible with compositor-accelerated scrolling.
存在一个称为“LCD 文本”的概念，我认为这意味着子像素抗锯齿，即“更清晰的文本”。不幸的是，此功能与合成器加速滚动互不兼容。
LCD text is enabled by default (at least on Blink/Webkit?) on all platforms which are not high-DPI (most normal monitors; i.e. you can check console.log(devicePixelRatio)). On the other hand, LCD text is DISABLED by default on high-DPI devices (think Retina display, or most mobile devices and tablets) since you don't really need a "crisper sharper text" feature on high-DPI platforms.
LCD 文本在所有非高 DPI 的平台（大多数普通显示器；即您可以检查console.log(devicePixelRatio)）上默认启用（至少在 Blink/Webkit 上？）。另一方面，在高 DPI 设备（想想 Retina 显示器，或大多数移动设备和平板电脑）上，默认情况下 LCD 文本是禁用的，因为在高 DPI 平台上您并不真正需要“更清晰的文本”功能。
Therefore the opposite is true for compositor-accelerated scrolling: it is only possible on high-DPI platform where LCD text is disabled.
因此，合成器加速滚动的情况正好相反：只有在禁用 LCD 文本的高 DPI 平台上才有可能。
However, you can force compositor-accelerated scrolling on most monitors by promoting the overflow:scrollelement to its own layer, by either adding will-change:transformto that element, or any hackish equivalent which will force the overflow element to be the parent of its own layer (such as transform:translateZ(0)). (Do note that vendor prefixes are being removed.)
但是，您可以通过将overflow:scroll元素提升到它自己的层来强制合成器加速滚动，方法是将will-change:transform元素添加到该元素或任何会强制溢出元素成为其自己层的父级的 hackish 等效元素（例如transform:translateZ(0)） . （请注意，供应商前缀正在被删除。）
tl;dr: Chrome doesn't suppose both subpixel antialiasing AND gpu-assisted scrolling; pick one or the other. Subpixel antialiasing is the default pick on Chrome (except on cellphones and retina displays, because their text is so small you don't need the feature, so you won't notice this issue on those platforms). Override this by forcing the element into its own compositor Layer with will-change:transform(but note that maybe your text won't look crystal perfect).
tl; dr：Chrome 不假设子像素抗锯齿和 GPU 辅助滚动；选择其中之一。亚像素抗锯齿是 Chrome 上的默认选择（手机和视网膜显示器除外，因为它们的文本很小，您不需要该功能，因此在这些平台上您不会注意到此问题）。通过强制元素进入其自己的合成器层来覆盖它will-change:transform（但请注意，您的文本可能看起来并不完美）。
回答by Jordan
Nope, you cant modify that, it is a Chrome function to allow you to know, what's painted each update in the window.
不，你不能修改它，它是一个 Chrome 功能，让你知道，窗口中的每个更新都画了什么。
Updates can be a lot of different things (scroll, mousemove, interval, requestanimationframe,...).
更新可以是很多不同的东西（滚动、鼠标移动、间隔、请求动画帧，...）。
But, now you know that, you can enhance your code.
但是，现在您知道了，您可以增强您的代码。
If (I dont know), the browser alway re-paint a divif it is set to overflow scroll you maybe can do some JS to set to overflow hiddenwhen out of screen...
如果（我不知道），浏览器总是重新绘制一个div如果它被设置为溢出滚动你也许可以做一些 JS 来设置overflow hidden在屏幕外时......
This posttalk about different Browser layout
这篇文章谈论不同的浏览器布局
