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

Question

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

我知道 Google Developer Tools 的 Performance 选项卡很强大...但文档非常笼统，很难提炼出一种方法来回答这个特定问题。

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

更新:

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

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

Answer 1

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

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

让我知道进展如何!有兴趣知道。