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

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

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

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

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

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

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

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

<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() 量兩點之間的耗時。

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

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

圖片

Extensibility API：不僅是打點，更是“自定義軌道”

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

你可以聲明自定義 Track，把事件放到屬于你的一條線上；
還能為 mark/measure 添加豐富的細節(jié)，在 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 加載全過程“打點→量時→標(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');

    // 抓取該樣式的資源級計時信息
    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>

看點在哪里？

你不僅能看到“從請求到解析”的總耗時，還能拆分：排隊/首包延遲、下載時長、傳輸體積、解碼體積；
這些細節(jié)直接展示在自定義條目上，鼠標(biāo)懸停即可讀懂；
當(dāng)它與網(wǎng)絡(luò)/主線程/渲染/JS 采樣軌并排時，瓶頸會“自己跳出來”。

實操建議（真能省時間的部分）

先埋點，后錄制：把你懷疑的路徑都放上 mark/measure，用命名來表達意圖（如 route:home→product）。
一條軌講一件事：用 detail.devtools.track 歸類，避免把所有事件堆到 Timings。
用屬性說人話：把 URL、大小、分段時長等放進 properties，減少“錄完還要再翻 Request 面板”的往返。
短錄多次：與其錄 60s 看花眼，不如錄 5–10s 聚焦一條鏈路，逐段定位。
對照回放：修一次就錄一次，延遲/抖動/主線程阻塞是否下降，一眼即判。

總結(jié)

今天我們把 Performance Extensibility API 的核心玩法走了一遍：

mark/measure 打點量時；
detail.devtools 把事件“搬進”自定義軌；
“屬性 + 提示 + 顏色”讓復(fù)盤更高效；
配合 Performance 面板的系統(tǒng)軌道，定位更快，溝通更順。

下一次你懷疑“頁面慢在某一步”，別再盲猜。埋點→錄制→證據(jù)說話，你會省下成片時間。

責(zé)任編輯：武曉燕來源：大遷世界

偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

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