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

我想了解为复杂网页中的图像设置样式

图像呈现：-webkit优化对比度
的性能成本

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

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

更新：

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

使用dev工具的“6x减速”CPU，我加载了一个页面，其中五次只加载了带有样式的图像，五次没有加载。我发现有样式的“渲染”时间约为10毫秒，没有样式的“渲染”时间约为5毫秒。我认为这是微不足道的，即使是在手机上，也假设在生产页面上的成本是一样的。这是一个相当边缘的例子，我不相信它在Chrome开发者工具中还可用。我将通过使用
图像渲染：-webkit优化对比度
并分析没有资源和一幅图像的简单页面的渲染部分来实现这一点。然后在不进行图像渲染的情况下分析相同的图像：-webkit优化对比度
。这不是最科学的方法，但我相信它会产生一些有益的结果

为了防止您不熟悉性能评测，我附加了一个屏幕截图来显示渲染部分，这样您就知道在完成审计后要分析哪个属性

让我知道进展如何！我很想知道