瀏覽計時

「瀏覽計時」可簡化測量網站真實速度和效能的程序,並找出需要調整的問題區域。 例如,瀏覽計時可幫助您準確地監視客戶頁面瀏覽以及追蹤使用者活動的時間長度,協助您找出延遲問題。接著您可以更容易識別出效能的瓶頸以及找出有效的解決方案,以便降低延遲並改善您網站的速度和效率。舊式效能測量系統無法提供完整的端對端延遲分析,但瀏覽計時可以。

Windows Internet Explorer 9 與 Internet Explorer 10 都支援瀏覽計時 API,如 W3C Web 效能工作小組規格中瀏覽計時中的定義。

測量瀏覽計時

您可以使用許多不同方式測量瀏覽計時。在此提供三種方式。

測量顯示開始時間

下列指令碼會針對最近的頁面瀏覽計算端對端的用戶端延遲。


<html>
<head>
<script type="text/javascript">
// Add load event listener.
window.addEventListener("load", loadTime, false);

function loadTime() {
  // Get current time.
  var now = new Date().getTime();
  // Calculate page load time.
  var page_load_time = now - performance.timing.navigationStart;
  // Write the load time to the F12 console.
  if (window.console) console.log(page_load_time);
}
 </script>
</head><body>
<!- Main page body is here. -->
</body>
</html>


JavaScript 區段中的 head 設定了載入事件的事件處理常式。當瀏覽器啟動載入事件時,會呼叫 loadTime 函式。loadTime 函式首先使用 JavaScript getTime 方法去取得目前的時間。接著,performance.timing.navigationStart 方法會在使用者代理程式完成提示解除載入上一個文件後,立即傳回時間。這兩個時間戳記之間的時間差就是使用者的端對端網頁載入延遲時間。如果 F12 工具正在執行,這個時間差會顯示在主控台中。

測量各個瀏覽子系統的時間

典型的頁面瀏覽必須先經過許多階段,才能向使用者顯示網頁。瀏覽計時可讓您分別測量這些子系統,以便更有效地找出瓶頸。下列程式碼可測量建立連線所需的時間。


var t = performance.timing;
var n = performance.navigation;
if (t.connectEnd > 0 && t.connectStart > 0) {
  var connection_time = t.connectEnd - t.connectStart;
  if (n.type == n.TYPE_NAVIGATE) {
   if (window.console) console.log(connection_time);
  }
}

這段 JavaScript 程式碼使用 performancetiming API 來測量開始與結束連線時間,以及 navigation 物件來判斷是否為頁面瀏覽。程式碼會檢查 connectStartconnectEnd 兩個屬性是否都大於零,以區別是新的或是已快取的資源。接著從 connectEnd 減去 connectStart 來判斷連線時間。最後,檢查並確定瀏覽的類型是由使用者要求所產生的。如果 F12 工具正在執行,時間差會顯示在主控台中。這個時間差是從建立伺服器連線到載入資源所花費的時間量。

使用 JSON

您不僅可以使用瀏覽計時來測試您的網頁,還可以收集使用者經驗,並利用這些資料來分析使用趨勢。您可以使用 JavaScript 物件標記法 (JSON) 來將資料轉換成字串 (如下列範例所示),並傳送到伺服器進行分析:


JSON.stringify(window.performance.timing);

瀏覽計時 API

瀏覽計時提供了一組可讓您測量頁面瀏覽多個層面的物件與屬性。它使用下列物件:

物件說明

PerformanceNavigation

提供瀏覽狀態相關資訊。

PerformanceTiming

提供瀏覽計時相關資訊。

 

瀏覽計時使用下列屬性:

屬性說明

connectEnd

伺服器完成連線的時間。

connectStart

伺服器開始連線的時間。

domComplete

文件整備的時間。

domContentLoadedEventEnd

DOMContentLoaded 事件完成的時間。

domContentLoadedEventStart

DOMContentLoaded 開始的時間。

domInteractive

整備設成 interactive 的時間。

domLoading

整備設成 loading 的時間。

domainLookupEnd

網域名稱查詢完成的時間。

domainLookupStart

網域名稱查詢開始的時間。

fetchStart

開始擷取資源的時間。

loadEventEnd

載入事件完成的時間。

loadEventStart

載入事件開始的時間。

navigationStart

上一個文件解除載入完成的時間。

redirectCount

上一個不可重新導向項目之後的重新導向數目。

redirectEnd

上一個重新導向回應結束的時間。

redirectStart

擷取已起始之重新導向的時間。

requestStart

伺服器要求開始的時間。

responseEnd

回應或連線結束的時間。

responseStart

回應開始的時間。

timing

效能計時物件的參照。

navigation

效能瀏覽物件的參照。

performance

視窗的效能物件參照。

type

上一個不可重新導向之瀏覽事件的類型。

unloadEventEnd

上一個文件解除載入結束的時間。

unloadEventStart

解除載入事件啟動的開始時間。

 

API 參考

PerformanceNavigation
PerformanceTiming

Internet Explorer Test Drive 示範

瀏覽計時

IEBlog 文章

W3C Web 效能:不間斷的效能投入
Web 效能:當毫秒解析方式不足以應付的時候
Web 效能 API 迅速成為 W3C 候選建議
年度回顧:W3C Web 效能工作小組
Web 標準快速進展:W3C 瀏覽計時達到候選建議
符合標準規範和可互通方式的網頁效能
測量網頁效能

規格

瀏覽計時

 

 

顯示:
© 2014 Microsoft