我正在努力优化我的网络应用程序中的滚动性能,并在最新的Chrome(v31)上遇到了有趣的行为,这也是Chrome Canary(v34)的重复版.
在这个简化的例子中,我有一个简单的可滚动div:
.container {
width: 200px;
height: 200px;
overflow: auto;
background: #ccc;
}
.container div {
height: 80px;
width: 80px;
background: #555;
border-radius: 10px;
}
我启用了以下Chrome开发者设置来调查滚动性能:
>“显示绘制矩形”(由红色矩形轮廓表示)
>“显示潜在的滚动瓶颈”
当我在非视网膜显示器上加载网页时,它会在每个滚动条上重新绘制整个容器div,Chrome甚至会指示:
但当我将窗口移动到我的视网膜显示器并刷新页面时,滚动性能会提高!它只重新绘制滚动条本身(有时也重新绘制以前不在滚动视口中的内容):
高DPI行为似乎更可取,滚动速度更快.无论DPI如何,有没有办法在Chrome中实现这种性能?