如何在Chrome開發工具中使用Network的瀑布來診斷Web渲染性能問題？

Question

我們的網頁之一有一個渲染性能問題，當頁面打開，微調器凍結或加載非常滯後，6-12秒後頁面完成加載。所以我在Chrome開發工具中使用Network的瀑布來診斷問題。但是我有一些情景，我不明白髮生了什麼。

在以下屏幕截圖中，相應頁面的所有資源都會在很短的時間內加載，但微調框凍結了6秒或9秒，我不確定資源加載後會發生什麼情況，在頁面完成加載之前，也許微調控制器是在一個錯誤的線程或被阻止了？我應該用什麼手段來找出原因？

方案1

方案2

UPDATE

網絡截圖

時間軸截圖

UPDATE

檢查事件日誌後，我認爲問題發生在Angular digest週期中，那麼端點響應時間仍應該是780ms。

Answer 1

感謝您的詳細信息。如果你可以鏈接到頁面，它會更有幫助，但我知道這往往是不可能的。我只是爲同一船上的人提供一些一般數據。不過，我不知道我是否能夠完全回答這個具體問題。

在方案1個和方案2個截圖，你可以看到你的資源加載在1或2秒。這是你的暗示，這個問題與網絡無關。

所以，雖然這是一個頁面加載問題，它與網絡無關。

在時間線屏幕截圖你可以看到你的CPU使用率從1900毫秒到超過16000毫秒完全超出。所以你的頁面迫使瀏覽器做了大量的工作。這可能是在JavaScript中。

要診斷此，我想探討的火焰圖表（下主要），你可以在時間軸截圖看到。條越長，功能完成的時間越長。或者，如果您看到一個被稱爲數千次的小函數，那可能是原因。如果你可以優化這些調用，那麼你可以更快地加載你的頁面。您可以點擊Self Time標題更新截圖根據哪些功能調用佔用最多時間。

再一次，我不知道這個答案對於這個特定問題有多大幫助，但我想我會嘗試以不同的，更一般的方式來重新解釋這個問題。