這個“低調到不行”的 Chrome 新功能，能幫你省下成片時間
作者：前端小智
Chrome 上線了 Performance Extensibility API。它讓開發者能把“自己關心的信號”直接塞進 DevTools 的 Performance 面板里可視化。我啃了好一陣官方文檔（密不透風不夸張），現在把精華捋給你。
最近，Chrome 上線了 Performance Extensibility API。它讓開發者能把“自己關心的信號”直接塞進 DevTools 的 Performance 面板里可視化。我啃了好一陣官方文檔（密不透風不夸張），現在把精華捋給你。
你大概也經歷過：在無窮無盡的面板里來回橫跳，找不到關鍵線索，越看越糊涂。
掌控你的指標：把“你在乎的”搬進 Performance 面板
Performance Extensibility API 允許你在 DevTools 的 Performance 面板里自定義軌道（track）與自定義事件，等于給你的應用做一份“專屬體檢報告”。從基礎開始最穩。
先來看最小閉環：在頁面里埋點、量時間、打印結果。
<script>performance.mark('cssStart');</script>
<linkrel="stylesheet"href="/app.css">
<script>
performance.mark('cssEnd');
performance.measure('cssTime', 'cssStart', 'cssEnd');
</script>上面做了三件事：
- 用 performance.mark() 打點 cssStart；
- 加載樣式；
- 再打點 cssEnd 并用 performance.measure() 量兩點之間的耗時。
想快速看數據？控制臺直接取：
console.log(`CSS Start: ${performance.getEntriesByName('cssStart')[0].startTime} ms`);
console.log(`CSS Duration: ${performance.getEntriesByName('cssTime')[0].duration} ms`);同理，JavaScript 片段也能這樣測：
performance.mark('jsStart');
// 模擬一段“費時”的 JS
setTimeout(() => {
performance.mark('jsEnd');
performance.measure('jsTime', 'jsStart', 'jsEnd');
console.log(performance.getEntriesByName('jsStart')[0].startTime);
console.log(performance.getEntriesByName('jsTime')[0].duration);
}, 1000);為什么要進 Performance 面板？
- console.log()：輕量與即時，不必全量錄制就能看到數字；
- Performance 面板：把你的標記與網絡/腳本/渲染等系統軌道并排對照，全景式排查更直觀。
圖片
Extensibility API：不僅是打點，更是“自定義軌道”
新 API 的關鍵點在于：
- 你可以聲明自定義 Track，把事件放到屬于你的一條線上；
- 還能為 mark/measure 添加豐富的細節，在 DevTools 中直接可視化。
先開啟自定義 Track 能力：
圖片
然后，給 mark 增加 DevTools 識別信息（dataType: 'marker'）：
performance.mark('jsStart', {
detail: {
devtools: {
dataType: 'marker'
}
}
});
// 模擬一段“費時”的 JS
setTimeout(() => {
performance.mark('jsEnd', {
detail: {
devtools: {
dataType: 'marker'
}
}
});
performance.measure('jsTime', 'jsStart', 'jsEnd');
console.log(performance.getEntriesByName('jsStart')[0].startTime);
console.log(performance.getEntriesByName('jsTime')[0].duration);
}, 5000);把上面代碼貼進瀏覽器控制臺，切到 Performance，錄幾秒。
接著，把 measure 放到自定義的 Track 上：
performance.measure('jsTime', {
start: 'jsStart',
end: 'jsEnd',
detail: {
devtools: {
track: 'JavaScript Custom Tracker - Amit'
}
}
});
圖片
一份完整的 Demo：第三方資源、耗時細分、屬性展示，一條龍
下面這段 HTML 把 CSS 加載全過程“打點→量時→標注”為一條自定義軌。保存為 .html 后用 Chrome 打開，開始錄制即可。
<!doctype html>
<htmllang="en-gb">
<metacharset="utf-8">
<metaname="viewport"content="width=device-width, minimum-scale=1.0">
<title>Extensibility API</title>
<script>
performance.mark('cssStart', {
detail: {
devtools: {
dataType: "marker",
tooltipText: 'Get Bootstrap CSS from CDN',
color: "secondary-light"
}
}
});
</script>
<linkrel="stylesheet">
<script>
performance.mark('cssEnd');
// 抓取該樣式的資源級計時信息
const css = document.getElementById('jsCSS');
const cssURL = css.href;
const cssTimingInformation = performance.getEntriesByName(cssURL)[0];
const cssTransferSize = (cssTimingInformation.transferSize / 1024).toFixed(2);
const cssDecodedBodySize = (cssTimingInformation.decodedBodySize / 1024).toFixed(2);
const cssLatencyDuration = (cssTimingInformation.responseStart - cssTimingInformation.startTime).toFixed(2);
const cssdownloadDuration = (cssTimingInformation.responseEnd - cssTimingInformation.responseStart).toFixed(2);
</script>
<script>
performance.measure('cssTime', {
start: 'cssStart',
end: 'cssEnd',
detail: {
devtools: {
dataType: 'track-entry',
trackGroup: 'Third Party Instrumentation',
track: 'CSS',
tooltipText: 'CSS Downloaded and Parsed',
color: 'secondary-light',
properties: [
['URL', cssURL],
['Transferred Size', `${cssTransferSize} KB`],
['Decoded Body Size', `${cssDecodedBodySize} KB`],
['Queuing & Latency', `${cssLatencyDuration} ms`],
['Download', `${cssdownloadDuration} ms`]
]
}
}
});
</script>
</html>看點在哪里？
- 你不僅能看到“從請求到解析”的總耗時，還能拆分：排隊/首包延遲、下載時長、傳輸體積、解碼體積；
- 這些細節直接展示在自定義條目上，鼠標懸停即可讀懂；
- 當它與網絡/主線程/渲染/JS 采樣軌并排時，瓶頸會“自己跳出來”。
實操建議（真能省時間的部分）
- 先埋點，后錄制：把你懷疑的路徑都放上 mark/measure，用命名來表達意圖（如 route:home→product）。
- 一條軌講一件事：用 detail.devtools.track 歸類，避免把所有事件堆到 Timings。
- 用屬性說人話：把 URL、大小、分段時長等放進 properties，減少“錄完還要再翻 Request 面板”的往返。
- 短錄多次：與其錄 60s 看花眼，不如錄 5–10s 聚焦一條鏈路，逐段定位。
- 對照回放：修一次就錄一次，延遲/抖動/主線程阻塞是否下降，一眼即判。
總結
今天我們把 Performance Extensibility API 的核心玩法走了一遍：
- mark/measure 打點量時；
- detail.devtools 把事件“搬進”自定義軌；
- “屬性 + 提示 + 顏色”讓復盤更高效；
- 配合 Performance 面板的系統軌道，定位更快，溝通更順。
下一次你懷疑“頁面慢在某一步”，別再盲猜。埋點→錄制→證據說話，你會省下成片時間。
責任編輯：武曉燕
來源：
大遷世界
