如何測試渲染時間（不是DomContentLoaded或onLoad）？

我需要一種或多種工具來測試瀏覽器的實際感知渲染時間，以便將整個頁面呈現給用戶。有什麼建議麼？如何測試渲染時間（不是DomContentLoaded或onLoad）？

我問的原因是因爲firbug和Yslow只報告DomContentLoaded和OnLoad時間。

例如，我的應用程序報告內容爲547ms（onLoad：621ms）。但實際內容大約需要3秒鐘。我知道這一點，因爲我實際上從打開瀏覽器的url字段的那一刻開始，慢慢地計算出1，2，3，直到內容出現在我眼前。所以我知道547ms和621ms不代表頁面加載所需的實際時間。

不知道這是否有幫助。但是我的應用程序

呈現在服務器端JSON數據，該數據作爲JavaScript變量保存頁面的HTML的其餘部分一起服務器返回的整個HTML到瀏覽器
頁面加載jQuery的1.5之前和jQuery模板
jQuery代碼從在步驟1中定義
使用jQuery模板來呈現頁面的可變抓住JSON數據。

從技術上講，這裏涉及的所有Ajax和頁面上的圖像都沒有被緩存。我沒有看到螢火蟲下載任何一個。

[編輯]

什麼，我試圖找出是後螢火蟲報道的onLoad時間，這在我的情況是621ms，頁面完成，並在我的眼前加載時間（至少是3秒），中間的2.4秒發生了什麼？那裏發生了什麼？瀏覽器正在做些什麼？有東西阻塞？網絡？它是什麼？

來源

2011-03-04 Liming

你爲什麼要計數，你可以使用螢火蟲，pagespeed或yslow。螢火蟲淨面板給你所有的細節 – kobe 2011-03-04 06:17:28

Siri。就像我說的，螢火蟲和Yslow沒有報告準確的時間。從我輸入的那一刻開始，當頁面加載到我眼前時，空白屏幕有3秒鐘。然而，螢火蟲和yslow報告在毫秒。就好像頁面快速點亮一樣。然而，對於用戶的眼睛來說，這並不是那麼快，這就是我想要捕捉的。不是螢火蟲也不是yslow。但對於用戶來說，這種「感知」時間。 – Liming 2011-03-04 06:22:07

@如果這不是您的網站，並且如果您正在爲一家公司工作，請嘗試使用一些第三方公司，它爲您提供基調等。它們在全球範圍內執行各種負載，併爲您提供平均加載時間的頁面，你可以看到你的頁面變慢或變快的完整分析。 – kobe 2011-03-04 06:25:06

谷歌瀏覽器具有出色的審計建成。您的結果將被扭曲，因爲它是最快的瀏覽器之一，現在，但它會給你需要多長的時間鉻呈現精確的測量。 =）

來源

2011-03-04 06:24:13 Shad

好的。我從來沒有嘗試鉻，只是試了一下，開發人員的工具比螢火蟲真的好多了。我喜歡！唯一的問題是它太快了！ 547ms現在下降到100-200ms。我甚至不知道如何監控它。但我確實喜歡它顯示三個標記的事實。渲染時間。 OnLoad Time和DomContentOnLoad時間。更有用。謝謝 – Liming 2011-03-04 07:37:19

很高興你喜歡它！我會說，雖然我仍然在FireFox的螢火蟲上進行日常開發。（Chrome的螢火蟲正在接近，但我仍然喜歡FF的更好=） – Shad 2011-03-04 07:40:10

同意。唯一能阻止我一直使用Chrome的方式就是編輯CSS的方式。我真的很喜歡FF中的按鈕，你可以按回車來完成CSS規則並跳轉到值部分，而在Chrome中你必須使用右箭頭鍵。這不是一個大問題，但它無論如何都會讓我很煩惱。 – 2011-03-04 10:02:35

如何測試渲染時間（不是DomContentLoaded或onLoad）？

回答

相關問題