如何剖析/減少html頁面渲染時間？

Question

我正在使用chrome來改善頁面加載時間。

我正在嘗試確定內容下載完成與onload事件觸發之間延遲的原因。 您可以從圖像中看到內容在160毫秒左右完成下載，但是load事件直到600毫秒左右才觸發。

我的問題是，如何確定並分解450ms發生的情況？ 是否可以改善此處的加載時間，或者這僅僅是渲染/繪畫過程中不可避免的一部分？

更新＃1

解決了這個問題，罪魁禍首主要是jQuery。 頁面現在在300ms部分加載。 我決定將jQuery（以及其他所有站點腳本）的加載推遲到window.onload事件觸發之后。這消除了差距，現在所有頁面腳本都在onload發生后加載。

這是顯示腳本加載的時間線視圖：

Answer 1

使用“時間軸”標簽的Chrome開發工具，按記錄，刷新頁面並停止記錄，您將獲得所需的一切。

另外，請確保選中您感興趣的復選框。 此處的文檔

我已經測試了其他一些頁面，它們與您的頁面之間存在類似的差距，我認為這就是繪畫和渲染時間。

如果您真的很在意那450毫秒，那么我建議您閱讀這篇關於chrome渲染DOM方式的文章 ，這是非常不錯的。

我個人的觀點是，這聽起來像過早的優化，如果您不打算渲染成千上萬的元素，則應該順其自然，或者嘗試優化其他部分，最好是JavaScript。

我仍然建議閱讀這篇文章，這是相當不錯的。