如何測量使用動態異步調用加載頁面的Web應用程序的渲染時間？

我正在嘗試測量當前載入速度非常慢的Web應用程序的性能。（需要爲將來的改進設置一個基準。）我遇到的問題是我通常使用的工具會測量HTML文檔的加載時間和/或onLoad事件觸發所需的時間。在這個特殊的情況下，這兩個看起來都不合適 - 因爲HTML頁面基本上是空的，並且在1秒內以<下載。如何測量使用動態異步調用加載頁面的Web應用程序的渲染時間？

當前的攔截器是一個在頁面加載時運行的動態json POST（不要問） - 但是由於這會觸發異步，所以在完成時沒有用於測量的鉤子，除了查看Firebug（這不是很容易擴展或容易自動化）。

任何幫助最感激地收到。

[編輯]我真的在尋找一些可以作爲服務運行的東西 - 如果Pingdom能夠做到我想要的，那將是完美的。我面臨的挑戰是，我正在尋找的時機是基於一個依賴的請求，而不是原始的HTML頁面請求，而且我找不到爲我做這件事的工具。

來源

2011-05-16 Hugo Rodger-Brown

您可以用JavaScript獲取Ajax請求的加載時間很乾脆：

var start = +new Date(); // Yeah, that's not a typo 
// ajax request 
complete: function() { 
    // do response stuff 
    var rtt = +new Date() - start; // rtt in milliseconds 
    // or do response stuff here 
} 
// ajax request

這就是你要找的東西？

你想用它做什麼？將它發回服務器？ =）

如果您使用的是圖書館，它可能是內置的。如果您使用的是圖書館並且它不是內置的，那麼您可以使用啓動事件（它們通常有一個）以及結束事件（通常是「完成」）。

來源

2011-05-16 14:39:50 Rudie

不幸的是，我無法訪問源代碼 - 我正在測試其他人的應用程序。 – 2011-05-18 07:54:06

儘管你仍然可以注入Javascript，你甚至可以'擴展'瀏覽器的原生XHR客戶端。更簡單的替換一個JS文件，但定時器在正確的位置。 – Rudie 2011-05-18 08:21:09

以這種方式使用內嵌JavaScript測量性能是有限且不可靠的，原因如下： - 計時代碼位於頁面中，因此它會影響頁面加載的方式和時間。 - JavaScript時間不準確。 - 除非您很樂意將時間碼留在頁面中，否則您將無法衡量用戶體驗的加載速度。 - 最糟糕的是，在開始加載頁面之前，Date對象不能用於測量網絡延遲。來源： http://www.html5rocks.com/en/tutorials/webperformance/basics/ – Raul 2013-09-11 14:45:45

有沒有什麼東西可以檢查每個ajax返回或使用ajax返回的呈現代碼？如果是這樣，只需設置一個簡單的民意調查，看看他們是否全部呈現。元素標識或獨特的xpath表達式在測試時可以成爲你的朋友。

出於好奇，你使用硒？ YUI分析器？只是螢火蟲？

來源

2011-05-16 15:39:44 ccoakley

不幸的是，我無法訪問源代碼 - 這是一個外部開發的應用程序。我對Selenium（WebDriver模型）沒有太大的好運，因爲我需要理解的東西是在運行時渲染的 - 即初始加載時body標籤完全是空的，整個頁面通過json傳遞。一些AJAX調用呈現UI元素，而其他AJAX調用則不可見。我對該應用程序的理解來自Firebug/Fiddler。 – 2011-05-18 07:58:34

不幸的是，我對小提琴手沒有任何經驗。我注意到有一個JSON Inspector的插件。如果這個插件沒有幫助，我沒用（完全超出我的經驗，對不起）。 – ccoakley 2011-05-18 17:01:11

如何測量使用動態異步調用加載頁面的Web應用程序的渲染時間？

回答

相關問題