使用 Google 开发工具检查图像渲染样式的渲染成本
Check render cost of image-rendering style with Google dev tools
我想了解为复杂网页中的图像设置样式 image-rendering: -webkit-optimize-contrast 的性能成本。
我知道 Google 开发人员工具的性能选项卡很强大...但是文档非常笼统，很难提炼出一种方法来回答这个具体问题。
虽然这主要是关于 Dev 的问题。工具，我会接受任何解释如何在复杂页面 的上下文中查看设置此样式 的性能影响的答案。比较仅包含图像和不同样式的两个页面的加载时间就足够简单了，但这可能无法准确回答样式如何影响生产网页的问题。
更新：
按照 jburtondev 的建议在一个简单的页面中单独加载图像并对其进行分析，我发现该样式在图像渲染中花费了大约 200% 的时间。
使用开发工具的“6 倍减速”CPU 节流，我加载了一个只有图像的页面五次有样式，五次没有。我发现使用样式的 "rendering" 时间约为 10 毫秒，没有样式时约为 5 毫秒。我会认为这可以忽略不计，即使在移动设备上也是如此，并假设生产页面的成本相似。
好问题。这是一个非常极端的情况，我认为 Chrome 开发人员工具中还没有。我会通过使用 image-rendering: -webkit-optimize-contrast 并分析没有资产和一张图像的简单页面的呈现部分来解决这个问题。然后在没有 image-rendering: -webkit-optimize-contrast 的情况下分析同一张图像。这不是最科学的方法，但我相信它会产生一些有用的结果。
以防您不熟悉性能分析，我附上了显示渲染部分的屏幕截图，因此您知道在完成审核后要分析哪个 属性。
让我知道进展如何！有兴趣知道。
我想了解为复杂网页中的图像设置样式 image-rendering: -webkit-optimize-contrast 的性能成本。
我知道 Google 开发人员工具的性能选项卡很强大...但是文档非常笼统，很难提炼出一种方法来回答这个具体问题。
虽然这主要是关于 Dev 的问题。工具，我会接受任何解释如何在复杂页面 的上下文中查看设置此样式 的性能影响的答案。比较仅包含图像和不同样式的两个页面的加载时间就足够简单了，但这可能无法准确回答样式如何影响生产网页的问题。
更新：
按照 jburtondev 的建议在一个简单的页面中单独加载图像并对其进行分析，我发现该样式在图像渲染中花费了大约 200% 的时间。
使用开发工具的“6 倍减速”CPU 节流，我加载了一个只有图像的页面五次有样式，五次没有。我发现使用样式的 "rendering" 时间约为 10 毫秒，没有样式时约为 5 毫秒。我会认为这可以忽略不计，即使在移动设备上也是如此，并假设生产页面的成本相似。
好问题。这是一个非常极端的情况，我认为 Chrome 开发人员工具中还没有。我会通过使用 image-rendering: -webkit-optimize-contrast 并分析没有资产和一张图像的简单页面的呈现部分来解决这个问题。然后在没有 image-rendering: -webkit-optimize-contrast 的情况下分析同一张图像。这不是最科学的方法，但我相信它会产生一些有用的结果。
以防您不熟悉性能分析，我附上了显示渲染部分的屏幕截图，因此您知道在完成审核后要分析哪个 属性。
让我知道进展如何！有兴趣知道。