Chrome在低DPI和高DPI显示器上以滚动方式重绘div
埃米特
我正在努力优化Web应用程序中的滚动性能，并在最新的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); }
不知道这是否行得通。但是在某些情况下，它可以通过将元素分隔为自己的“图层”来帮助补救浏览器重绘。
希望这可以帮助！
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何分别为高dpi显示器和低dpi显示器设置缩放比例？
- 2
如何分别为高dpi显示器和低dpi显示器设置缩放比例？
- 3
如何在高DPI显示器上运行升级的Java应用程序？
- 4
高 dpi 显示器上的绝对定位元素未对齐
- 5
OpenTK：检测显示器的DPI
- 6
将高 DPI 和低像素的图像转换为低 DPI 和高像素
- 7
如何找到Linux上放置特定窗口的显示器的dpi？
- 8
如何在Labview中找到显示器的dpi
- 9
如何在UHD显示器上的Cinnamon中增加VLC媒体播放器的DPI？
- 10
如何在Matlab编译器生成的exe的高DPI设置上禁用显示缩放
- 11
如何在Matlab编译器生成的exe的高DPI设置上禁用显示缩放
- 12
WebStorm图标太小，无法在Windows上显示高dpi
- 13
WebStorm图标太小，无法在Windows上显示高dpi
- 14
在16.04上重绘时，屏幕闪烁/变黑1-2秒-单显示器，R9 380
- 15
我可以对Chrome中“ overflow：scroll” div上的“滚动重绘”警告进行任何处理吗
- 16
每台显示器的 Windows 8.1 DPI：它在哪些情况下进行插值？
- 17
在隐藏 div (wordpress) 的显示上重绘 SVG 地图
- 18
哪种显示管理器/窗口管理器可以支持具有不同dpi的多台显示器？
- 19
哪种显示管理器/窗口管理器可以支持具有不同dpi的多台显示器？
- 20
高DPI屏幕上的Java Swing
- 21
高dpi屏幕上的Intellij想法
- 22
在ubuntu 14.10上启用高dpi
- 23
WPF中的UseLayoutRounding和高DPI
- 24
默认情况下如何激活“在高dpi设置上禁用显示比例缩放”
- 25
Windows 窗体应用程序在高 DPI 显示 VB 上显得模糊
- 26
将Firefox和Thunderbird调整为高DPI触摸屏显示（视网膜）
- 27
将Firefox和Thunderbird调整为高DPI触摸屏显示（视网膜）
- 28
我的WPF应用程序开箱即可识别每个显示器的dpi。我没想到吗？
- 29
LICEcap不遵守Windows 8和10上的高DPI设置
我来说两句