html - Chrome 在低 DPI 和高 DPI 显示器上以不同方式重绘滚动条上的 div

Question

我正在努力优化我的网络应用程序中的滚动性能，并在最新的 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 甚至会这样指示:

但是当我将窗口移动到我的视网膜显示器并刷新页面时，滚动性能得到改善!它只重新绘制滚动条本身(有时还重新绘制以前不在滚动视口(viewport)中的内容):

高 DPI 行为似乎更可取，滚动速度更快。有什么方法可以在 Chrome 中实现这种性能而不考虑 DPI？

Answer 1

我没有 Retina 显示屏计算机来测试它。我猜您可以在 .container 上尝试“translateZ hack”吗？

.container { -webkit-transform: translateZ(0); }

不确定这是否有效。但在某些情况下，它通过将该元素分离到它自己的“层”中来帮助修复浏览器重绘。

希望这对您有所帮助!