html - onscroll - 浏览器渲染优化 - layers hack - will-change

Question

我有一个包含元素列表的可滚动元素的应用程序。

我想使用 http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/ 中描述的一些技巧优化无卡顿滚动的呈现。例如

只是想知道:我应该在哪里强制浏览器创建图层？我是否应该在我的每个列表项周围创建一个渲染层？

我也想知道为什么浏览器不能自己做这个，因为当一个元素是可滚动的时，我觉得我们可以上下移动这个元素的内容而不改变内部内容的渲染对吗？那么为什么浏览器不为任何可滚动元素的内部内容创建一个层呢？

顺便问一下，这个图层创建技巧在浏览器中是否一致？

编辑:

我注意到现在可以向浏览器指示将发生某些更改。我可以使用例如:will-change: scroll-position; 根据 this article

但是，我仍然不明白为什么浏览器需要这个，因为如果我们设置 overflow-y: auto;
或 overflow-y: scroll; ，看起来很明显滚动位置是预期变化的。

Answer 1

如果您滚动的是“静态”元素列表(它们不会在您滚动时更改它们的相对位置、大小、不透明度等)，那么您无法提高滚动性能。那是因为您的可滚动内容是已经提升到一个单独的层。您可以轻松地自己测试一下:

• 打开this demo (它不使用 translate3d 也不使用 will-change)，
• 在 DevTools 中启用“显示合成图层边框”
• 并观察结果。

可滚动内容周围的橙色边框表示它位于单独的层上。

如果您遇到卡顿滚动，请尝试缩小问题范围(例如使用 DevTools 中的时间轴)。 translateZ(0) 并不是解决所有性能问题的 Elixir 。