Chrome 上线了 Performance Extensibility API。它让开发者能把“自己关心的信号”直接塞进 DevTools 的 Performance 面板里可视化。我啃了好一阵最新文档（密不透风不夸张），现在把精华捋给你。
最近，Chrome 上线了Performance Extensibility API。它让开发者能把“自己关心的信号”直接塞进 DevTools 的Performance面板里可视化。我啃了好一阵最新文档（密不透风不夸张），现在把精华捋给你。
你大概也经历过：在无穷无尽的面板里来回横跳，找不到关键线索，越看越糊涂。
掌控你的指标：把“你在乎的”搬进 Performance 面板
Performance Extensibility API 允许你在 DevTools 的 Performance 面板里自定义轨道（track）与自定义事件，等于给你的应用做一份“专属体检报告”。从基础开始最稳。
先来看最小闭环：在页面里埋点、量时间、打印结果。
上面做了三件事：
用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');// 模拟一段“费时”的 JSsetTimeout(() => { 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' } }});// 模拟一段“费时”的 JSsetTimeout(() => { 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 打开，开始录制即可。