使用Google开发工具检查图像渲染样式的渲染成本

Question

我希望看到为复杂网页中的图片设置样式image-rendering: -webkit-optimize-contrast的性能成本。

我了解Google开发者工具＆＃39;性能选项卡功能强大......但文档非常通用，并且很难提炼出一种方法来回答这个特定的问题。

虽然这主要是关于Dev的问题。工具，我将接受任何解释如何在复杂页面的上下文中设置此样式的性能影响的答案。比较仅包含图像和不同样式的两个页面的加载时间会很简单，但这可能无法准确回答样式如何影响生产网页的问题。

更新

根据jburtondev的建议，将图像单独加载到一个简单的页面中并对其进行分析，我发现该样式花费了大约200％的图像渲染时间。

使用开发工具＆＃39; ＆＃34; 6倍减速＆＃34; CPU节拍，我加载了一个页面，只有图像五次的样式和五次没有。我找到了＃34;渲染＆＃34;时间约为10毫秒，风格约为5毫秒。我认为即使在移动设备上也可以忽略不计，并且假设生产页面中的成本相似。

Answer 1

好问题。这是一个非常优秀的案例，我认为Chrome开发者工具尚未提供。我会通过使用image-rendering: -webkit-optimize-contrast并分析没有资源和一个图像的简单页面的渲染部分来解决这个问题。然后在没有image-rendering: -webkit-optimize-contrast的情况下分析同一图像。不是最科学的方式，但我相信它会产生一些有用的结果。

如果您不熟悉性能分析，我附上了一个屏幕截图来显示渲染部分，因此您可以在完成审核时知道要分析哪个属性。

让我知道它是怎么回事！有兴趣知道。