如何使用Performance API使您的網站更快

>本教程演示瞭如何利用性能API捕獲與Web應用程序交互的真實用戶的詳細性能指標。雖然瀏覽器DevTools提供性能見解，但它們並沒有準確反映用戶在各種設備，位置和網絡連接中體驗的各種現實世界條件。 性能API的關鍵好處

與孤立的DevTool測試相比

• 綜合指標：>它在整個頁面生命週期中捕獲指標，包括導航，資源加載，渲染和自定義應用程序邏輯執行時間。
• >高分辨率計時：使用高分辨率計時器，它記錄了時間到毫秒的時間到毫秒的分數，捕獲了諸如重定向和DNS查找時間之類的細節，而標準計時器不可能。
>可自定義的測量值：
• 允許您的應用程序功能的精確時機，在客戶端JavaScript，Web Workers，Deno和Node.js. 上無縫工作
>跨平台分析：
• 啟用對實際用戶設備和網絡的性能測量，簡化瓶頸標識和性能優化。 >
• 了解性能API：> 性能API使用緩衝區將性能指標作為對象存儲在網頁的生命週期的關鍵階段：
>

>頁面導航：記錄重定向，連接，握手和DOM事件。 >

>

>資源加載：

跟踪圖像，CSS，腳本和AJAX呼叫等資產的加載時間。

1. 油漆指標：捕獲瀏覽器渲染信息（例如，第一個內容的塗料）。
2. >自定義性能：>啟用任意應用程序處理時間的測量以查明慢速功能。
3. 可以檢查API支持：
4. >注意：儘管實現了大部分API。 （需要）。

超越

：

if ('performance' in window) {
  // Use Performance APIs
}

> <>>可以測量經過的時間，其毫秒的精度和對系統時間（容易受到操作系統調整）的依賴限制了其準確性。性能API的高分辨率計時器和其他指標（例如重定向和DNS時間）提供了較高的細節。 perf_hooks錄製和報告指標：--allow-hrtime>客戶端性能數據需要一個目的地。 您可以使用AJAX，FETCH，XMLHTTPREQUEST或BEACON API將此數據發送到服務器進行分析。許多分析平台還提供用於錄製時間安排的自定義事件API（例如，Google Analytics（分析）用戶計時API）。

頁面導航時機：

在快速連接上進行測試並不能反映房車的體驗。 導航正時API提供了一個對象，其中包含有關重定向，加載時間，文件大小，DOM事件等的詳細信息，如用戶所觀察到的。 >使用：

訪問此對象

PerformanceNavigationTiming或

既返回一個帶有一個只讀取屬性的對象的數組（例如，

if ('performance' in window) {
  // Use Performance APIs
}

，

，

，

const pagePerf = performance.getEntriesByType('navigation');

，各種定時指標）。

startTime頁面資源定時： duration domComplete資源正時API為每個已加載資產（圖像，CSS，腳本等）提供

的對象。 使用：

>這返回一個對像數組，每個對像都具有類似於導航時機的定時屬性，但沒有導航和DOM事件數據。 可以使用

。

>示例：分析CSS文件加載時間和尺寸：> PerformanceResourceTiming

const pagePerf = performance.getEntriesByName(window.location);

>瀏覽器塗料計時：

getEntriesByName()

油漆正時API為

>和對象，對於評估感知性能至關重要。 使用：

const resPerf = performance.getEntriesByType('resource');

訪問它們

用戶計時（自定義指標）：

>

性能API允許使用PerformancePaintTiming，first-paint和first-contentful-paint自定義應用程序功能的定時時間。

提供高分辨率的時間戳。

const css = performance.getEntriesByType('resource')
  .filter(r => r.initiatorType === 'link' && r.name.includes('.css'))
  .map(r => ({
    name: r.name,
    load: r.duration + 'ms',
    size: r.decodedBodySize + 'bytes'
  }));

在性能緩衝區中創建命名標記，

計算標記之間的持續時間。 允許對性能條目的異步觀察。

自封式API： performance.now() .mark()>自行封閉式API（仍在開發中）通過自動採樣執行來簡化性能分析，識別沒有手動標記的潛在瓶頸。 .measure()> performance.now().mark()結論： .measure() PerformanceObserver>

以上是如何使用Performance API使您的網站更快的詳細內容。更多資訊請關注PHP中文網其他相關文章！