使用Google開發工具檢查圖像呈現樣式的渲染成本

Question

我想查看爲複雜網頁中的圖像設置樣式image-rendering: -webkit-optimize-contrast的性能成本。

我知道Google開發者工具的效果標籤功能強大......但文檔非常普遍，很難提煉出一種方法來回答這個特定的問題。

雖然這主要是一個關於Dev的問題。工具，我會接受任何答案，解釋如何查看在複雜頁面的上下文中設置此樣式的性能影響。比較僅包含圖像和不同樣式的兩個頁面的加載時間會很簡單，但這可能無法準確回答樣式如何影響生產網頁的問題。

更新：

繼jburtondev的建議單獨加載圖像在一個簡單的頁面和個人資料，我發現風格成本〜200％圖像呈現的時刻。

使用開發工具的「6倍速度減慢」的CPU throtling，我加載了一個頁面，只有圖像五次的風格和五次沒有。我發現「渲染」時間爲〜10ms，風格爲~5ms。即使在移動設備上，我也會認爲這一點可以忽略不計，並假定生產頁面的成本相似。

Answer 1

偉大的問題。這是一個相當不利的情況，我不相信在Chrome開發者工具中可用。我將通過使用image-rendering: -webkit-optimize-contrast並分析簡單頁面的渲染部分來解決此問題，而不使用資產和一個圖像。然後在沒有image-rendering: -webkit-optimize-contrast的情況下分析相同的圖像。不是最科學的方式，但我相信它會產生有益的結果。

爲了防止您對性能分析不熟悉，我附上了截圖以顯示呈現部分，以便您瞭解在完成審計後分析哪個屬性。

讓我知道它是怎麼回事！有興趣知道。