大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。
1.什么是 Webperf-SnippetsWebperf-Snippets 是精选的片段列表，用于获取 Web 性能指标以在浏览器控制台中使用或作为 Chrome 开发工具上的片段。
⚡️ Web Performance Snippets开发者可以使用 Webperf-Snippets 作为 Chrome DevTools Sources 选项卡中的 Snippet。只需要按照如下步骤完成：
复制任何 WebPerf 片段打开 Chrome 开发者工具选择 “来源” 选项卡选择 “片段” 子选项卡单击 “新建片段” 按钮，例如：LCP写下片段名称 LCP将复制的代码粘贴到右侧区域运行片段2.Webperf-Snippets 包括那些指标Cumulative Layout Shift (CLS)当浏览器焦点切换到另一个选项卡时，此脚本会显示 CLS 值，因为 CLS 是在页面的生命周期内计算的。
let cumulativeLayoutShiftScore = 0;const observer = new PerformanceObserver((list) => { for (const entry of list.getEntries()) { if (!entry.hadRecentInput) { cumulativeLayoutShiftScore += entry.value; } }});observer.observe({type: "layout-shift", buffered: true});document.addEventListener("visibilitychange", () => { if (document.visibilityState === "hidden") { observer.takeRecords(); observer.disconnect(); console.log(`CLS: ${cumulativeLayoutShiftScore}`); }});Largest Contentful Paint (LCP)下面的脚本会显示有关 LCP（在新选项卡中打开）指标的信息。
可以在浏览器控制台中使用，也可以将其用作 Chrome DevTools Source 选项卡中的片段。以下代码在控制台中列出最大的内容绘制，并在 LCP 元素周围添加绿色虚线。
const po = new PerformanceObserver((list) => { let entries = list.getEntries(); entries = dedupe(entries, "startTime"); entries.forEach((item, i) => { console.dir(item); console.log( `${i + 1} current LCP item : ${item.element}: ${item.startTime}`, ); item.element ? (item.element.style = "border: 5px dotted lime;") : ""; }); const lastEntry = entries[entries.length - 1]; console.log(`LCP is: ${lastEntry.startTime}`);});po.observe({type: "largest-contentful-paint", buffered: true});function dedupe(arr, key) { return [...new Map(arr.map((item) => [item[key], item])).values()];}Time To First Byte第一个字节的时间 (TTFB) 是一种测量值，用于表示网络服务器或其他网络资源的响应能力。 TTFB 测量从用户或客户端发出 HTTP 请求到客户端浏览器收到页面第一个字节的持续时间。
// Measure the time to first byte of all the resources loaded// https://webperf-snippets.nucliweb.netnew PerformanceObserver((entryList) => { const [pageNav] = entryList.getEntriesByType("navigation"); console.log(`TTFB (ms): ${pageNav.responseStart}`);}).observe({ type: "navigation", buffered: true,});Scripts Loading列出 DOM 中的所有 <scripts> 并显示一个表格以查看是否加载了异步、延迟和 / 或 type="module":
const scripts = document.querySelectorAll("script[src]");const scriptsLoading = [...scripts].map((obj) => { return { src: obj.src, async: obj.async, defer: obj.defer, module: obj.type === 'module', "render blocking": obj.async || obj.defer || obj.type === 'module' ? "":"", };});console.table(scriptsLoading);