1

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

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

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

更新：

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

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

4

1 回答 1

1

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

以防你不熟悉性能分析，我附上了一个截图来显示渲染部分，所以你知道在完成审计后要分析哪个属性。

让我知道事情的后续！有兴趣知道。

于 2017-09-01T11:14:07.380 回答