資源定時API簡介

資源正時API：深入研究Web性能測量

>本文探討了資源正時API，這是一種強大的工具，用於收集有關網頁加載資源的詳細計時信息。 了解此數據對於優化網頁性能和降低用戶延遲至關重要。

>

密鑰概念：

• 全面的時機數據：
• >通過訪問：window.performance>通過使用參數'resource'。 performancewindow>對象：getEntriesByType()
方法返回一個
• 對象的數組，每個詳細介紹了一個資源的加載過程。 PerformanceResourceTiming廣泛的瀏覽器支持： API在主要瀏覽器（Chrome，Internet Explorer，Opera等）中享有良好的支持。但是，需要驗證支持。 getEntriesByType() PerformanceResourceTiming第三方資源注意事項：與第一方和第三方資源一起使用時，第三方資源的詳細計時數據需要 http標頭。 沒有它，只有總持續時間可用。
>
• 了解數據：
• 每個對像都提供了許多屬性，包括：> Timing-Allow-Origin: *

：資源的URL。

：瀏覽器開始獲取資源之前的時間。

>

PerformanceResourceTiming：加載資源所花費的總時間。

• ：指示啟動資源請求的元素（例如，name，
，
• ，startTime，
）。
• 其他屬性的詳細信息特定階段：，duration，
，
• ，initiatorType，img，script，css，xmlhttprequest，
，
• ，redirectStart，redirectEnd，fetchStart，，，，domainLookupStart。 這些時序階段的視覺表示如下：domainLookupEnd connectStart connectEndsecureConnectionStart requestStart responseStart responseEnd API用法和瀏覽器兼容性：
>API支持的測試需要檢查是否存在

>和window.performance，並驗證該window.performance.getEntriesByType()返回數組。 此檢查的簡單代碼片段是：window.performance.getEntriesByType('resource')

if (!('performance' in window) ||
    !('getEntriesByType' in window.performance) ||
    !(window.performance.getEntriesByType('resource') instanceof Array)) {
    // API not supported
} else {
    // API supported
}

>可以通過加載資源（例如，圖像和腳本）創建一個基本的演示API功能，然後在頁面加載時，通過

>對象迭代以顯示收集的數據。 PerformanceResourceTiming

結論：

>資源正時API提供了可靠的機制，用於詳細的性能分析。通過識別資源加載中的瓶頸，開發人員可以顯著提高網站速度和用戶體驗。儘管瀏覽器的支持通常很好，但在依靠此API之前測試兼容性至關重要。 還應考慮有關第三方資源的限制。

常見問題（常見問題解答）：

> 原始文本中的常見問題解答部分在很大程度上保持不變，並提供了有價值的其他信息。 建議在此處包含它以使其完整。 （常見問題解答部分太長在這裡複製，但應直接從輸入文本複制。）>

以上是資源定時API簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章！