如何在瀏覽器中監控渲染時間？

Question

我在一個內部企業系統上工作，該系統具有使用Tomcat的Web前端。

1. 如何在瀏覽器（IE6）中監控特定頁面的渲染時間？
2. 我希望能夠將結果記錄在日志文件中（單獨的日志文件或Tomcat訪問日志）。

編輯：理想情況下，我需要監控訪問頁面的客戶端上的呈現。

Answer 1

導航時序API在現代瀏覽器（IE9 +）中可用，但Safari除外：

function onLoad() { 
  var now = new Date().getTime();
  var page_load_time = now - performance.timing.navigationStart;
  console.log("User-perceived page loading time: " + page_load_time);
}

Answer 2

如果瀏覽器啟用了JavaScript，您可以做的一件事就是編寫內聯腳本並在HTML中首先發送它。 該腳本將做兩件事：

1. 在JS變量中記錄當前系統時間（如果幸運的話，時間可能大致對應於頁面呈現開始時間）。
2. 將JS函數附加到頁面onLoad事件。 然后，此函數將再次查詢當前系統時間，從步驟1中減去開始時間，並將其與頁面位置一起發送到服務器（或者您可以在服務器上動態插入內聯腳本的某個唯一ID）。

<script language="JavaScript">
var renderStart = new Date().getTime();
window.onload=function() { 
   var elapsed = new Date().getTime()-renderStart;
   // send the info to the server 
   alert('Rendered in ' + elapsed + 'ms'); 
} 

</script>

... usual HTML starts here ...

您需要確保頁面稍后不會覆蓋代碼中的onload，而是添加到事件處理程序列表中。

Answer 3

就非侵入性技術而言， Hammerhead測量完整的加載時間（包括JavaScript執行），盡管僅在Firefox中。

當全局添加JavaScript代碼段來衡量每個頁面加載操作的開始和結束時，我看到了可用的結果。

Answer 4

看看Selenium - 他們提供了一個遙控器，可以自動啟動不同的瀏覽器（例如IE6），加載頁面，測試頁面上的特定內容。 最后生成報告，同時顯示渲染時間。

Answer 5

由於其他人發布使用其他瀏覽器的答案，我想我也會。 Chrome有一個非常詳細的分析系統，它可以分解頁面的渲染時間，並顯示每個步驟所花費的時間。

至於IE，你可能想考慮編寫一個插件。 市場上似乎沒有這樣的工具。 也許你可以賣掉它。

Answer 6

在Firefox上，您可以使用Firebug來監控加載時間。 使用YSlow插件，您甚至可以獲得如何提高性能的建議。