在线滚动浏览器渲染优化层黑客将改变

Question

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

我想优化jank自由滚动的呈现，并以http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/中描述的一些技巧为例

只是想知道:我应该在哪里强制浏览器创建层？我应该在每个列表项周围创建一个呈现层吗？

我还想知道为什么浏览器不能单独完成这个任务，因为当一个元素是可滚动的，它会让我感觉到我们会上下移动这个元素的内容，而不会改变内部内容的呈现，对吗？那么，为什么浏览器不为任何可滚动元素的内部内容创建一个层呢？

顺便问一下，这个层创建黑客在浏览器之间是一致的吗？

编辑：

我已经注意到，现在可以向浏览器表明将发生一些更改。我可以举个例子:根据will-change: scroll-position; 这篇文章

但是，我仍然不明白浏览器为什么需要这样做，因为如果我们设置overflow-y: auto;或overflow-y: scroll;，那么滚动位置显然会发生变化。

Answer 1

如果您正在滚动的元素列表是“静态的”(它们在滚动时不改变它们的相对位置、大小、不透明度等)，那么您就没有什么可以改进滚动性能的了。这是因为您的可滚动内容已经提升到一个单独的层。您可以轻松地亲自测试它：

• 打开这个演示 (它不使用translate3d或will-change)，
• 在DevTools中启用“显示复合层边框”
• 并观察结果。

​

​

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

如果你正在经历简陋的滚动，那么试着缩小你的问题(例如在DevTools中使用时间线)。translateZ(0)不是解决所有性能问题的灵丹妙药。