我正在努力优化网络应用程序中的滚动性能,并在最新的 Chrome (v31) 上遇到了有趣的行为,这也在 Chrome Canary (v34) 上重现。
在这个简化的示例中,我有一个简单的可滚动 div:
<style>
.container {
width: 200px;
height: 200px;
overflow: auto;
background: #ccc;
}
.container div {
height: 80px;
width: 80px;
background: #555;
border-radius: 10px;
}
</style>
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
我启用了以下 Chrome 开发设置来研究滚动性能:
当我在非视网膜显示屏上加载网页时,它会在每个滚动条上重新绘制整个容器 div,Chrome 甚至会这样指示:
但是当我将窗口移动到视网膜显示屏并刷新页面时,滚动性能得到改善!它仅重新绘制滚动条本身(有时还重新绘制以前不在滚动视口中的内容):
高 DPI 行为似乎更可取,并且滚动速度更快。无论 DPI 如何,有什么方法可以在 Chrome 中实现这种性能?
我没有 Retina 显示计算机来测试这个。我猜你可以在 .container 上尝试“translateZ hack”?
.container { -webkit-transform: translateZ(0); }
不确定这是否有效。但在某些情况下,它可以通过将该元素分离到它自己的“层”中来帮助修复浏览器重绘。
希望这有帮助!
我在邮递员团队的博客文章中找到了对此的解释。他们使用上面列出的相同解决方案,但解释了为什么会发生这种情况。尝试下面的代码片段应该可以解决这个问题。
webkit-transform: translate3d(0,0,0);
http://blog.getpostman.com/2015/01/23/ui-repaint-issue-on-chrome/
这是一个类似的问题:我可以对 Chrome 中“溢出:滚动”div 的“滚动重绘”警告做任何事情吗
现代方法似乎是
will-change: scroll-position;
尽管 MDN 文档这么说:
旨在作为最后的手段will-change