這個(gè)“低調(diào)到不行”的 Chrome 新功能，能幫你省下成片時(shí)間

作者：前端小智 2025-08-14 02:11:00

Chrome 上線了 Performance Extensibility API。它讓開發(fā)者能把“自己關(guān)心的信號(hào)”直接塞進(jìn) DevTools 的 Performance 面板里可視化。我啃了好一陣官方文檔（密不透風(fēng)不夸張），現(xiàn)在把精華捋給你。

最近，Chrome 上線了 Performance Extensibility API。它讓開發(fā)者能把“自己關(guān)心的信號(hào)”直接塞進(jìn) DevTools 的 Performance 面板里可視化。我啃了好一陣官方文檔（密不透風(fēng)不夸張），現(xiàn)在把精華捋給你。

你大概也經(jīng)歷過：在無窮無盡的面板里來回橫跳，找不到關(guān)鍵線索，越看越糊涂。

掌控你的指標(biāo)：把“你在乎的”搬進(jìn) Performance 面板

Performance Extensibility API 允許你在 DevTools 的 Performance 面板里自定義軌道（track）與自定義事件，等于給你的應(yīng)用做一份“專屬體檢報(bào)告”。從基礎(chǔ)開始最穩(wěn)。

先來看最小閉環(huán)：在頁面里埋點(diǎn)、量時(shí)間、打印結(jié)果。

<script>performance.mark('cssStart');</script>

<linkrel="stylesheet"href="/app.css">

<script>
  performance.mark('cssEnd');
  performance.measure('cssTime', 'cssStart', 'cssEnd');
</script>

上面做了三件事：

用 performance.mark() 打點(diǎn) cssStart；
加載樣式；
再打點(diǎn) cssEnd 并用 performance.measure() 量兩點(diǎn)之間的耗時(shí)。

想快速看數(shù)據(jù)？控制臺(tái)直接取：

console.log(`CSS Start: ${performance.getEntriesByName('cssStart')[0].startTime} ms`);
console.log(`CSS Duration: ${performance.getEntriesByName('cssTime')[0].duration} ms`);

同理，JavaScript 片段也能這樣測(cè)：

performance.mark('jsStart');

// 模擬一段“費(fèi)時(shí)”的 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);

為什么要進(jìn) Performance 面板？

console.log()：輕量與即時(shí)，不必全量錄制就能看到數(shù)字；
Performance 面板：把你的標(biāo)記與網(wǎng)絡(luò)/腳本/渲染等系統(tǒng)軌道并排對(duì)照，全景式排查更直觀。

圖片

Extensibility API：不僅是打點(diǎn)，更是“自定義軌道”

新 API 的關(guān)鍵點(diǎn)在于：

你可以聲明自定義 Track，把事件放到屬于你的一條線上；
還能為 mark/measure 添加豐富的細(xì)節(jié)，在 DevTools 中直接可視化。

先開啟自定義 Track 能力：

圖片

然后，給 mark 增加 DevTools 識(shí)別信息（dataType: 'marker'）：

performance.mark('jsStart', {
detail: {
    devtools: {
      dataType: 'marker'
    }
  }
});

// 模擬一段“費(fèi)時(shí)”的 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);

把上面代碼貼進(jìn)瀏覽器控制臺(tái)，切到 Performance，錄幾秒。

接著，把 measure 放到自定義的 Track 上：

performance.measure('jsTime', {
  start: 'jsStart',
  end: 'jsEnd',
  detail: {
    devtools: {
      track: 'JavaScript Custom Tracker - Amit'
    }
  }
});

圖片

一份完整的 Demo：第三方資源、耗時(shí)細(xì)分、屬性展示，一條龍

下面這段 HTML 把 CSS 加載全過程“打點(diǎn)→量時(shí)→標(biāo)注”為一條自定義軌。保存為 .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');

    // 抓取該樣式的資源級(jí)計(jì)時(shí)信息
    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>

看點(diǎn)在哪里？