html – Chrome在低DPI和高DPI显示屏上以不同方式重新绘制div

前端之家收集整理的这篇文章主要介绍了html – Chrome在低DPI和高DPI显示屏上以不同方式重新绘制div前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在努力优化我的网络应用程序中的滚动性能,并在最新的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); }

不确定这是否有效.但在某些情况下,它可以通过将元素分成它自己的“层”来帮助修复浏览器重绘.

希望这可以帮助!

原文链接:https://www.f2er.com/html/227783.html

猜你在找的HTML相关文章