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

Question

我想查看为复杂网页中的图像设置样式image-rendering: -webkit-optimize-contrast 的性能成本。

我知道 Google 开发者工具的性能选项卡很强大...但是文档非常笼统，很难提炼出一种方法来回答这个特定问题。

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

更新：

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

使用开发工具的“6 倍减速”CPU 节流，我加载了一个页面，其中只有图片五次使用样式，五次没有样式。我发现“渲染”时间约为 10 毫秒，没有样式则约为 5 毫秒。我认为这可以忽略不计，即使在移动设备上也是如此，并假设在生产页面中的成本会相似。

Answer 1

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

以防万一您不熟悉性能分析，我附上了显示渲染部分的屏幕截图，以便您知道在完成审计后要分析哪个属性。

告诉我进展如何！有兴趣知道。