導航和資源計時

用於測量請求頁面的載入效能的performanceTiming API已棄用，但在所有瀏覽器中都受支援。它已被performanceNavigationTiming API 替代。

效能計時 API 以毫秒 (ms) 為單位提供只讀時間，描述在頁面載入過程中的每個點何時到達。如下面的影像所示，導航過程從navigationStart、unloadEventStart、unloadEventEnd、redirectStart、redirectEnd、fetchStart、domainLookupStart、domainLookupEnd、connectStart、connectEnd、secureConnectionStart、requestStart、responseStart、responseEnd、domLoading、domInteractive、domContentLoadedEventStart、domContentLoadedEventEnd、domComplete、loadEventStart 和loadEventEnd。

使用上述指標和一些數學運算，我們可以計算許多重要的指標，例如首位元組時間、頁面載入時間、DNS 查詢以及連線是否安全。

為了幫助測量完成所有步驟所需的時間，Performance Timing API 提供了導航計時的只讀測量。要檢視和捕獲我們應用程式的計時，我們輸入

let time = window.performance.timing;

然後我們可以使用結果來衡量我們的應用程式的效能。

順序為

我們可以使用這些值來衡量感興趣的特定計時

const dns = time.domainLookupEnd - time.domainLookupStart;
const tcp = time.connectEnd - time.connectStart;
const tls = time.requestStart - time.secureConnectionStart;

首位元組時間是在navigationStart（導航開始）和responseStart（接收到響應資料的第一個位元組時）之間的時間，在performanceTiming API 中可用

const ttfb = time.responseStart - time.navigationStart;

頁面載入時間是在navigationStart和為當前文件傳送載入事件的開始之間的時間。它們僅在 performanceTiming API 中可用。

let pageloadtime = time.loadEventStart - time.navigationStart;

DNS 查詢時間是在domainLookupStart和domainLookupEnd之間的時間。這些都可以在performanceTiming和performanceNavigationTiming API 中使用。

const dns = time.domainLookupEnd - time.domainLookupStart;

完成TCP握手所需的時間是在連線開始和連線結束之間的時間

const tcp = time.connectEnd - time.connectStart;

secureConnectionStart如果不可用則為undefined，如果未使用HTTPS則為0，或者如果可用且已使用則為時間戳。換句話說，如果使用了安全連線，則secureConnectionStart將為真值，並且secureConnectionStart和requestStart之間的時間將大於 0。

const tls = time.requestStart - time.secureConnectionStart;

上述一般效能計時已棄用，但完全受支援。我們現在有了效能條目 API，它可以用於標記和測量導航和資源載入過程中的時間。您還可以建立標記

performance.getEntriesByType("navigation").forEach((navigation) => {
  console.dir(navigation);
});

performance.getEntriesByType("resource").forEach((resource) => {
  console.dir(resource);
});

performance.getEntriesByType("mark").forEach((mark) => {
  console.dir(mark);
});

performance.getEntriesByType("measure").forEach((measure) => {
  console.dir(measure);
});

performance.getEntriesByType("paint").forEach((paint) => {
  console.dir(paint);
});

performance.getEntriesByType("frame").forEach((frame) => {
  console.dir(frame);
});

在支援的瀏覽器中，您可以使用performance.getEntriesByType('paint')查詢first-paint和first-contentful-paint的測量結果。我們使用performance.getEntriesByType('navigation')和performance.getEntriesByType('resource')分別查詢導航和資源的計時資訊。

當用戶請求一個網站或應用程式時，為了填充瀏覽器，使用者代理會經歷一系列步驟，包括DNS查詢、TCP握手和TLS協商，然後使用者代理才會發出實際請求，伺服器返回請求的資源。瀏覽器隨後解析接收到的內容，構建DOM、CSSOM、可訪問性和渲染樹，最終渲染頁面。一旦使用者代理停止解析文件，使用者代理就會將文件就緒狀態設定為interactive。如果存在需要解析的延遲指令碼，它將執行解析，然後觸發DOMContentLoaded事件，之後就緒狀態將設定為complete。文件現在可以處理載入後的任務，在此之後，文件被標記為完全載入。

const navigationTimings = performance.getEntriesByType("navigation");

performance.getEntriesByType('navigation')返回一個包含navigation型別的PerformanceEntry物件的陣列。

從這些計時資訊中可以獲得很多有用的資訊。在上圖中，我們透過name屬性可以看到正在計時的檔案是當前文件。在接下來的解釋中，我們使用以下變數

const timing = performance.getEntriesByType("navigation")[0];

我們可以透過查詢來檢查使用的協議

const protocol = timing.nextHopProtocol;

它返回用於獲取資源的網路協議：在本例中，h2表示http/2。

要獲取壓縮節省的百分比，我們將transferSize除以decodedBodySize，然後從100%中減去結果。我們看到節省了超過74%。

const compressionSavings = 1 - timing.transferSize / timing.decodedBodySize;

我們本可以使用

const compressionSavings = 1 - timing.encodedBodySize / timing.decodedBodySize;

但使用transferSize包含了開銷位元組。

為了比較，我們可以檢視網路選項卡，發現我們傳輸了22.04KB，未壓縮的檔案大小為87.24KB。

如果我們用這些數字進行計算，會得到相同的結果：1 - (22.04 / 87.24) = 0.747。導航計時為我們提供了一種以程式設計方式檢查傳輸大小和頻寬節省的方法。

請注意，這是單個文件的大小：僅針對此資源，不包括所有資源的總和。但是，持續時間、載入事件和與DOM相關的計時與整個導航有關，而不是單個資源。客戶端Web應用程式可能看起來比此應用程式快，傳輸大小低於10000，解碼正文大小低於30000，但這並不意味著JavaScript、CSS或媒體資源沒有增加冗餘。檢查壓縮率很重要，但也要檢查持續時間以及DOMContentLoaded事件結束到DOM完成之間的時間，因為在主執行緒上長時間執行JavaScript會導致使用者介面無響應。

API沒有提供您可能希望的每個測量值。例如，請求花費了多長時間？我們可以使用我們擁有的測量值來獲得答案。

要測量響應時間，請從響應開始時間減去請求開始時間。請求開始是使用者代理開始從伺服器或相關應用程式快取或本地資源請求資源之前的時刻。響應開始是使用者代理的HTTP解析器從相關應用程式快取或本地資源或伺服器接收響應的第一個位元組之後的時刻，這發生在接收和處理請求之後。

const request = timing.responseStart - timing.requestStart;

透過從當前文件的載入事件完成時的時間減去當前文件的載入事件觸發之前的時刻的時間戳，可以測量載入事件的持續時間。

const load = timing.loadEventEnd - timing.loadEventStart;

DOMContentLoaded事件持續時間透過從使用者代理觸發DOMContentLoaded事件後的時刻的時間值減去觸發DOMContentLoaded事件之前的時刻的時間值來測量。將此時間保持在50毫秒或更短有助於確保使用者介面響應迅速。

const DOMContentLoaded =
  timing.domContentLoadedEventEnd - timing.domContentLoadedEventStart;

我們獲得了持續時間。持續時間是PerformanceNavigationTiming.loadEventEnd和PerformanceEntry.startTime屬性之間的差值。

PerformanceNavigationTiming介面還提供有關正在測量的導航型別的資訊，返回navigate、reload、back_forward或prerender。

導航計時用於測量主頁面（通常是請求所有其他資源的HTML檔案）的效能，而資源計時則用於測量單個資源（主頁面呼叫的資源以及這些資源請求的任何資源）的計時。許多測量值是相似的：每個域名都會執行一次DNS查詢、TCP握手和安全連線啟動。

每個資源的主要關注點。

• PerformanceNavigationTiming
• PerformanceResourceTiming,
• PerformanceMark
• PerformanceMeasure
• PerformancePaintTiming