PerformanceLongTaskTiming

描述

阻塞主執行緒 50 毫秒或更長時間的長任務會導致（除其他問題外）

• 延遲 可互動時間 (TTI)。
• 輸入延遲高/不穩定。
• 事件處理延遲高/不穩定。
• 動畫和滾動卡頓。

長任務是指主 UI 執行緒持續忙碌 50 毫秒或更長時間的任何不間斷時段。常見示例包括：

• 長時間執行的事件處理程式。
• 昂貴的重排和重新渲染。
• 瀏覽器在事件迴圈不同回合之間執行的、超過 50 毫秒的工作。

長任務是指“罪魁禍首的瀏覽上下文容器”，簡稱“容器”，即任務發生的頂層頁面、<iframe>、<embed> 或 <object>。

對於不發生在頂層頁面內的任務，以及為了確定哪個容器對長任務負責，TaskAttributionTiming 介面提供了 `containerId`、`containerName` 和 `containerSrc` 屬性，這些屬性可能提供有關任務來源的更多資訊。

PerformanceLongTaskTiming 繼承自 PerformanceEntry。

例項屬性

此介面透過如下限定來擴充套件以下 PerformanceEntry 屬性，以用於長任務計時效能條目型別：

PerformanceEntry.duration 只讀 實驗性

返回一個 DOMHighResTimeStamp，表示任務開始和結束之間的時間差，精度為 1 毫秒。

PerformanceEntry.entryType 只讀 實驗性

始終返回 `"longtask"`。

PerformanceEntry.name 只讀 實驗性

返回以下字串之一，指明可歸因於長任務的瀏覽上下文或框架：

• "cross-origin-ancestor"（跨源祖先）
• "cross-origin-descendant"（跨源後代）
• "cross-origin-unreachable"（跨源不可達）
• "multiple-contexts"（多個上下文）
• "same-origin-ancestor"（同源祖先）
• "same-origin-descendant"（同源後代）
• "same-origin"（同源）
• "self"（自身）
• "unknown"（未知）

PerformanceEntry.startTime 只讀 實驗性

返回一個 DOMHighResTimeStamp，表示任務開始的時間。

此介面還支援以下屬性：

PerformanceLongTaskTiming.attribution 只讀 實驗性

返回一個 TaskAttributionTiming 例項的序列。

例項方法

PerformanceLongTaskTiming.toJSON() 實驗性

返回 `PerformanceLongTaskTiming` 物件的 JSON 表示形式。

示例

獲取長任務

要獲取長任務的計時資訊，請建立一個 PerformanceObserver 例項，然後呼叫其 observe() 方法，將 `"longtask"` 作為 type 選項的值傳遞。您還需要將 `buffered` 設定為 `true`，以便能夠訪問使用者代理在構建文件時緩衝的長任務。然後，`PerformanceObserver` 物件的 callback 將會收到一個 `PerformanceLongTaskTiming` 物件列表，您可以對其進行分析。

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry);
  });
});

observer.observe({ type: "longtask", buffered: true });

規範

瀏覽器相容性

另見

• TaskAttributionTiming