[{"data":1,"prerenderedAt":4161},["ShallowReactive",2],{"article-/topics/performance/browser-rendering-pipeline":3,"related-performance":543,"content-query-SWGyJAUiTW":3756},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"topic":5,"author":11,"tags":12,"image":18,"featured":19,"readingTime":20,"body":21,"_type":537,"_id":538,"_source":539,"_file":540,"_stem":541,"_extension":542},"/topics/performance/browser-rendering-pipeline","performance",false,"","浏览器渲染管道深度讲解与性能优化","从 URL 输入到页面显示的完整过程分析。详解 DNS、TCP、HTTP、HTML 解析、CSS 解析、JavaScript 执行、布局、绘制、合成等步骤，以及关键渲染路径优化、重排和重绘优化等高级优化技巧。","2025-12-12","HTMLPAGE 团队",[13,14,15,16,17],"浏览器渲染","性能优化","关键渲染路径","重排重绘","DOM 优化","/images/topics/browser-rendering.jpg",true,12,{"type":22,"children":23,"toc":501},"root",[24,31,37,43,53,59,66,74,83,94,100,108,114,122,128,134,142,148,159,165,174,180,186,194,200,209,215,221,229,235,240,249,255,261,269,275,280,289,295,301,309,315,324,329,338,343,352,357,362,427,432,461,466],{"type":25,"tag":26,"props":27,"children":28},"element","h2",{"id":8},[29],{"type":30,"value":8},"text",{"type":25,"tag":26,"props":32,"children":34},{"id":33},"从输入-url-到页面显示的完整过程",[35],{"type":30,"value":36},"从输入 URL 到页面显示的完整过程",{"type":25,"tag":38,"props":39,"children":40},"p",{},[41],{"type":30,"value":42},"当用户在浏览器中输入 URL 时，会经历一个复杂的过程才能看到最终的网页。理解这个过程对性能优化至关重要。",{"type":25,"tag":44,"props":45,"children":47},"pre",{"code":46},"用户输入 URL（如：https://example.com）\n  ↓\n┌───────────────────────────────────────┐\n│ 阶段 1: 网络传输                      │\n├───────────────────────────────────────┤\n│ ├─ DNS 查询：example.com → IP 地址   │\n│ ├─ TCP 连接：三次握手建立连接        │\n│ ├─ TLS 握手（HTTPS）                 │\n│ └─ HTTP 请求：获取 HTML              │\n└───────────────────────────────────────┘\n  ↓ HTML 数据到达浏览器\n┌───────────────────────────────────────┐\n│ 阶段 2: 解析和构建 DOM                │\n├───────────────────────────────────────┤\n│ ├─ HTML Parser 逐行解析 HTML          │\n│ ├─ 遇到 \u003Cscript> 暂停，下载执行       │\n│ ├─ 遇到 \u003Clink> 下载 CSS               │\n│ ├─ 构建 DOM 树                        │\n│ └─ 继续解析直到 \u003C/html>               │\n└───────────────────────────────────────┘\n  ↓\n┌───────────────────────────────────────┐\n│ 阶段 3: 样式处理                      │\n├───────────────────────────────────────┤\n│ ├─ CSS Parser 解析 CSS                │\n│ ├─ 匹配选择器到 DOM 元素              │\n│ ├─ 计算每个元素的最终样式            │\n│ └─ 构建 CSSOM（CSS Object Model）    │\n└───────────────────────────────────────┘\n  ↓ DOM + CSSOM 准备完成\n┌───────────────────────────────────────┐\n│ 阶段 4: 布局（Layout）                │\n├───────────────────────────────────────┤\n│ ├─ 递归遍历 DOM 树                    │\n│ ├─ 计算每个元素的大小和位置          │\n│ ├─ 考虑 CSS 盒模型                    │\n│ └─ 生成布局树                        │\n└───────────────────────────────────────┘\n  ↓\n┌───────────────────────────────────────┐\n│ 阶段 5: 绘制（Paint）                 │\n├───────────────────────────────────────┤\n│ ├─ 为每个元素生成绘制指令            │\n│ ├─ 确定绘制顺序（z-index 等）       │\n│ ├─ 栅格化，转换为像素                │\n│ └─ 生成位图                          │\n└───────────────────────────────────────┘\n  ↓\n┌───────────────────────────────────────┐\n│ 阶段 6: 合成（Composite）             │\n├───────────────────────────────────────┤\n│ ├─ 按照分层结构合并多个层           │\n│ ├─ 应用动画和变换                    │\n│ ├─ 最终合成到帧缓冲                  │\n│ └─ 显示在屏幕上                      │\n└───────────────────────────────────────┘\n  ↓\n用户看到网页 ✅\n",[48],{"type":25,"tag":49,"props":50,"children":51},"code",{"__ignoreMap":7},[52],{"type":30,"value":46},{"type":25,"tag":26,"props":54,"children":56},{"id":55},"第一阶段网络传输",[57],{"type":30,"value":58},"第一阶段：网络传输",{"type":25,"tag":60,"props":61,"children":63},"h3",{"id":62},"_11-dns-查询",[64],{"type":30,"value":65},"1.1 DNS 查询",{"type":25,"tag":44,"props":67,"children":69},{"code":68},"DNS 查询过程：\n\n用户浏览器缓存？\n  ├─ 是 → 直接返回 IP\n  └─ 否 ↓\n\n操作系统缓存？\n  ├─ 是 → 直接返回 IP\n  └─ 否 ↓\n\n本地网络缓存（ISP DNS）？\n  ├─ 是 → 直接返回 IP\n  └─ 否 ↓\n\n向根域名服务器查询\n  ├─ 返回 TLD 服务器地址\n  ↓\n\n向 TLD 服务器查询\n  ├─ 返回权威服务器地址\n  ↓\n\n向权威服务器查询\n  ├─ 返回 IP 地址\n  ↓\n\n返回给用户浏览器\n",[70],{"type":25,"tag":49,"props":71,"children":72},{"__ignoreMap":7},[73],{"type":30,"value":68},{"type":25,"tag":38,"props":75,"children":76},{},[77],{"type":25,"tag":78,"props":79,"children":80},"strong",{},[81],{"type":30,"value":82},"DNS 查询优化：",{"type":25,"tag":44,"props":84,"children":89},{"code":85,"language":86,"meta":7,"className":87},"\u003C!-- 1. DNS 预解析 -->\n\u003Clink rel=\"dns-prefetch\" href=\"https://cdn.example.com\">\n\u003Clink rel=\"dns-prefetch\" href=\"https://api.example.com\">\n\n\u003C!-- 2. 预连接（DNS + TCP + TLS） -->\n\u003Clink rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n\n\u003C!-- 3. 预加载 -->\n\u003Clink rel=\"preload\" href=\"/styles.css\" as=\"style\">\n\n\u003C!-- 实际使用 -->\n\u003Clink rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Roboto\">\n","html",[88],"language-html",[90],{"type":25,"tag":49,"props":91,"children":92},{"__ignoreMap":7},[93],{"type":30,"value":85},{"type":25,"tag":60,"props":95,"children":97},{"id":96},"_12-tcp-连接",[98],{"type":30,"value":99},"1.2 TCP 连接",{"type":25,"tag":44,"props":101,"children":103},{"code":102},"TCP 三次握手：\n\n┌─────────────┐                    ┌──────────────┐\n│ 客户端      │                    │ 服务器       │\n└─────────────┘                    └──────────────┘\n      │                                   │\n      │ SYN (seq=x)                      │\n      ├──────────────────────────────────>\n      │                                   │\n      │                    SYN-ACK (seq=y, ack=x+1)\n      \u003C──────────────────────────────────┤\n      │                                   │\n      │ ACK (seq=x+1, ack=y+1)          │\n      ├──────────────────────────────────>\n      │                                   │\n      └─────────── 连接建立 ─────────────┘\n\n时间成本：50-300ms（取决于网络）\n",[104],{"type":25,"tag":49,"props":105,"children":106},{"__ignoreMap":7},[107],{"type":30,"value":102},{"type":25,"tag":60,"props":109,"children":111},{"id":110},"_13-tls-握手https",[112],{"type":30,"value":113},"1.3 TLS 握手（HTTPS）",{"type":25,"tag":44,"props":115,"children":117},{"code":116},"TLS 1.3 握手时间线：\n\n0ms   ├─ 客户端发送 ClientHello\n50ms  ├─ 服务器发送 ServerHello, Certificate, Finished\n100ms ├─ 客户端发送 Finished\n      └─ 加密通信开始 ✅\n\n总耗时：50-100ms（比 HTTP 多 1 次 RTT）\n\n优化：\n  ✅ 使用 TLS 1.3（比 1.2 快）\n  ✅ Session Resumption（重用会话）\n  ✅ False Start（提前发送数据）\n",[118],{"type":25,"tag":49,"props":119,"children":120},{"__ignoreMap":7},[121],{"type":30,"value":116},{"type":25,"tag":26,"props":123,"children":125},{"id":124},"第二阶段html-解析",[126],{"type":30,"value":127},"第二阶段：HTML 解析",{"type":25,"tag":60,"props":129,"children":131},{"id":130},"_21-html-parser-工作原理",[132],{"type":30,"value":133},"2.1 HTML Parser 工作原理",{"type":25,"tag":44,"props":135,"children":137},{"code":136},"HTML 解析流程：\n\n浏览器接收 HTML 字节流\n  ↓\nConvert（字节 → 字符）\n  ├─ 根据 HTTP Content-Type\n  └─ 默认 UTF-8 编码\n  ↓\nTokenize（字符 → Token）\n  ├─ HTML Tokenizer 状态机\n  ├─ 识别标签、属性、文本\n  └─ 生成 Token 流\n  ↓\nParse（Token → DOM）\n  ├─ HTML Parser 构建树\n  ├─ 应用解析算法（Algorithm）\n  └─ 生成 DOM 树\n  ↓\nDOM 树构建完毕\n",[138],{"type":25,"tag":49,"props":139,"children":140},{"__ignoreMap":7},[141],{"type":30,"value":136},{"type":25,"tag":60,"props":143,"children":145},{"id":144},"_22-关键渲染路径crp",[146],{"type":30,"value":147},"2.2 关键渲染路径（CRP）",{"type":25,"tag":44,"props":149,"children":154},{"code":150,"language":151,"meta":7,"className":152},"// 关键渲染路径中的资源\n\nconst criticalResources = {\n  必须阻塞渲染的资源: [\n    'CSS（在 \u003Chead> 中）',    // 必须等待加载和解析\n    'JavaScript（无 async/defer）' // 必须等待执行\n  ],\n  \n  不阻塞渲染的资源: [\n    'async JavaScript',        // 后台加载，准备好立即执行\n    'defer JavaScript',        // 在 DOMContentLoaded 前执行\n    'CSS（media query）',     // 非匹配条件的 CSS\n    'JavaScript（模块化）'     // 动态导入\n  ],\n  \n  完全不相关的资源: [\n    '图片',\n    '字体',\n    '视频'\n  ]\n}\n\n// CRP 优化：尽量减少关键资源数量和大小\n","javascript",[153],"language-javascript",[155],{"type":25,"tag":49,"props":156,"children":157},{"__ignoreMap":7},[158],{"type":30,"value":150},{"type":25,"tag":60,"props":160,"children":162},{"id":161},"_23-脚本阻塞问题",[163],{"type":30,"value":164},"2.3 脚本阻塞问题",{"type":25,"tag":44,"props":166,"children":169},{"code":167,"language":86,"meta":7,"className":168},"\u003C!-- ❌ 坏例子：脚本阻塞解析 -->\n\u003Chead>\n  \u003Clink rel=\"stylesheet\" href=\"/styles.css\">\n  \u003Cscript src=\"/app.js\">\u003C/script>  \u003C!-- ❌ 阻塞解析 -->\n  \u003Cscript src=\"/analytics.js\">\u003C/script>\n  \u003Cscript src=\"/third-party.js\">\u003C/script>\n\u003C/head>\n\u003Cbody>\n  \u003Ch1>页面标题\u003C/h1>\n  \u003C!-- 用户要等这些脚本下载执行后才能看到内容 -->\n\u003C/body>\n\n\u003C!-- ✅ 好例子：优化脚本加载 -->\n\u003Chead>\n  \u003Clink rel=\"stylesheet\" href=\"/styles.css\">\n  \u003C!-- 关键 JavaScript 延迟加载或异步 -->\n\u003C/head>\n\u003Cbody>\n  \u003Ch1>页面标题\u003C/h1>\n  \n  \u003C!-- 脚本放在 body 末尾，或使用 defer/async -->\n  \u003Cscript src=\"/app.js\" defer>\u003C/script>\n  \u003Cscript src=\"/analytics.js\" async>\u003C/script>\n\u003C/body>\n",[88],[170],{"type":25,"tag":49,"props":171,"children":172},{"__ignoreMap":7},[173],{"type":30,"value":167},{"type":25,"tag":26,"props":175,"children":177},{"id":176},"第三阶段css-解析和-cssom-构建",[178],{"type":30,"value":179},"第三阶段：CSS 解析和 CSSOM 构建",{"type":25,"tag":60,"props":181,"children":183},{"id":182},"_31-cssom-构建",[184],{"type":30,"value":185},"3.1 CSSOM 构建",{"type":25,"tag":44,"props":187,"children":189},{"code":188},"CSS 处理流程：\n\n接收 CSS 字节流\n  ↓\nConvert（字节 → 字符）\n  ├─ 根据 Content-Type 和 @charset\n  └─ 通常 UTF-8\n  ↓\nTokenize（字符 → Token）\n  ├─ CSS 词法分析\n  ├─ 识别选择器、属性、值\n  └─ 生成 Token 流\n  ↓\nParse（Token → CSSOM）\n  ├─ CSS 语法分析\n  ├─ 构建样式表树\n  ├─ 应用层叠规则\n  └─ 计算优先级\n  ↓\nCSSOM 树完成\n",[190],{"type":25,"tag":49,"props":191,"children":192},{"__ignoreMap":7},[193],{"type":30,"value":188},{"type":25,"tag":60,"props":195,"children":197},{"id":196},"_32-css-阻塞渲染",[198],{"type":30,"value":199},"3.2 CSS 阻塞渲染",{"type":25,"tag":44,"props":201,"children":204},{"code":202,"language":151,"meta":7,"className":203},"// CSS 渲染阻塞示例\n\n// ❌ 所有 CSS 都是渲染阻塞资源\n// 必须等待下载和解析完成才能开始渲染\n\u003Clink rel=\"stylesheet\" href=\"/styles.css\">\n\u003Clink rel=\"stylesheet\" href=\"/theme.css\">\n\n// ✅ 分割关键和非关键 CSS\n// 关键 CSS 内联（减少体积）\n\u003Cstyle>\n  /* 关键页面布局和首屏样式 */\n  body { font-family: sans-serif; }\n  .hero { background: #f0f0f0; }\n  header { display: flex; }\n\u003C/style>\n\n\u003C!-- 非关键 CSS 延迟加载 -->\n\u003Clink rel=\"preload\" href=\"/non-critical.css\" as=\"style\"\n      onload=\"this.onload=null;this.rel='stylesheet'\">\n\u003Cnoscript>\u003Clink rel=\"stylesheet\" href=\"/non-critical.css\">\u003C/noscript>\n\n// ✅ 使用 media query 条件加载\n\u003Clink rel=\"stylesheet\" href=\"/mobile.css\" media=\"(max-width: 600px)\">\n\u003Clink rel=\"stylesheet\" href=\"/desktop.css\" media=\"(min-width: 601px)\">\n// 只有匹配条件的 CSS 才是渲染阻塞资源\n",[153],[205],{"type":25,"tag":49,"props":206,"children":207},{"__ignoreMap":7},[208],{"type":30,"value":202},{"type":25,"tag":26,"props":210,"children":212},{"id":211},"第四阶段布局layout",[213],{"type":30,"value":214},"第四阶段：布局（Layout）",{"type":25,"tag":60,"props":216,"children":218},{"id":217},"_41-布局过程",[219],{"type":30,"value":220},"4.1 布局过程",{"type":25,"tag":44,"props":222,"children":224},{"code":223},"布局计算步骤：\n\n遍历 DOM 树\n  ├─ 从根元素开始\n  ├─ 递归处理每个元素\n  └─ 跳过 display: none 的元素\n  ↓\n\n计算盒模型\n  ├─ width + padding + border + margin\n  ├─ 考虑 box-sizing 属性\n  └─ 应用 CSS 约束\n  ↓\n\n处理相对定位\n  ├─ 相对位置根据正常流计算\n  ├─ 最终位置 = 正常流 + offset\n  └─ 不影响其他元素\n  ↓\n\n处理浮动元素\n  ├─ 从文档流移除\n  ├─ 影响其他元素流动\n  └─ 不影响绝对定位元素\n  ↓\n\n处理绝对定位\n  ├─ 从文档流移除\n  ├─ 相对于定位上下文\n  └─ 不影响其他元素\n  ↓\n\n生成布局树\n",[225],{"type":25,"tag":49,"props":226,"children":227},{"__ignoreMap":7},[228],{"type":30,"value":223},{"type":25,"tag":60,"props":230,"children":232},{"id":231},"_42-重排reflow",[233],{"type":30,"value":234},"4.2 重排（Reflow）",{"type":25,"tag":38,"props":236,"children":237},{},[238],{"type":30,"value":239},"重排是指因为样式改变导致需要重新计算布局的过程。",{"type":25,"tag":44,"props":241,"children":244},{"code":242,"language":151,"meta":7,"className":243},"// ❌ 导致重排的操作\n\n// 1. 修改元素尺寸\nelement.style.width = '200px'  // 重排\nelement.style.height = '100px' // 重排\n\n// 2. 修改位置\nelement.style.left = '50px'    // 重排\nelement.style.top = '20px'     // 重排\n\n// 3. 修改边距\nelement.style.margin = '10px'  // 重排\nelement.style.padding = '5px'  // 重排\n\n// 4. 查询几何属性（强制重排）\nconst height = element.offsetHeight     // 强制重排\nconst width = element.offsetWidth       // 强制重排\nconst rect = element.getBoundingClientRect() // 强制重排\n\n// 5. 改变字体\nelement.style.fontSize = '16px' // 重排\n\n// 6. 改变内容\nelement.textContent = '新内容'  // 重排\nelement.innerHTML = '\u003Cdiv>新\u003C/div>' // 重排\n\n// ✅ 优化方案\n\n// 1. 批量修改样式\n// ❌ 差\nelement.style.width = '200px'\nelement.style.height = '100px'\nelement.style.color = 'red'\n\n// ✅ 好\nelement.style.cssText = 'width: 200px; height: 100px; color: red;'\n\n// 或者\nelement.classList.add('updated')\n\n// 2. 使用 transform 替代位置改变\n// ❌ 导致重排\nelement.style.left = '50px'\nelement.style.top = '20px'\n\n// ✅ 不导致重排\nelement.style.transform = 'translate(50px, 20px)'\n\n// 3. 读写分离（批处理）\n// ❌ 多次读写混合\nfor (let i = 0; i \u003C 100; i++) {\n  element.style.width = element.offsetWidth + 10 + 'px' // 每次都读写\n}\n\n// ✅ 读写分离\nlet width = element.offsetWidth\nfor (let i = 0; i \u003C 100; i++) {\n  width += 10\n}\nelement.style.width = width + 'px'\n\n// 4. 使用文档片段批量操作 DOM\n// ❌ 多次 DOM 操作\nfor (let i = 0; i \u003C 1000; i++) {\n  const li = document.createElement('li')\n  li.textContent = `Item ${i}`\n  list.appendChild(li) // 每次都重排\n}\n\n// ✅ 使用文档片段\nconst fragment = document.createDocumentFragment()\nfor (let i = 0; i \u003C 1000; i++) {\n  const li = document.createElement('li')\n  li.textContent = `Item ${i}`\n  fragment.appendChild(li)\n}\nlist.appendChild(fragment) // 只重排一次\n\n// 5. 隐藏元素后修改，再显示\n// ❌ 多次修改导致多次重排\nelement.style.width = '200px'\nelement.style.height = '100px'\n// 导致两次重排\n\n// ✅ 隐藏后修改，再显示\nelement.style.display = 'none' // 一次重排\nelement.style.width = '200px'\nelement.style.height = '100px'\nelement.style.display = 'block' // 一次重排\n// 总共两次，而不是三次\n",[153],[245],{"type":25,"tag":49,"props":246,"children":247},{"__ignoreMap":7},[248],{"type":30,"value":242},{"type":25,"tag":26,"props":250,"children":252},{"id":251},"第五阶段绘制paint",[253],{"type":30,"value":254},"第五阶段：绘制（Paint）",{"type":25,"tag":60,"props":256,"children":258},{"id":257},"_51-绘制过程",[259],{"type":30,"value":260},"5.1 绘制过程",{"type":25,"tag":44,"props":262,"children":264},{"code":263},"绘制步骤：\n\n遍历布局树\n  ├─ 确定绘制顺序\n  ├─ 应用 z-index 和 stacking context\n  └─ 生成绘制指令\n  ↓\n\n为每个元素生成绘制操作\n  ├─ drawBackground\n  ├─ drawBorder\n  ├─ drawText\n  ├─ drawImage\n  ├─ drawShadow\n  └─ drawEffect\n  ↓\n\n栅格化（Rasterization）\n  ├─ 将矢量图形转换为像素\n  ├─ 使用 GPU 加速\n  └─ 生成位图\n  ↓\n\n绘制完成\n",[265],{"type":25,"tag":49,"props":266,"children":267},{"__ignoreMap":7},[268],{"type":30,"value":263},{"type":25,"tag":60,"props":270,"children":272},{"id":271},"_52-重绘repaint",[273],{"type":30,"value":274},"5.2 重绘（Repaint）",{"type":25,"tag":38,"props":276,"children":277},{},[278],{"type":30,"value":279},"重绘是指改变外观但不影响布局的操作。",{"type":25,"tag":44,"props":281,"children":284},{"code":282,"language":151,"meta":7,"className":283},"// ✅ 不导致重排，但导致重绘的操作\n\n// 1. 改变颜色\nelement.style.color = 'red'           // 重绘，无重排\nelement.style.backgroundColor = 'blue' // 重绘，无重排\n\n// 2. 改变透明度\nelement.style.opacity = 0.5            // 重绘，无重排\n\n// 3. 改变阴影\nelement.style.boxShadow = '0 0 10px rgba(0,0,0,0.5)' // 重绘\n\n// 4. 改变文本阴影\nelement.style.textShadow = '2px 2px 4px rgba(0,0,0,0.5)' // 重绘\n\n// ✅ 优化：使用 will-change 提示浏览器\n.animated {\n  will-change: transform, opacity;\n  animation: fadeIn 1s ease-in;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: scale(0.9);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n",[153],[285],{"type":25,"tag":49,"props":286,"children":287},{"__ignoreMap":7},[288],{"type":30,"value":282},{"type":25,"tag":26,"props":290,"children":292},{"id":291},"第六阶段合成composite",[293],{"type":30,"value":294},"第六阶段：合成（Composite）",{"type":25,"tag":60,"props":296,"children":298},{"id":297},"_61-分层模型",[299],{"type":30,"value":300},"6.1 分层模型",{"type":25,"tag":44,"props":302,"children":304},{"code":303},"现代浏览器使用分层渲染：\n\n应用 will-change 或 transform 的元素\n  ├─ 提升为独立层\n  ├─ GPU 加速处理\n  └─ 不影响其他层\n  ↓\n\n普通 DOM 元素\n  ├─ 保持在默认层\n  ├─ CPU 处理\n  └─ 可能相互影响\n  ↓\n\n多个层按顺序合成\n  ├─ 应用变换和动画\n  ├─ 合并到最终帧\n  └─ 显示在屏幕上\n",[305],{"type":25,"tag":49,"props":306,"children":307},{"__ignoreMap":7},[308],{"type":30,"value":303},{"type":25,"tag":60,"props":310,"children":312},{"id":311},"_62-性能优化促进元素成层",[313],{"type":30,"value":314},"6.2 性能优化：促进元素成层",{"type":25,"tag":44,"props":316,"children":319},{"code":317,"language":151,"meta":7,"className":318},"// ✅ 创建新的合成层\n\n// 1. will-change 属性\n.animation-target {\n  will-change: transform;\n  animation: spin 2s linear infinite;\n}\n\n// 2. 使用 transform 和 opacity\n.button:hover {\n  transform: scale(1.1);  // ✅ 创建层\n  opacity: 0.9;           // ✅ 创建层\n}\n\n// ❌ 不使用这些属性\n.button:hover {\n  width: 110px;  // ❌ 不创建层\n  height: 55px;  // ❌ 不创建层\n}\n\n// 3. 创建新的堆叠上下文\n.modal {\n  position: fixed;\n  z-index: 1000;  // 创建堆叠上下文\n}\n\n// ⚠️ 注意：过多的层会增加内存使用\n// 不要过度使用 will-change 和 transform\n",[153],[320],{"type":25,"tag":49,"props":321,"children":322},{"__ignoreMap":7},[323],{"type":30,"value":317},{"type":25,"tag":26,"props":325,"children":327},{"id":326},"完整优化建议",[328],{"type":30,"value":326},{"type":25,"tag":44,"props":330,"children":333},{"code":331,"language":151,"meta":7,"className":332},"// 关键渲染路径优化总结\n\nconst CRPOptimization = {\n  // 1. HTML 优化\n  html: {\n    minimizeHTML: '删除空格和注释（压缩）',\n    asyncScripts: '对非关键脚本使用 async',\n    deferScripts: '对延迟脚本使用 defer',\n    scriptPlacement: '脚本放在 body 末尾'\n  },\n  \n  // 2. CSS 优化\n  css: {\n    inlineCriticalCSS: '内联关键 CSS（\u003C 14KB）',\n    defferNonCritical: '延迟加载非关键 CSS',\n    minifyCSS: '压缩 CSS',\n    useMediaQueries: '使用媒体查询条件加载'\n  },\n  \n  // 3. JavaScript 优化\n  javascript: {\n    codeSpitting: '代码分割，按需加载',\n    lazy: '延迟加载非关键模块',\n    treeshaking: '移除死代码',\n    minify: '压缩 JavaScript'\n  },\n  \n  // 4. 资源优化\n  resources: {\n    preload: '预加载关键资源',\n    prefetch: '预解析第三方域名',\n    compression: '启用 Gzip/Brotli 压缩',\n    cdn: '使用 CDN 加速分发'\n  },\n  \n  // 5. 缓存优化\n  caching: {\n    browserCache: '设置合理的 Cache-Control',\n    serviceWorker: '使用 Service Worker 离线缓存',\n    staticAssets: '静态资源启用 1 年过期时间'\n  },\n  \n  // 6. 运行时优化\n  runtime: {\n    avoidReflow: '避免频繁重排',\n    batchOperations: '批量操作 DOM',\n    useRAF: '使用 requestAnimationFrame',\n    debounceThrottle: '防抖和节流事件'\n  }\n}\n",[153],[334],{"type":25,"tag":49,"props":335,"children":336},{"__ignoreMap":7},[337],{"type":30,"value":331},{"type":25,"tag":26,"props":339,"children":341},{"id":340},"性能测试工具",[342],{"type":30,"value":340},{"type":25,"tag":44,"props":344,"children":347},{"code":345,"language":151,"meta":7,"className":346},"// 使用 Performance API 测量各个阶段\n\nconst performanceMetrics = {\n  // DNS 时间\n  DNS: () => {\n    const perf = performance.getEntriesByType('navigation')[0]\n    return perf.domainLookupEnd - perf.domainLookupStart\n  },\n  \n  // TCP 连接时间\n  TCP: () => {\n    const perf = performance.getEntriesByType('navigation')[0]\n    return perf.connectEnd - perf.connectStart\n  },\n  \n  // 请求时间\n  Request: () => {\n    const perf = performance.getEntriesByType('navigation')[0]\n    return perf.responseStart - perf.requestStart\n  },\n  \n  // 响应时间\n  Response: () => {\n    const perf = performance.getEntriesByType('navigation')[0]\n    return perf.responseEnd - perf.responseStart\n  },\n  \n  // DOM 解析时间\n  DOMParse: () => {\n    const perf = performance.getEntriesByType('navigation')[0]\n    return perf.domInteractive - perf.domLoading\n  },\n  \n  // 资源加载时间\n  ResourceLoad: () => {\n    const perf = performance.getEntriesByType('navigation')[0]\n    return perf.loadEventStart - perf.domContentLoadedEventEnd\n  },\n  \n  // 总加载时间\n  Total: () => {\n    const perf = performance.getEntriesByType('navigation')[0]\n    return perf.loadEventEnd - perf.fetchStart\n  }\n}\n\n// 打印性能报告\nconsole.log('=== 页面加载性能报告 ===')\nObject.entries(performanceMetrics).forEach(([key, fn]) => {\n  console.log(`${key}: ${fn().toFixed(0)}ms`)\n})\n",[153],[348],{"type":25,"tag":49,"props":349,"children":350},{"__ignoreMap":7},[351],{"type":30,"value":345},{"type":25,"tag":26,"props":353,"children":355},{"id":354},"总结",[356],{"type":30,"value":354},{"type":25,"tag":38,"props":358,"children":359},{},[360],{"type":30,"value":361},"浏览器渲染管道的核心阶段：",{"type":25,"tag":363,"props":364,"children":365},"ol",{},[366,377,387,397,407,417],{"type":25,"tag":367,"props":368,"children":369},"li",{},[370,375],{"type":25,"tag":78,"props":371,"children":372},{},[373],{"type":30,"value":374},"网络传输",{"type":30,"value":376}," → DNS、TCP、HTTP",{"type":25,"tag":367,"props":378,"children":379},{},[380,385],{"type":25,"tag":78,"props":381,"children":382},{},[383],{"type":30,"value":384},"HTML 解析",{"type":30,"value":386}," → 构建 DOM 树",{"type":25,"tag":367,"props":388,"children":389},{},[390,395],{"type":25,"tag":78,"props":391,"children":392},{},[393],{"type":30,"value":394},"CSS 解析",{"type":30,"value":396}," → 构建 CSSOM 树",{"type":25,"tag":367,"props":398,"children":399},{},[400,405],{"type":25,"tag":78,"props":401,"children":402},{},[403],{"type":30,"value":404},"布局",{"type":30,"value":406}," → 计算位置和大小",{"type":25,"tag":367,"props":408,"children":409},{},[410,415],{"type":25,"tag":78,"props":411,"children":412},{},[413],{"type":30,"value":414},"绘制",{"type":30,"value":416}," → 生成绘制指令",{"type":25,"tag":367,"props":418,"children":419},{},[420,425],{"type":25,"tag":78,"props":421,"children":422},{},[423],{"type":30,"value":424},"合成",{"type":30,"value":426}," → 合并层到最终帧",{"type":25,"tag":38,"props":428,"children":429},{},[430],{"type":30,"value":431},"优化关键：",{"type":25,"tag":433,"props":434,"children":435},"ul",{},[436,441,446,451,456],{"type":25,"tag":367,"props":437,"children":438},{},[439],{"type":30,"value":440},"减少关键资源数量和大小",{"type":25,"tag":367,"props":442,"children":443},{},[444],{"type":30,"value":445},"避免频繁的重排和重绘",{"type":25,"tag":367,"props":447,"children":448},{},[449],{"type":30,"value":450},"使用 transform 和 opacity 处理动画",{"type":25,"tag":367,"props":452,"children":453},{},[454],{"type":30,"value":455},"利用浏览器缓存和 CDN",{"type":25,"tag":367,"props":457,"children":458},{},[459],{"type":30,"value":460},"测量和监控性能指标",{"type":25,"tag":26,"props":462,"children":464},{"id":463},"推荐资源",[465],{"type":30,"value":463},{"type":25,"tag":433,"props":467,"children":468},{},[469,481,491],{"type":25,"tag":367,"props":470,"children":471},{},[472],{"type":25,"tag":473,"props":474,"children":478},"a",{"href":475,"rel":476},"https://developer.mozilla.org/en-US/docs/Web/Performance",[477],"nofollow",[479],{"type":30,"value":480},"MDN 关键渲染路径",{"type":25,"tag":367,"props":482,"children":483},{},[484],{"type":25,"tag":473,"props":485,"children":488},{"href":486,"rel":487},"https://developer.chrome.com/docs/devtools/performance/",[477],[489],{"type":30,"value":490},"Google DevTools 性能指南",{"type":25,"tag":367,"props":492,"children":493},{},[494],{"type":25,"tag":473,"props":495,"children":498},{"href":496,"rel":497},"https://web.dev/performance/",[477],[499],{"type":30,"value":500},"web.dev 性能最佳实践",{"title":7,"searchDepth":502,"depth":502,"links":503},3,[504,506,507,512,517,521,525,529,533,534,535,536],{"id":8,"depth":505,"text":8},2,{"id":33,"depth":505,"text":36},{"id":55,"depth":505,"text":58,"children":508},[509,510,511],{"id":62,"depth":502,"text":65},{"id":96,"depth":502,"text":99},{"id":110,"depth":502,"text":113},{"id":124,"depth":505,"text":127,"children":513},[514,515,516],{"id":130,"depth":502,"text":133},{"id":144,"depth":502,"text":147},{"id":161,"depth":502,"text":164},{"id":176,"depth":505,"text":179,"children":518},[519,520],{"id":182,"depth":502,"text":185},{"id":196,"depth":502,"text":199},{"id":211,"depth":505,"text":214,"children":522},[523,524],{"id":217,"depth":502,"text":220},{"id":231,"depth":502,"text":234},{"id":251,"depth":505,"text":254,"children":526},[527,528],{"id":257,"depth":502,"text":260},{"id":271,"depth":502,"text":274},{"id":291,"depth":505,"text":294,"children":530},[531,532],{"id":297,"depth":502,"text":300},{"id":311,"depth":502,"text":314},{"id":326,"depth":505,"text":326},{"id":340,"depth":505,"text":340},{"id":354,"depth":505,"text":354},{"id":463,"depth":505,"text":463},"markdown","content:topics:performance:browser-rendering-pipeline.md","content","topics/performance/browser-rendering-pipeline.md","topics/performance/browser-rendering-pipeline","md",[544,1497,2826],{"_path":545,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":546,"description":547,"date":548,"topic":5,"author":11,"tags":549,"image":554,"featured":19,"readingTime":555,"body":556,"_type":537,"_id":1494,"_source":539,"_file":1495,"_stem":1496,"_extension":542},"/topics/performance/lcp-optimization-theory-practice","LCP 优化：从理论到实践","从渲染管线与 LCP 候选元素规则出发，系统讲清 LCP 变慢的根因，提供可复现的诊断流程与可落地的优化手段（图片、字体、SSR/CSR、资源优先级、CDN）。","2026-01-20",[14,550,551,552,553],"LCP","Core Web Vitals","图片优化","CDN","/images/topics/performance/lcp.jpg",23,{"type":22,"children":557,"toc":1468},[558,563,568,573,591,596,616,621,639,643,649,654,690,695,700,703,709,714,727,732,745,750,773,776,782,787,792,797,820,823,829,835,840,853,858,871,877,882,895,901,919,922,928,934,939,957,963,976,995,1001,1006,1015,1020,1029,1034,1040,1058,1061,1067,1073,1078,1091,1097,1102,1107,1129,1132,1138,1143,1148,1161,1166,1184,1189,1207,1210,1216,1221,1230,1235,1238,1244,1367,1370,1376,1438,1441,1445,1450],{"type":25,"tag":26,"props":559,"children":561},{"id":560},"lcp-优化从理论到实践",[562],{"type":30,"value":546},{"type":25,"tag":38,"props":564,"children":565},{},[566],{"type":30,"value":567},"LCP（Largest Contentful Paint）是 Core Web Vitals 中最能代表“用户主观感受”的指标之一：它近似回答了“页面主要内容什么时候真正出来”。",{"type":25,"tag":38,"props":569,"children":570},{},[571],{"type":30,"value":572},"很多团队优化 LCP 的方式是：",{"type":25,"tag":433,"props":574,"children":575},{},[576,581,586],{"type":25,"tag":367,"props":577,"children":578},{},[579],{"type":30,"value":580},"“把图片压一压”",{"type":25,"tag":367,"props":582,"children":583},{},[584],{"type":30,"value":585},"“上 CDN”",{"type":25,"tag":367,"props":587,"children":588},{},[589],{"type":30,"value":590},"“开 SSR”",{"type":25,"tag":38,"props":592,"children":593},{},[594],{"type":30,"value":595},"这些手段可能有效，但也经常无效——因为你没搞清楚：",{"type":25,"tag":433,"props":597,"children":598},{},[599,611],{"type":25,"tag":367,"props":600,"children":601},{},[602,604,609],{"type":30,"value":603},"LCP 的",{"type":25,"tag":78,"props":605,"children":606},{},[607],{"type":30,"value":608},"候选元素",{"type":30,"value":610},"到底是谁？",{"type":25,"tag":367,"props":612,"children":613},{},[614],{"type":30,"value":615},"LCP 的时间到底卡在：网络、解析、布局、绘制还是 JS？",{"type":25,"tag":38,"props":617,"children":618},{},[619],{"type":30,"value":620},"这篇文章按“你能在生产上稳定把 LCP 做到好”为目标，给出：",{"type":25,"tag":433,"props":622,"children":623},{},[624,629,634],{"type":25,"tag":367,"props":625,"children":626},{},[627],{"type":30,"value":628},"一套诊断流程（从现象到根因）",{"type":25,"tag":367,"props":630,"children":631},{},[632],{"type":30,"value":633},"一套常见根因 → 对应策略的映射",{"type":25,"tag":367,"props":635,"children":636},{},[637],{"type":30,"value":638},"可落地的优化手段与检查清单",{"type":25,"tag":640,"props":641,"children":642},"hr",{},[],{"type":25,"tag":26,"props":644,"children":646},{"id":645},"_1-lcp-的本质不是首屏渲染而是最大内容出现",[647],{"type":30,"value":648},"1. LCP 的本质：不是“首屏渲染”，而是“最大内容出现”",{"type":25,"tag":38,"props":650,"children":651},{},[652],{"type":30,"value":653},"浏览器会从候选元素里选一个“最大内容元素”作为 LCP 候选，常见类型包括：",{"type":25,"tag":433,"props":655,"children":656},{},[657,666,677],{"type":25,"tag":367,"props":658,"children":659},{},[660],{"type":25,"tag":49,"props":661,"children":663},{"className":662},[],[664],{"type":30,"value":665},"img",{"type":25,"tag":367,"props":667,"children":668},{},[669,675],{"type":25,"tag":49,"props":670,"children":672},{"className":671},[],[673],{"type":30,"value":674},"image",{"type":30,"value":676}," 的背景图（某些情况下）",{"type":25,"tag":367,"props":678,"children":679},{},[680,682,688],{"type":30,"value":681},"大块文本（如 ",{"type":25,"tag":49,"props":683,"children":685},{"className":684},[],[686],{"type":30,"value":687},"h1",{"type":30,"value":689},"/正文块）",{"type":25,"tag":38,"props":691,"children":692},{},[693],{"type":30,"value":694},"LCP 的时间点是：这个最大元素被绘制到屏幕上的时间。",{"type":25,"tag":38,"props":696,"children":697},{},[698],{"type":30,"value":699},"关键：LCP 不是你以为的“所有内容都 ready”。它只关注“最大那个”。",{"type":25,"tag":640,"props":701,"children":702},{},[],{"type":25,"tag":26,"props":704,"children":706},{"id":705},"_2-先做识别你的-lcp-元素是谁",[707],{"type":30,"value":708},"2. 先做识别：你的 LCP 元素是谁？",{"type":25,"tag":38,"props":710,"children":711},{},[712],{"type":30,"value":713},"在 Chrome DevTools：",{"type":25,"tag":433,"props":715,"children":716},{},[717,722],{"type":25,"tag":367,"props":718,"children":719},{},[720],{"type":30,"value":721},"Performance 面板 → Web Vitals",{"type":25,"tag":367,"props":723,"children":724},{},[725],{"type":30,"value":726},"或 Lighthouse 报告里会告诉你 LCP 元素",{"type":25,"tag":38,"props":728,"children":729},{},[730],{"type":30,"value":731},"你要记录两件事：",{"type":25,"tag":433,"props":733,"children":734},{},[735,740],{"type":25,"tag":367,"props":736,"children":737},{},[738],{"type":30,"value":739},"LCP 元素类型（图片/文本）",{"type":25,"tag":367,"props":741,"children":742},{},[743],{"type":30,"value":744},"LCP 元素来源（HTML 直出、JS 渲染、背景图、第三方）",{"type":25,"tag":38,"props":746,"children":747},{},[748],{"type":30,"value":749},"因为两类 LCP 的优化路线完全不同：",{"type":25,"tag":433,"props":751,"children":752},{},[753,763],{"type":25,"tag":367,"props":754,"children":755},{},[756,761],{"type":25,"tag":78,"props":757,"children":758},{},[759],{"type":30,"value":760},"图片 LCP",{"type":30,"value":762},"：网络 + 解码 + 优先级",{"type":25,"tag":367,"props":764,"children":765},{},[766,771],{"type":25,"tag":78,"props":767,"children":768},{},[769],{"type":30,"value":770},"文本 LCP",{"type":30,"value":772},"：CSS/字体阻塞 + layout + 渲染",{"type":25,"tag":640,"props":774,"children":775},{},[],{"type":25,"tag":26,"props":777,"children":779},{"id":778},"_3-分解-lcp把总时间拆成可行动的部分",[780],{"type":30,"value":781},"3. 分解 LCP：把“总时间”拆成可行动的部分",{"type":25,"tag":38,"props":783,"children":784},{},[785],{"type":30,"value":786},"一个可用的分解模型：",{"type":25,"tag":38,"props":788,"children":789},{},[790],{"type":30,"value":791},"$$\nLCP \\approx TTFB + \\text{资源发现/调度} + \\text{下载} + \\text{解码/布局/绘制}\n$$",{"type":25,"tag":38,"props":793,"children":794},{},[795],{"type":30,"value":796},"你不需要完全精确，但必须能回答：",{"type":25,"tag":433,"props":798,"children":799},{},[800,805,810,815],{"type":25,"tag":367,"props":801,"children":802},{},[803],{"type":30,"value":804},"慢在服务器？（TTFB）",{"type":25,"tag":367,"props":806,"children":807},{},[808],{"type":30,"value":809},"慢在资源发现？（preload/优先级）",{"type":25,"tag":367,"props":811,"children":812},{},[813],{"type":30,"value":814},"慢在下载？（图片太大、带宽、CDN）",{"type":25,"tag":367,"props":816,"children":817},{},[818],{"type":30,"value":819},"慢在主线程？（长任务、渲染阻塞）",{"type":25,"tag":640,"props":821,"children":822},{},[],{"type":25,"tag":26,"props":824,"children":826},{"id":825},"_4-诊断流程生产可用版",[827],{"type":30,"value":828},"4. 诊断流程（生产可用版）",{"type":25,"tag":60,"props":830,"children":832},{"id":831},"step-1看字段真实用户的-lcp-分布",[833],{"type":30,"value":834},"Step 1：看字段——真实用户的 LCP 分布",{"type":25,"tag":38,"props":836,"children":837},{},[838],{"type":30,"value":839},"如果你有 RUM：",{"type":25,"tag":433,"props":841,"children":842},{},[843,848],{"type":25,"tag":367,"props":844,"children":845},{},[846],{"type":30,"value":847},"p75 LCP",{"type":25,"tag":367,"props":849,"children":850},{},[851],{"type":30,"value":852},"按路由/地区/设备档位切片",{"type":25,"tag":38,"props":854,"children":855},{},[856],{"type":30,"value":857},"你会发现：",{"type":25,"tag":433,"props":859,"children":860},{},[861,866],{"type":25,"tag":367,"props":862,"children":863},{},[864],{"type":30,"value":865},"可能只有低端机慢",{"type":25,"tag":367,"props":867,"children":868},{},[869],{"type":30,"value":870},"或只有某地区慢（CDN/回源）",{"type":25,"tag":60,"props":872,"children":874},{"id":873},"step-2看实验室复现-标记-lcp-元素",[875],{"type":30,"value":876},"Step 2：看实验室——复现 + 标记 LCP 元素",{"type":25,"tag":38,"props":878,"children":879},{},[880],{"type":30,"value":881},"用固定网络/CPU 限制：",{"type":25,"tag":433,"props":883,"children":884},{},[885,890],{"type":25,"tag":367,"props":886,"children":887},{},[888],{"type":30,"value":889},"Network: Fast 3G / Slow 4G",{"type":25,"tag":367,"props":891,"children":892},{},[893],{"type":30,"value":894},"CPU: 4x slowdown",{"type":25,"tag":60,"props":896,"children":898},{"id":897},"step-3拆链路ttfb-资源-主线程",[899],{"type":30,"value":900},"Step 3：拆链路——TTFB / 资源 / 主线程",{"type":25,"tag":433,"props":902,"children":903},{},[904,909,914],{"type":25,"tag":367,"props":905,"children":906},{},[907],{"type":30,"value":908},"TTFB 高：先查服务端、缓存、回源",{"type":25,"tag":367,"props":910,"children":911},{},[912],{"type":30,"value":913},"下载慢：查图片体积、格式、CDN、优先级",{"type":25,"tag":367,"props":915,"children":916},{},[917],{"type":30,"value":918},"主线程忙：查长任务、hydration、bundle",{"type":25,"tag":640,"props":920,"children":921},{},[],{"type":25,"tag":26,"props":923,"children":925},{"id":924},"_5-图片型-lcp优先级与体积是第一性",[926],{"type":30,"value":927},"5. 图片型 LCP：优先级与体积是第一性",{"type":25,"tag":60,"props":929,"children":931},{"id":930},"_51-把-lcp-图片变小但不要牺牲清晰度",[932],{"type":30,"value":933},"5.1 把 LCP 图片“变小”但不要牺牲清晰度",{"type":25,"tag":38,"props":935,"children":936},{},[937],{"type":30,"value":938},"实践优先级：",{"type":25,"tag":363,"props":940,"children":941},{},[942,947,952],{"type":25,"tag":367,"props":943,"children":944},{},[945],{"type":30,"value":946},"用现代格式：AVIF/WebP",{"type":25,"tag":367,"props":948,"children":949},{},[950],{"type":30,"value":951},"合理尺寸：不要把 2000px 的图缩到 400px 显示",{"type":25,"tag":367,"props":953,"children":954},{},[955],{"type":30,"value":956},"质量参数：基于视觉对比选一个阈值",{"type":25,"tag":60,"props":958,"children":960},{"id":959},"_52-确保-lcp-图片不是懒加载",[961],{"type":30,"value":962},"5.2 确保 LCP 图片不是懒加载",{"type":25,"tag":38,"props":964,"children":965},{},[966,968,974],{"type":30,"value":967},"LCP 图片如果被 ",{"type":25,"tag":49,"props":969,"children":971},{"className":970},[],[972],{"type":30,"value":973},"loading=\"lazy\"",{"type":30,"value":975},"，通常会变慢。",{"type":25,"tag":433,"props":977,"children":978},{},[979,990],{"type":25,"tag":367,"props":980,"children":981},{},[982,984],{"type":30,"value":983},"LCP 相关图片：",{"type":25,"tag":49,"props":985,"children":987},{"className":986},[],[988],{"type":30,"value":989},"loading=\"eager\"",{"type":25,"tag":367,"props":991,"children":992},{},[993],{"type":30,"value":994},"或显式 preload",{"type":25,"tag":60,"props":996,"children":998},{"id":997},"_53-明确资源优先级preload-fetchpriority",[999],{"type":30,"value":1000},"5.3 明确资源优先级（preload / fetchpriority）",{"type":25,"tag":38,"props":1002,"children":1003},{},[1004],{"type":30,"value":1005},"对 LCP 图片：",{"type":25,"tag":44,"props":1007,"children":1010},{"className":1008,"code":1009,"language":86,"meta":7},[88],"\u003Clink rel=\"preload\" as=\"image\" href=\"/hero.avif\" />\n",[1011],{"type":25,"tag":49,"props":1012,"children":1013},{"__ignoreMap":7},[1014],{"type":30,"value":1009},{"type":25,"tag":38,"props":1016,"children":1017},{},[1018],{"type":30,"value":1019},"或（浏览器支持时）：",{"type":25,"tag":44,"props":1021,"children":1024},{"className":1022,"code":1023,"language":86,"meta":7},[88],"\u003Cimg src=\"/hero.avif\" fetchpriority=\"high\" />\n",[1025],{"type":25,"tag":49,"props":1026,"children":1027},{"__ignoreMap":7},[1028],{"type":30,"value":1023},{"type":25,"tag":38,"props":1030,"children":1031},{},[1032],{"type":30,"value":1033},"目标是：让浏览器更早发现它、更早调度它。",{"type":25,"tag":60,"props":1035,"children":1037},{"id":1036},"_54-cdn减少-rtt-与回源",[1038],{"type":30,"value":1039},"5.4 CDN：减少 RTT 与回源",{"type":25,"tag":433,"props":1041,"children":1042},{},[1043,1048,1053],{"type":25,"tag":367,"props":1044,"children":1045},{},[1046],{"type":30,"value":1047},"图片必须走 CDN",{"type":25,"tag":367,"props":1049,"children":1050},{},[1051],{"type":30,"value":1052},"开启压缩、HTTP/2/3",{"type":25,"tag":367,"props":1054,"children":1055},{},[1056],{"type":30,"value":1057},"确保 cache hit",{"type":25,"tag":640,"props":1059,"children":1060},{},[],{"type":25,"tag":26,"props":1062,"children":1064},{"id":1063},"_6-文本型-lcpcss字体阻塞是常见杀手",[1065],{"type":30,"value":1066},"6. 文本型 LCP：CSS/字体阻塞是常见杀手",{"type":25,"tag":60,"props":1068,"children":1070},{"id":1069},"_61-关键-css-与阻塞",[1071],{"type":30,"value":1072},"6.1 关键 CSS 与阻塞",{"type":25,"tag":38,"props":1074,"children":1075},{},[1076],{"type":30,"value":1077},"如果你的主 CSS 很大且阻塞：",{"type":25,"tag":433,"props":1079,"children":1080},{},[1081,1086],{"type":25,"tag":367,"props":1082,"children":1083},{},[1084],{"type":30,"value":1085},"拆关键 CSS",{"type":25,"tag":367,"props":1087,"children":1088},{},[1089],{"type":30,"value":1090},"延后非关键 CSS",{"type":25,"tag":60,"props":1092,"children":1094},{"id":1093},"_62-字体foitfout-与-lcp",[1095],{"type":30,"value":1096},"6.2 字体：FOIT/FOUT 与 LCP",{"type":25,"tag":38,"props":1098,"children":1099},{},[1100],{"type":30,"value":1101},"大标题是文本 LCP 时，字体策略会直接影响 LCP。",{"type":25,"tag":38,"props":1103,"children":1104},{},[1105],{"type":30,"value":1106},"建议：",{"type":25,"tag":433,"props":1108,"children":1109},{},[1110,1119,1124],{"type":25,"tag":367,"props":1111,"children":1112},{},[1113],{"type":25,"tag":49,"props":1114,"children":1116},{"className":1115},[],[1117],{"type":30,"value":1118},"font-display: swap",{"type":25,"tag":367,"props":1120,"children":1121},{},[1122],{"type":30,"value":1123},"对关键字体文件 preload",{"type":25,"tag":367,"props":1125,"children":1126},{},[1127],{"type":30,"value":1128},"子集化（只保留需要的字形）",{"type":25,"tag":640,"props":1130,"children":1131},{},[],{"type":25,"tag":26,"props":1133,"children":1135},{"id":1134},"_7-ssrcsr-与-hydration别让-js-抢走首屏",[1136],{"type":30,"value":1137},"7. SSR/CSR 与 Hydration：别让 JS 抢走首屏",{"type":25,"tag":38,"props":1139,"children":1140},{},[1141],{"type":30,"value":1142},"SSR 通常能改善 LCP，但并非必然。",{"type":25,"tag":38,"props":1144,"children":1145},{},[1146],{"type":30,"value":1147},"常见反例：",{"type":25,"tag":433,"props":1149,"children":1150},{},[1151,1156],{"type":25,"tag":367,"props":1152,"children":1153},{},[1154],{"type":30,"value":1155},"SSR 直出了 HTML",{"type":25,"tag":367,"props":1157,"children":1158},{},[1159],{"type":30,"value":1160},"但首屏仍要等一堆 JS 执行、样式计算、hydrate 才能稳定",{"type":25,"tag":38,"props":1162,"children":1163},{},[1164],{"type":30,"value":1165},"你需要关注：",{"type":25,"tag":433,"props":1167,"children":1168},{},[1169,1174,1179],{"type":25,"tag":367,"props":1170,"children":1171},{},[1172],{"type":30,"value":1173},"首屏 bundle 体积",{"type":25,"tag":367,"props":1175,"children":1176},{},[1177],{"type":30,"value":1178},"hydration 的长任务",{"type":25,"tag":367,"props":1180,"children":1181},{},[1182],{"type":30,"value":1183},"第三方脚本（埋点、广告）阻塞",{"type":25,"tag":38,"props":1185,"children":1186},{},[1187],{"type":30,"value":1188},"实践建议：",{"type":25,"tag":433,"props":1190,"children":1191},{},[1192,1197,1202],{"type":25,"tag":367,"props":1193,"children":1194},{},[1195],{"type":30,"value":1196},"首屏只 hydrate 必要组件",{"type":25,"tag":367,"props":1198,"children":1199},{},[1200],{"type":30,"value":1201},"大型交互组件延后",{"type":25,"tag":367,"props":1203,"children":1204},{},[1205],{"type":30,"value":1206},"第三方脚本延迟加载",{"type":25,"tag":640,"props":1208,"children":1209},{},[],{"type":25,"tag":26,"props":1211,"children":1213},{"id":1212},"_8-资源调度preconnect-dns-prefetch",[1214],{"type":30,"value":1215},"8. 资源调度：preconnect / dns-prefetch",{"type":25,"tag":38,"props":1217,"children":1218},{},[1219],{"type":30,"value":1220},"如果 LCP 资源来自第三方域名：",{"type":25,"tag":44,"props":1222,"children":1225},{"className":1223,"code":1224,"language":86,"meta":7},[88],"\u003Clink rel=\"preconnect\" href=\"https://cdn.example.com\" />\n",[1226],{"type":25,"tag":49,"props":1227,"children":1228},{"__ignoreMap":7},[1229],{"type":30,"value":1224},{"type":25,"tag":38,"props":1231,"children":1232},{},[1233],{"type":30,"value":1234},"这能减少握手开销。",{"type":25,"tag":640,"props":1236,"children":1237},{},[],{"type":25,"tag":26,"props":1239,"children":1241},{"id":1240},"_9-常见根因-对应策略速查表",[1242],{"type":30,"value":1243},"9. 常见根因 → 对应策略速查表",{"type":25,"tag":1245,"props":1246,"children":1247},"table",{},[1248,1272],{"type":25,"tag":1249,"props":1250,"children":1251},"thead",{},[1252],{"type":25,"tag":1253,"props":1254,"children":1255},"tr",{},[1256,1262,1267],{"type":25,"tag":1257,"props":1258,"children":1259},"th",{},[1260],{"type":30,"value":1261},"根因",{"type":25,"tag":1257,"props":1263,"children":1264},{},[1265],{"type":30,"value":1266},"现象",{"type":25,"tag":1257,"props":1268,"children":1269},{},[1270],{"type":30,"value":1271},"典型修复",{"type":25,"tag":1273,"props":1274,"children":1275},"tbody",{},[1276,1295,1313,1331,1349],{"type":25,"tag":1253,"props":1277,"children":1278},{},[1279,1285,1290],{"type":25,"tag":1280,"props":1281,"children":1282},"td",{},[1283],{"type":30,"value":1284},"TTFB 高",{"type":25,"tag":1280,"props":1286,"children":1287},{},[1288],{"type":30,"value":1289},"所有资源都晚开始",{"type":25,"tag":1280,"props":1291,"children":1292},{},[1293],{"type":30,"value":1294},"服务端缓存、CDN、减少回源",{"type":25,"tag":1253,"props":1296,"children":1297},{},[1298,1303,1308],{"type":25,"tag":1280,"props":1299,"children":1300},{},[1301],{"type":30,"value":1302},"LCP 图片太大",{"type":25,"tag":1280,"props":1304,"children":1305},{},[1306],{"type":30,"value":1307},"下载阶段耗时长",{"type":25,"tag":1280,"props":1309,"children":1310},{},[1311],{"type":30,"value":1312},"AVIF/WebP、尺寸裁切、CDN",{"type":25,"tag":1253,"props":1314,"children":1315},{},[1316,1321,1326],{"type":25,"tag":1280,"props":1317,"children":1318},{},[1319],{"type":30,"value":1320},"LCP 图片优先级低",{"type":25,"tag":1280,"props":1322,"children":1323},{},[1324],{"type":30,"value":1325},"LCP 资源很晚才发起",{"type":25,"tag":1280,"props":1327,"children":1328},{},[1329],{"type":30,"value":1330},"preload/fetchpriority",{"type":25,"tag":1253,"props":1332,"children":1333},{},[1334,1339,1344],{"type":25,"tag":1280,"props":1335,"children":1336},{},[1337],{"type":30,"value":1338},"字体阻塞",{"type":25,"tag":1280,"props":1340,"children":1341},{},[1342],{"type":30,"value":1343},"文本 LCP 晚出现",{"type":25,"tag":1280,"props":1345,"children":1346},{},[1347],{"type":30,"value":1348},"font-display: swap + preload",{"type":25,"tag":1253,"props":1350,"children":1351},{},[1352,1357,1362],{"type":25,"tag":1280,"props":1353,"children":1354},{},[1355],{"type":30,"value":1356},"主线程长任务",{"type":25,"tag":1280,"props":1358,"children":1359},{},[1360],{"type":30,"value":1361},"LCP 前 JS 很忙",{"type":25,"tag":1280,"props":1363,"children":1364},{},[1365],{"type":30,"value":1366},"拆包、延后非关键组件/第三方",{"type":25,"tag":640,"props":1368,"children":1369},{},[],{"type":25,"tag":26,"props":1371,"children":1373},{"id":1372},"_10-上线检查清单",[1374],{"type":30,"value":1375},"10. 上线检查清单",{"type":25,"tag":433,"props":1377,"children":1380},{"className":1378},[1379],"contains-task-list",[1381,1393,1402,1411,1420,1429],{"type":25,"tag":367,"props":1382,"children":1385},{"className":1383},[1384],"task-list-item",[1386,1391],{"type":25,"tag":1387,"props":1388,"children":1390},"input",{"disabled":19,"type":1389},"checkbox",[],{"type":30,"value":1392}," LCP 元素是否明确（图片/文本）",{"type":25,"tag":367,"props":1394,"children":1396},{"className":1395},[1384],[1397,1400],{"type":25,"tag":1387,"props":1398,"children":1399},{"disabled":19,"type":1389},[],{"type":30,"value":1401}," LCP 资源是否高优先级（preload/priority）",{"type":25,"tag":367,"props":1403,"children":1405},{"className":1404},[1384],[1406,1409],{"type":25,"tag":1387,"props":1407,"children":1408},{"disabled":19,"type":1389},[],{"type":30,"value":1410}," LCP 图片是否避免 lazy",{"type":25,"tag":367,"props":1412,"children":1414},{"className":1413},[1384],[1415,1418],{"type":25,"tag":1387,"props":1416,"children":1417},{"disabled":19,"type":1389},[],{"type":30,"value":1419}," 是否有 RUM 维度切片（设备/地区/版本）",{"type":25,"tag":367,"props":1421,"children":1423},{"className":1422},[1384],[1424,1427],{"type":25,"tag":1387,"props":1425,"children":1426},{"disabled":19,"type":1389},[],{"type":30,"value":1428}," TTFB 是否受控（缓存/回源）",{"type":25,"tag":367,"props":1430,"children":1432},{"className":1431},[1384],[1433,1436],{"type":25,"tag":1387,"props":1434,"children":1435},{"disabled":19,"type":1389},[],{"type":30,"value":1437}," 第三方脚本是否延后",{"type":25,"tag":640,"props":1439,"children":1440},{},[],{"type":25,"tag":26,"props":1442,"children":1443},{"id":354},[1444],{"type":30,"value":354},{"type":25,"tag":38,"props":1446,"children":1447},{},[1448],{"type":30,"value":1449},"LCP 优化的核心是：",{"type":25,"tag":433,"props":1451,"children":1452},{},[1453,1458,1463],{"type":25,"tag":367,"props":1454,"children":1455},{},[1456],{"type":30,"value":1457},"先识别 LCP 元素",{"type":25,"tag":367,"props":1459,"children":1460},{},[1461],{"type":30,"value":1462},"再把 LCP 拆成链路各段",{"type":25,"tag":367,"props":1464,"children":1465},{},[1466],{"type":30,"value":1467},"针对性优化（资源优先级、体积、TTFB、主线程）",{"title":7,"searchDepth":502,"depth":502,"links":1469},[1470,1471,1472,1473,1474,1479,1485,1489,1490,1491,1492,1493],{"id":560,"depth":505,"text":546},{"id":645,"depth":505,"text":648},{"id":705,"depth":505,"text":708},{"id":778,"depth":505,"text":781},{"id":825,"depth":505,"text":828,"children":1475},[1476,1477,1478],{"id":831,"depth":502,"text":834},{"id":873,"depth":502,"text":876},{"id":897,"depth":502,"text":900},{"id":924,"depth":505,"text":927,"children":1480},[1481,1482,1483,1484],{"id":930,"depth":502,"text":933},{"id":959,"depth":502,"text":962},{"id":997,"depth":502,"text":1000},{"id":1036,"depth":502,"text":1039},{"id":1063,"depth":505,"text":1066,"children":1486},[1487,1488],{"id":1069,"depth":502,"text":1072},{"id":1093,"depth":502,"text":1096},{"id":1134,"depth":505,"text":1137},{"id":1212,"depth":505,"text":1215},{"id":1240,"depth":505,"text":1243},{"id":1372,"depth":505,"text":1375},{"id":354,"depth":505,"text":354},"content:topics:performance:lcp-optimization-theory-practice.md","topics/performance/lcp-optimization-theory-practice.md","topics/performance/lcp-optimization-theory-practice",{"_path":1498,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":1499,"description":1500,"date":548,"topic":5,"author":11,"tags":1501,"image":1506,"featured":19,"readingTime":1507,"body":1508,"_type":537,"_id":2823,"_source":539,"_file":2824,"_stem":2825,"_extension":542},"/topics/performance/rum-real-user-monitoring-design","RUM 真实用户监控方案设计","从指标体系、采样策略、上报链路到数据建模与告警，完整设计一套可落地的 RUM（Real User Monitoring）体系，解决“线上性能到底怎样”的问题。",[1502,1503,1504,551,1505],"性能监控","RUM","可观测性","采样","/images/topics/performance/rum.jpg",22,{"type":22,"children":1509,"toc":2785},[1510,1515,1527,1545,1557,1595,1598,1604,1609,1618,1623,1656,1661,1664,1670,1676,1681,1709,1714,1732,1738,1743,1748,1774,1779,1787,1790,1796,1801,1807,1856,1861,1867,1872,1890,1896,1901,1914,1919,1932,1935,1941,1947,1952,1973,1978,1991,1997,2010,2015,2157,2162,2175,2178,2184,2204,2230,2236,2240,2258,2264,2295,2301,2306,2310,2336,2339,2345,2351,2356,2415,2420,2426,2431,2444,2449,2476,2482,2487,2492,2505,2510,2513,2519,2524,2529,2562,2567,2572,2585,2588,2594,2600,2605,2623,2629,2634,2647,2653,2658,2671,2674,2680,2703,2708,2711,2717,2722,2745,2748,2752,2757],{"type":25,"tag":26,"props":1511,"children":1513},{"id":1512},"rum-真实用户监控方案设计",[1514],{"type":30,"value":1499},{"type":25,"tag":38,"props":1516,"children":1517},{},[1518,1520,1525],{"type":30,"value":1519},"如果说 Lighthouse/Performance 面板告诉你“理论上能跑多快”，那么 ",{"type":25,"tag":78,"props":1521,"children":1522},{},[1523],{"type":30,"value":1524},"RUM（Real User Monitoring）",{"type":30,"value":1526}," 才能回答：",{"type":25,"tag":433,"props":1528,"children":1529},{},[1530,1535,1540],{"type":25,"tag":367,"props":1531,"children":1532},{},[1533],{"type":30,"value":1534},"真实用户到底慢在哪？",{"type":25,"tag":367,"props":1536,"children":1537},{},[1538],{"type":30,"value":1539},"慢是“某地区/某机型/某版本/某网络”的问题还是全局问题？",{"type":25,"tag":367,"props":1541,"children":1542},{},[1543],{"type":30,"value":1544},"优化上线后是否真的变好？有无回归？",{"type":25,"tag":38,"props":1546,"children":1547},{},[1548,1550,1555],{"type":30,"value":1549},"这篇文章不讲“把 SDK 丢进去就完事”，而是站在",{"type":25,"tag":78,"props":1551,"children":1552},{},[1553],{"type":30,"value":1554},"体系设计",{"type":30,"value":1556},"角度，从 0 到 1 设计一套能长期演进的 RUM：",{"type":25,"tag":433,"props":1558,"children":1559},{},[1560,1565,1570,1575,1580,1585,1590],{"type":25,"tag":367,"props":1561,"children":1562},{},[1563],{"type":30,"value":1564},"指标体系（Core Web Vitals + 业务指标）",{"type":25,"tag":367,"props":1566,"children":1567},{},[1568],{"type":30,"value":1569},"采样与成本控制",{"type":25,"tag":367,"props":1571,"children":1572},{},[1573],{"type":30,"value":1574},"上报协议与可靠性",{"type":25,"tag":367,"props":1576,"children":1577},{},[1578],{"type":30,"value":1579},"事件模型与数据仓库建模",{"type":25,"tag":367,"props":1581,"children":1582},{},[1583],{"type":30,"value":1584},"分析维度（分桶）与聚合",{"type":25,"tag":367,"props":1586,"children":1587},{},[1588],{"type":30,"value":1589},"告警与 SLO",{"type":25,"tag":367,"props":1591,"children":1592},{},[1593],{"type":30,"value":1594},"隐私与合规",{"type":25,"tag":640,"props":1596,"children":1597},{},[],{"type":25,"tag":26,"props":1599,"children":1601},{"id":1600},"_1-先定目标rum-的产品定义",[1602],{"type":30,"value":1603},"1. 先定目标：RUM 的“产品定义”",{"type":25,"tag":38,"props":1605,"children":1606},{},[1607],{"type":30,"value":1608},"在做任何技术实现前，你必须把目标写成一句可验证的话：",{"type":25,"tag":1610,"props":1611,"children":1612},"blockquote",{},[1613],{"type":25,"tag":38,"props":1614,"children":1615},{},[1616],{"type":30,"value":1617},"我们要用 RUM 在 7 天内发现性能回归，并能定位到“哪类用户/哪条链路/哪个版本”导致 INP 恶化。",{"type":25,"tag":38,"props":1619,"children":1620},{},[1621],{"type":30,"value":1622},"RUM 的价值通常分三层：",{"type":25,"tag":363,"props":1624,"children":1625},{},[1626,1636,1646],{"type":25,"tag":367,"props":1627,"children":1628},{},[1629,1634],{"type":25,"tag":78,"props":1630,"children":1631},{},[1632],{"type":30,"value":1633},"可见性",{"type":30,"value":1635},"：上线后真实体验有数据",{"type":25,"tag":367,"props":1637,"children":1638},{},[1639,1644],{"type":25,"tag":78,"props":1640,"children":1641},{},[1642],{"type":30,"value":1643},"可定位",{"type":30,"value":1645},"：能切片（地区/设备/页面/版本）",{"type":25,"tag":367,"props":1647,"children":1648},{},[1649,1654],{"type":25,"tag":78,"props":1650,"children":1651},{},[1652],{"type":30,"value":1653},"可闭环",{"type":30,"value":1655},"：告警 → 归因 → 修复 → 复盘",{"type":25,"tag":38,"props":1657,"children":1658},{},[1659],{"type":30,"value":1660},"如果你只做第 1 层，它会退化成“报表”。",{"type":25,"tag":640,"props":1662,"children":1663},{},[],{"type":25,"tag":26,"props":1665,"children":1667},{"id":1666},"_2-指标体系不要只盯-core-web-vitals",[1668],{"type":30,"value":1669},"2. 指标体系：不要只盯 Core Web Vitals",{"type":25,"tag":60,"props":1671,"children":1673},{"id":1672},"_21-必选core-web-vitals-补充指标",[1674],{"type":30,"value":1675},"2.1 必选：Core Web Vitals + 补充指标",{"type":25,"tag":38,"props":1677,"children":1678},{},[1679],{"type":30,"value":1680},"建议最小集合：",{"type":25,"tag":433,"props":1682,"children":1683},{},[1684,1689,1694,1699,1704],{"type":25,"tag":367,"props":1685,"children":1686},{},[1687],{"type":30,"value":1688},"LCP（最大内容绘制）",{"type":25,"tag":367,"props":1690,"children":1691},{},[1692],{"type":30,"value":1693},"INP（交互到下一次绘制）",{"type":25,"tag":367,"props":1695,"children":1696},{},[1697],{"type":30,"value":1698},"CLS（布局偏移）",{"type":25,"tag":367,"props":1700,"children":1701},{},[1702],{"type":30,"value":1703},"TTFB（服务端首字节）",{"type":25,"tag":367,"props":1705,"children":1706},{},[1707],{"type":30,"value":1708},"FCP（首屏内容绘制，辅助解释 LCP）",{"type":25,"tag":38,"props":1710,"children":1711},{},[1712],{"type":30,"value":1713},"但这还不够，你还需要“解释型指标”：",{"type":25,"tag":433,"props":1715,"children":1716},{},[1717,1722,1727],{"type":25,"tag":367,"props":1718,"children":1719},{},[1720],{"type":30,"value":1721},"Long Task（长任务）统计（数量/总时长/Top 贡献）",{"type":25,"tag":367,"props":1723,"children":1724},{},[1725],{"type":30,"value":1726},"Resource timing（关键资源耗时）",{"type":25,"tag":367,"props":1728,"children":1729},{},[1730],{"type":30,"value":1731},"JS 错误/资源错误（与性能回归强相关）",{"type":25,"tag":60,"props":1733,"children":1735},{"id":1734},"_22-业务指标把性能与转化绑定",[1736],{"type":30,"value":1737},"2.2 业务指标：把性能与转化绑定",{"type":25,"tag":38,"props":1739,"children":1740},{},[1741],{"type":30,"value":1742},"纯性能指标很容易变成“工程师自嗨”。",{"type":25,"tag":38,"props":1744,"children":1745},{},[1746],{"type":30,"value":1747},"建议定义 1~3 个业务级指标：",{"type":25,"tag":433,"props":1749,"children":1750},{},[1751,1756,1769],{"type":25,"tag":367,"props":1752,"children":1753},{},[1754],{"type":30,"value":1755},"首次有效交互时间（例如搜索可用、下单可点）",{"type":25,"tag":367,"props":1757,"children":1758},{},[1759,1761,1767],{"type":30,"value":1760},"首次关键接口完成（例如 ",{"type":25,"tag":49,"props":1762,"children":1764},{"className":1763},[],[1765],{"type":30,"value":1766},"/api/me",{"type":30,"value":1768}," 完成）",{"type":25,"tag":367,"props":1770,"children":1771},{},[1772],{"type":30,"value":1773},"转化漏斗关键点耗时（例如“加入购物车”到“支付成功”）",{"type":25,"tag":38,"props":1775,"children":1776},{},[1777],{"type":30,"value":1778},"这些指标让你能回答：",{"type":25,"tag":433,"props":1780,"children":1781},{},[1782],{"type":25,"tag":367,"props":1783,"children":1784},{},[1785],{"type":30,"value":1786},"“慢 200ms 对业务有没有影响？”",{"type":25,"tag":640,"props":1788,"children":1789},{},[],{"type":25,"tag":26,"props":1791,"children":1793},{"id":1792},"_3-采样策略rum-成败的-50",[1794],{"type":30,"value":1795},"3. 采样策略：RUM 成败的 50%",{"type":25,"tag":38,"props":1797,"children":1798},{},[1799],{"type":30,"value":1800},"RUM 的难点不是“能不能采”，而是“采多少、怎么采、怎么省钱”。",{"type":25,"tag":60,"props":1802,"children":1804},{"id":1803},"_31-两种采样会话采样-vs-事件采样",[1805],{"type":30,"value":1806},"3.1 两种采样：会话采样 vs 事件采样",{"type":25,"tag":433,"props":1808,"children":1809},{},[1810,1833],{"type":25,"tag":367,"props":1811,"children":1812},{},[1813,1818,1820],{"type":25,"tag":78,"props":1814,"children":1815},{},[1816],{"type":30,"value":1817},"会话采样",{"type":30,"value":1819},"：进入站点就决定该会话是否采集全部指标",{"type":25,"tag":433,"props":1821,"children":1822},{},[1823,1828],{"type":25,"tag":367,"props":1824,"children":1825},{},[1826],{"type":30,"value":1827},"优点：链路完整、便于归因",{"type":25,"tag":367,"props":1829,"children":1830},{},[1831],{"type":30,"value":1832},"缺点：成本高",{"type":25,"tag":367,"props":1834,"children":1835},{},[1836,1841,1843],{"type":25,"tag":78,"props":1837,"children":1838},{},[1839],{"type":30,"value":1840},"事件采样",{"type":30,"value":1842},"：每种事件独立采样（例如性能 10%、错误 100%）",{"type":25,"tag":433,"props":1844,"children":1845},{},[1846,1851],{"type":25,"tag":367,"props":1847,"children":1848},{},[1849],{"type":30,"value":1850},"优点：更灵活",{"type":25,"tag":367,"props":1852,"children":1853},{},[1854],{"type":30,"value":1855},"缺点：同一会话数据不完整",{"type":25,"tag":38,"props":1857,"children":1858},{},[1859],{"type":30,"value":1860},"生产建议：两者结合。",{"type":25,"tag":60,"props":1862,"children":1864},{"id":1863},"_32-分层采样建议",[1865],{"type":30,"value":1866},"3.2 分层采样建议",{"type":25,"tag":38,"props":1868,"children":1869},{},[1870],{"type":30,"value":1871},"一个可用的默认配置：",{"type":25,"tag":433,"props":1873,"children":1874},{},[1875,1880,1885],{"type":25,"tag":367,"props":1876,"children":1877},{},[1878],{"type":30,"value":1879},"性能指标：10%（按会话）",{"type":25,"tag":367,"props":1881,"children":1882},{},[1883],{"type":30,"value":1884},"错误指标：100%（或至少 50%）",{"type":25,"tag":367,"props":1886,"children":1887},{},[1888],{"type":30,"value":1889},"关键交易链路：100%（只对“完成交易”的会话上报完整链路）",{"type":25,"tag":60,"props":1891,"children":1893},{"id":1892},"_33-动态采样用预算来管理",[1894],{"type":30,"value":1895},"3.3 动态采样：用“预算”来管理",{"type":25,"tag":38,"props":1897,"children":1898},{},[1899],{"type":30,"value":1900},"你可以给 RUM 设预算：",{"type":25,"tag":433,"props":1902,"children":1903},{},[1904,1909],{"type":25,"tag":367,"props":1905,"children":1906},{},[1907],{"type":30,"value":1908},"每日上报不超过 N 条",{"type":25,"tag":367,"props":1910,"children":1911},{},[1912],{"type":30,"value":1913},"每秒不超过 M 条",{"type":25,"tag":38,"props":1915,"children":1916},{},[1917],{"type":30,"value":1918},"当超预算时：",{"type":25,"tag":433,"props":1920,"children":1921},{},[1922,1927],{"type":25,"tag":367,"props":1923,"children":1924},{},[1925],{"type":30,"value":1926},"降低非关键事件采样率",{"type":25,"tag":367,"props":1928,"children":1929},{},[1930],{"type":30,"value":1931},"只保留异常事件（例如 LCP > 4s）",{"type":25,"tag":640,"props":1933,"children":1934},{},[],{"type":25,"tag":26,"props":1936,"children":1938},{"id":1937},"_4-客户端采集指标怎么拿",[1939],{"type":30,"value":1940},"4. 客户端采集：指标怎么拿？",{"type":25,"tag":60,"props":1942,"children":1944},{"id":1943},"_41-web-vitals-指标",[1945],{"type":30,"value":1946},"4.1 Web Vitals 指标",{"type":25,"tag":38,"props":1948,"children":1949},{},[1950],{"type":30,"value":1951},"现代浏览器提供了可观测入口：",{"type":25,"tag":433,"props":1953,"children":1954},{},[1955,1964],{"type":25,"tag":367,"props":1956,"children":1957},{},[1958],{"type":25,"tag":49,"props":1959,"children":1961},{"className":1960},[],[1962],{"type":30,"value":1963},"PerformanceObserver",{"type":25,"tag":367,"props":1965,"children":1966},{},[1967],{"type":25,"tag":49,"props":1968,"children":1970},{"className":1969},[],[1971],{"type":30,"value":1972},"performance.getEntriesByType()",{"type":25,"tag":38,"props":1974,"children":1975},{},[1976],{"type":30,"value":1977},"你可以使用社区实现（例如 web-vitals 思路），但要明确：",{"type":25,"tag":433,"props":1979,"children":1980},{},[1981,1986],{"type":25,"tag":367,"props":1982,"children":1983},{},[1984],{"type":30,"value":1985},"指标口径要固定（同一页面、同一版本）",{"type":25,"tag":367,"props":1987,"children":1988},{},[1989],{"type":30,"value":1990},"不同浏览器差异要做兼容",{"type":25,"tag":60,"props":1992,"children":1994},{"id":1993},"_42-上下文context是-rum-的灵魂",[1995],{"type":30,"value":1996},"4.2 上下文（Context）是 RUM 的灵魂",{"type":25,"tag":38,"props":1998,"children":1999},{},[2000,2002,2008],{"type":30,"value":2001},"只上报 ",{"type":25,"tag":49,"props":2003,"children":2005},{"className":2004},[],[2006],{"type":30,"value":2007},"LCP=2500ms",{"type":30,"value":2009}," 没意义。",{"type":25,"tag":38,"props":2011,"children":2012},{},[2013],{"type":30,"value":2014},"你至少需要这些维度：",{"type":25,"tag":433,"props":2016,"children":2017},{},[2018,2044,2057,2082,2107,2132],{"type":25,"tag":367,"props":2019,"children":2020},{},[2021,2023,2029,2031,2037,2038],{"type":30,"value":2022},"页面：",{"type":25,"tag":49,"props":2024,"children":2026},{"className":2025},[],[2027],{"type":30,"value":2028},"path",{"type":30,"value":2030},", ",{"type":25,"tag":49,"props":2032,"children":2034},{"className":2033},[],[2035],{"type":30,"value":2036},"routeName",{"type":30,"value":2030},{"type":25,"tag":49,"props":2039,"children":2041},{"className":2040},[],[2042],{"type":30,"value":2043},"referrer",{"type":25,"tag":367,"props":2045,"children":2046},{},[2047,2049,2055],{"type":30,"value":2048},"用户：匿名 ",{"type":25,"tag":49,"props":2050,"children":2052},{"className":2051},[],[2053],{"type":30,"value":2054},"userIdHash",{"type":30,"value":2056},"（可选）",{"type":25,"tag":367,"props":2058,"children":2059},{},[2060,2062,2068,2069,2075,2076],{"type":30,"value":2061},"设备：",{"type":25,"tag":49,"props":2063,"children":2065},{"className":2064},[],[2066],{"type":30,"value":2067},"deviceMemory",{"type":30,"value":2030},{"type":25,"tag":49,"props":2070,"children":2072},{"className":2071},[],[2073],{"type":30,"value":2074},"hardwareConcurrency",{"type":30,"value":2030},{"type":25,"tag":49,"props":2077,"children":2079},{"className":2078},[],[2080],{"type":30,"value":2081},"viewport",{"type":25,"tag":367,"props":2083,"children":2084},{},[2085,2087,2093,2094,2100,2101],{"type":30,"value":2086},"网络：",{"type":25,"tag":49,"props":2088,"children":2090},{"className":2089},[],[2091],{"type":30,"value":2092},"effectiveType",{"type":30,"value":2030},{"type":25,"tag":49,"props":2095,"children":2097},{"className":2096},[],[2098],{"type":30,"value":2099},"rtt",{"type":30,"value":2030},{"type":25,"tag":49,"props":2102,"children":2104},{"className":2103},[],[2105],{"type":30,"value":2106},"downlink",{"type":25,"tag":367,"props":2108,"children":2109},{},[2110,2112,2118,2119,2125,2126],{"type":30,"value":2111},"版本：",{"type":25,"tag":49,"props":2113,"children":2115},{"className":2114},[],[2116],{"type":30,"value":2117},"appVersion",{"type":30,"value":2030},{"type":25,"tag":49,"props":2120,"children":2122},{"className":2121},[],[2123],{"type":30,"value":2124},"buildId",{"type":30,"value":2030},{"type":25,"tag":49,"props":2127,"children":2129},{"className":2128},[],[2130],{"type":30,"value":2131},"commitSha",{"type":25,"tag":367,"props":2133,"children":2134},{},[2135,2137,2143,2144,2150,2151],{"type":30,"value":2136},"环境：",{"type":25,"tag":49,"props":2138,"children":2140},{"className":2139},[],[2141],{"type":30,"value":2142},"prod/staging",{"type":30,"value":2030},{"type":25,"tag":49,"props":2145,"children":2147},{"className":2146},[],[2148],{"type":30,"value":2149},"region",{"type":30,"value":2030},{"type":25,"tag":49,"props":2152,"children":2154},{"className":2153},[],[2155],{"type":30,"value":2156},"cdnPop",{"type":25,"tag":38,"props":2158,"children":2159},{},[2160],{"type":30,"value":2161},"这些字段必须：",{"type":25,"tag":433,"props":2163,"children":2164},{},[2165,2170],{"type":25,"tag":367,"props":2166,"children":2167},{},[2168],{"type":30,"value":2169},"控制体积（短字段名/枚举）",{"type":25,"tag":367,"props":2171,"children":2172},{},[2173],{"type":30,"value":2174},"可被服务器校验（防伪造污染）",{"type":25,"tag":640,"props":2176,"children":2177},{},[],{"type":25,"tag":26,"props":2179,"children":2181},{"id":2180},"_5-上报链路可靠性与性能不能两头都丢",[2182],{"type":30,"value":2183},"5. 上报链路：可靠性与性能不能两头都丢",{"type":25,"tag":60,"props":2185,"children":2187},{"id":2186},"_51-传输优先-sendbeacon降级到-fetchkeepalive",[2188,2190,2196,2198],{"type":30,"value":2189},"5.1 传输：优先 ",{"type":25,"tag":49,"props":2191,"children":2193},{"className":2192},[],[2194],{"type":30,"value":2195},"sendBeacon",{"type":30,"value":2197},"，降级到 ",{"type":25,"tag":49,"props":2199,"children":2201},{"className":2200},[],[2202],{"type":30,"value":2203},"fetch(keepalive)",{"type":25,"tag":433,"props":2205,"children":2206},{},[2207,2219],{"type":25,"tag":367,"props":2208,"children":2209},{},[2210,2212,2217],{"type":30,"value":2211},"页面卸载时 ",{"type":25,"tag":49,"props":2213,"children":2215},{"className":2214},[],[2216],{"type":30,"value":2195},{"type":30,"value":2218}," 更可靠",{"type":25,"tag":367,"props":2220,"children":2221},{},[2222,2224],{"type":30,"value":2223},"非卸载场景可用批量 ",{"type":25,"tag":49,"props":2225,"children":2227},{"className":2226},[],[2228],{"type":30,"value":2229},"fetch",{"type":25,"tag":60,"props":2231,"children":2233},{"id":2232},"_52-批量与压缩",[2234],{"type":30,"value":2235},"5.2 批量与压缩",{"type":25,"tag":38,"props":2237,"children":2238},{},[2239],{"type":30,"value":1106},{"type":25,"tag":433,"props":2241,"children":2242},{},[2243,2248,2253],{"type":25,"tag":367,"props":2244,"children":2245},{},[2246],{"type":30,"value":2247},"以 5~20 条为一个 batch",{"type":25,"tag":367,"props":2249,"children":2250},{},[2251],{"type":30,"value":2252},"gzip/br 压缩（服务器支持）",{"type":25,"tag":367,"props":2254,"children":2255},{},[2256],{"type":30,"value":2257},"限制 payload 大小（例如 \u003C 64KB）",{"type":25,"tag":60,"props":2259,"children":2261},{"id":2260},"_53-去重与重试",[2262],{"type":30,"value":2263},"5.3 去重与重试",{"type":25,"tag":433,"props":2265,"children":2266},{},[2267,2278,2290],{"type":25,"tag":367,"props":2268,"children":2269},{},[2270,2272],{"type":30,"value":2271},"给每条事件生成 ",{"type":25,"tag":49,"props":2273,"children":2275},{"className":2274},[],[2276],{"type":30,"value":2277},"eventId",{"type":25,"tag":367,"props":2279,"children":2280},{},[2281,2283,2288],{"type":30,"value":2282},"服务端按 ",{"type":25,"tag":49,"props":2284,"children":2286},{"className":2285},[],[2287],{"type":30,"value":2277},{"type":30,"value":2289}," 去重",{"type":25,"tag":367,"props":2291,"children":2292},{},[2293],{"type":30,"value":2294},"客户端失败重试次数有限（例如 2 次）",{"type":25,"tag":60,"props":2296,"children":2298},{"id":2297},"_54-采集对页面的影响",[2299],{"type":30,"value":2300},"5.4 采集对页面的影响",{"type":25,"tag":38,"props":2302,"children":2303},{},[2304],{"type":30,"value":2305},"RUM 本身不能成为性能负担。",{"type":25,"tag":38,"props":2307,"children":2308},{},[2309],{"type":30,"value":1188},{"type":25,"tag":433,"props":2311,"children":2312},{},[2313,2326,2331],{"type":25,"tag":367,"props":2314,"children":2315},{},[2316,2318,2324],{"type":30,"value":2317},"采集计算尽量放在 idle（",{"type":25,"tag":49,"props":2319,"children":2321},{"className":2320},[],[2322],{"type":30,"value":2323},"requestIdleCallback",{"type":30,"value":2325},"）",{"type":25,"tag":367,"props":2327,"children":2328},{},[2329],{"type":30,"value":2330},"上报放在后台、批量",{"type":25,"tag":367,"props":2332,"children":2333},{},[2334],{"type":30,"value":2335},"SDK 初始化延后（首屏后）",{"type":25,"tag":640,"props":2337,"children":2338},{},[],{"type":25,"tag":26,"props":2340,"children":2342},{"id":2341},"_6-事件模型与数据建模决定你能不能分析",[2343],{"type":30,"value":2344},"6. 事件模型与数据建模：决定你能不能分析",{"type":25,"tag":60,"props":2346,"children":2348},{"id":2347},"_61-事件类型event-types",[2349],{"type":30,"value":2350},"6.1 事件类型（Event Types）",{"type":25,"tag":38,"props":2352,"children":2353},{},[2354],{"type":30,"value":2355},"建议至少定义：",{"type":25,"tag":433,"props":2357,"children":2358},{},[2359,2368,2377,2386,2395,2404],{"type":25,"tag":367,"props":2360,"children":2361},{},[2362],{"type":25,"tag":49,"props":2363,"children":2365},{"className":2364},[],[2366],{"type":30,"value":2367},"page_view",{"type":25,"tag":367,"props":2369,"children":2370},{},[2371],{"type":25,"tag":49,"props":2372,"children":2374},{"className":2373},[],[2375],{"type":30,"value":2376},"web_vitals",{"type":25,"tag":367,"props":2378,"children":2379},{},[2380],{"type":25,"tag":49,"props":2381,"children":2383},{"className":2382},[],[2384],{"type":30,"value":2385},"resource_timing",{"type":25,"tag":367,"props":2387,"children":2388},{},[2389],{"type":25,"tag":49,"props":2390,"children":2392},{"className":2391},[],[2393],{"type":30,"value":2394},"long_task",{"type":25,"tag":367,"props":2396,"children":2397},{},[2398],{"type":25,"tag":49,"props":2399,"children":2401},{"className":2400},[],[2402],{"type":30,"value":2403},"js_error",{"type":25,"tag":367,"props":2405,"children":2406},{},[2407,2413],{"type":25,"tag":49,"props":2408,"children":2410},{"className":2409},[],[2411],{"type":30,"value":2412},"api_timing",{"type":30,"value":2414},"（业务关键接口）",{"type":25,"tag":38,"props":2416,"children":2417},{},[2418],{"type":30,"value":2419},"每种事件都有“必填字段”和“可选字段”。",{"type":25,"tag":60,"props":2421,"children":2423},{"id":2422},"_62-存储建模宽表-明细表",[2424],{"type":30,"value":2425},"6.2 存储建模：宽表 + 明细表",{"type":25,"tag":38,"props":2427,"children":2428},{},[2429],{"type":30,"value":2430},"常见两种设计：",{"type":25,"tag":433,"props":2432,"children":2433},{},[2434,2439],{"type":25,"tag":367,"props":2435,"children":2436},{},[2437],{"type":30,"value":2438},"宽表（便于查询）：把常用字段打平",{"type":25,"tag":367,"props":2440,"children":2441},{},[2442],{"type":30,"value":2443},"明细表（便于追踪）：存完整 payload（可选）",{"type":25,"tag":38,"props":2445,"children":2446},{},[2447],{"type":30,"value":2448},"一个可落地的折中：",{"type":25,"tag":433,"props":2450,"children":2451},{},[2452,2464],{"type":25,"tag":367,"props":2453,"children":2454},{},[2455,2457,2462],{"type":30,"value":2456},"以 ",{"type":25,"tag":49,"props":2458,"children":2460},{"className":2459},[],[2461],{"type":30,"value":2376},{"type":30,"value":2463}," 为核心宽表（用于大盘/SLO）",{"type":25,"tag":367,"props":2465,"children":2466},{},[2467,2468,2474],{"type":30,"value":2456},{"type":25,"tag":49,"props":2469,"children":2471},{"className":2470},[],[2472],{"type":30,"value":2473},"session_trace",{"type":30,"value":2475}," 为明细表（只对采样会话存）",{"type":25,"tag":60,"props":2477,"children":2479},{"id":2478},"_63-聚合口径p75p90p95p99",[2480],{"type":30,"value":2481},"6.3 聚合口径：p75/p90/p95/p99",{"type":25,"tag":38,"props":2483,"children":2484},{},[2485],{"type":30,"value":2486},"RUM 的统计不要只用平均值。",{"type":25,"tag":38,"props":2488,"children":2489},{},[2490],{"type":30,"value":2491},"推荐：",{"type":25,"tag":433,"props":2493,"children":2494},{},[2495,2500],{"type":25,"tag":367,"props":2496,"children":2497},{},[2498],{"type":30,"value":2499},"p75：更贴近“多数用户体验”",{"type":25,"tag":367,"props":2501,"children":2502},{},[2503],{"type":30,"value":2504},"p95/p99：定位极端慢问题",{"type":25,"tag":38,"props":2506,"children":2507},{},[2508],{"type":30,"value":2509},"对于 Web Vitals，Google 口径常用 p75。",{"type":25,"tag":640,"props":2511,"children":2512},{},[],{"type":25,"tag":26,"props":2514,"children":2516},{"id":2515},"_7-分析维度怎么做到可定位",[2517],{"type":30,"value":2518},"7. 分析维度：怎么做到“可定位”？",{"type":25,"tag":38,"props":2520,"children":2521},{},[2522],{"type":30,"value":2523},"可定位的关键在于“维度设计”。",{"type":25,"tag":38,"props":2525,"children":2526},{},[2527],{"type":30,"value":2528},"建议固定一套常用切片：",{"type":25,"tag":433,"props":2530,"children":2531},{},[2532,2537,2542,2547,2552,2557],{"type":25,"tag":367,"props":2533,"children":2534},{},[2535],{"type":30,"value":2536},"页面（路由）",{"type":25,"tag":367,"props":2538,"children":2539},{},[2540],{"type":30,"value":2541},"地区/运营商",{"type":25,"tag":367,"props":2543,"children":2544},{},[2545],{"type":30,"value":2546},"设备档位（内存/CPU 核数分桶）",{"type":25,"tag":367,"props":2548,"children":2549},{},[2550],{"type":30,"value":2551},"网络（4g/3g/slow-4g）",{"type":25,"tag":367,"props":2553,"children":2554},{},[2555],{"type":30,"value":2556},"版本（最近 10 个 buildId）",{"type":25,"tag":367,"props":2558,"children":2559},{},[2560],{"type":30,"value":2561},"入口来源（referrer/channel）",{"type":25,"tag":38,"props":2563,"children":2564},{},[2565],{"type":30,"value":2566},"注意：维度越多，成本越高。",{"type":25,"tag":38,"props":2568,"children":2569},{},[2570],{"type":30,"value":2571},"实践做法：",{"type":25,"tag":433,"props":2573,"children":2574},{},[2575,2580],{"type":25,"tag":367,"props":2576,"children":2577},{},[2578],{"type":30,"value":2579},"维度字段做枚举/分桶",{"type":25,"tag":367,"props":2581,"children":2582},{},[2583],{"type":30,"value":2584},"对长尾维度做 Top N",{"type":25,"tag":640,"props":2586,"children":2587},{},[],{"type":25,"tag":26,"props":2589,"children":2591},{"id":2590},"_8-告警与-slo让-rum-成为系统",[2592],{"type":30,"value":2593},"8. 告警与 SLO：让 RUM 成为“系统”",{"type":25,"tag":60,"props":2595,"children":2597},{"id":2596},"_81-slo-的定义",[2598],{"type":30,"value":2599},"8.1 SLO 的定义",{"type":25,"tag":38,"props":2601,"children":2602},{},[2603],{"type":30,"value":2604},"示例：",{"type":25,"tag":433,"props":2606,"children":2607},{},[2608,2613,2618],{"type":25,"tag":367,"props":2609,"children":2610},{},[2611],{"type":30,"value":2612},"过去 1 天内，p75 LCP \u003C 2500ms",{"type":25,"tag":367,"props":2614,"children":2615},{},[2616],{"type":30,"value":2617},"过去 1 天内，p75 INP \u003C 200ms",{"type":25,"tag":367,"props":2619,"children":2620},{},[2621],{"type":30,"value":2622},"过去 1 天内，CLS p75 \u003C 0.1",{"type":25,"tag":60,"props":2624,"children":2626},{"id":2625},"_82-告警规则",[2627],{"type":30,"value":2628},"8.2 告警规则",{"type":25,"tag":38,"props":2630,"children":2631},{},[2632],{"type":30,"value":2633},"建议用“双阈值”防抖：",{"type":25,"tag":433,"props":2635,"children":2636},{},[2637,2642],{"type":25,"tag":367,"props":2638,"children":2639},{},[2640],{"type":30,"value":2641},"5 分钟窗口连续超阈值",{"type":25,"tag":367,"props":2643,"children":2644},{},[2645],{"type":30,"value":2646},"且样本量 > 最小值（例如 300）",{"type":25,"tag":60,"props":2648,"children":2650},{"id":2649},"_83-回归检测",[2651],{"type":30,"value":2652},"8.3 回归检测",{"type":25,"tag":38,"props":2654,"children":2655},{},[2656],{"type":30,"value":2657},"把版本作为维度：",{"type":25,"tag":433,"props":2659,"children":2660},{},[2661,2666],{"type":25,"tag":367,"props":2662,"children":2663},{},[2664],{"type":30,"value":2665},"新版本的 p75 INP 相比上版本恶化 > 15%",{"type":25,"tag":367,"props":2667,"children":2668},{},[2669],{"type":30,"value":2670},"触发告警并附带“top 页面 / top 设备 / top 地区”",{"type":25,"tag":640,"props":2672,"children":2673},{},[],{"type":25,"tag":26,"props":2675,"children":2677},{"id":2676},"_9-隐私与合规你必须提前做的约束",[2678],{"type":30,"value":2679},"9. 隐私与合规：你必须提前做的约束",{"type":25,"tag":433,"props":2681,"children":2682},{},[2683,2688,2693,2698],{"type":25,"tag":367,"props":2684,"children":2685},{},[2686],{"type":30,"value":2687},"禁止上报 PII（手机号、邮箱、身份证等）",{"type":25,"tag":367,"props":2689,"children":2690},{},[2691],{"type":30,"value":2692},"URL 中 query/fragment 需要脱敏",{"type":25,"tag":367,"props":2694,"children":2695},{},[2696],{"type":30,"value":2697},"事件 payload 做字段白名单",{"type":25,"tag":367,"props":2699,"children":2700},{},[2701],{"type":30,"value":2702},"允许用户 opt-out（尤其是欧盟地区）",{"type":25,"tag":38,"props":2704,"children":2705},{},[2706],{"type":30,"value":2707},"如果产品面向多地区，建议把合规当成“需求”，不是“上线前检查”。",{"type":25,"tag":640,"props":2709,"children":2710},{},[],{"type":25,"tag":26,"props":2712,"children":2714},{"id":2713},"_10-最小可用方案mvp建议",[2715],{"type":30,"value":2716},"10. 最小可用方案（MVP）建议",{"type":25,"tag":38,"props":2718,"children":2719},{},[2720],{"type":30,"value":2721},"如果你要在 1~2 周内把 RUM 跑起来：",{"type":25,"tag":363,"props":2723,"children":2724},{},[2725,2730,2735,2740],{"type":25,"tag":367,"props":2726,"children":2727},{},[2728],{"type":30,"value":2729},"先采：page_view + web_vitals + js_error",{"type":25,"tag":367,"props":2731,"children":2732},{},[2733],{"type":30,"value":2734},"先做：按路由维度的大盘（p75）",{"type":25,"tag":367,"props":2736,"children":2737},{},[2738],{"type":30,"value":2739},"再做：版本对比（回归检测）",{"type":25,"tag":367,"props":2741,"children":2742},{},[2743],{"type":30,"value":2744},"最后做：会话 trace（定位长尾）",{"type":25,"tag":640,"props":2746,"children":2747},{},[],{"type":25,"tag":26,"props":2749,"children":2750},{"id":354},[2751],{"type":30,"value":354},{"type":25,"tag":38,"props":2753,"children":2754},{},[2755],{"type":30,"value":2756},"RUM 的关键不是 SDK，而是：",{"type":25,"tag":433,"props":2758,"children":2759},{},[2760,2765,2770,2775,2780],{"type":25,"tag":367,"props":2761,"children":2762},{},[2763],{"type":30,"value":2764},"指标体系与业务目标绑定",{"type":25,"tag":367,"props":2766,"children":2767},{},[2768],{"type":30,"value":2769},"采样与预算控制成本",{"type":25,"tag":367,"props":2771,"children":2772},{},[2773],{"type":30,"value":2774},"上报可靠且不影响性能",{"type":25,"tag":367,"props":2776,"children":2777},{},[2778],{"type":30,"value":2779},"数据建模支持切片与聚合",{"type":25,"tag":367,"props":2781,"children":2782},{},[2783],{"type":30,"value":2784},"告警/SLO 能闭环",{"title":7,"searchDepth":502,"depth":502,"links":2786},[2787,2788,2789,2793,2798,2802,2809,2814,2815,2820,2821,2822],{"id":1512,"depth":505,"text":1499},{"id":1600,"depth":505,"text":1603},{"id":1666,"depth":505,"text":1669,"children":2790},[2791,2792],{"id":1672,"depth":502,"text":1675},{"id":1734,"depth":502,"text":1737},{"id":1792,"depth":505,"text":1795,"children":2794},[2795,2796,2797],{"id":1803,"depth":502,"text":1806},{"id":1863,"depth":502,"text":1866},{"id":1892,"depth":502,"text":1895},{"id":1937,"depth":505,"text":1940,"children":2799},[2800,2801],{"id":1943,"depth":502,"text":1946},{"id":1993,"depth":502,"text":1996},{"id":2180,"depth":505,"text":2183,"children":2803},[2804,2806,2807,2808],{"id":2186,"depth":502,"text":2805},"5.1 传输：优先 sendBeacon，降级到 fetch(keepalive)",{"id":2232,"depth":502,"text":2235},{"id":2260,"depth":502,"text":2263},{"id":2297,"depth":502,"text":2300},{"id":2341,"depth":505,"text":2344,"children":2810},[2811,2812,2813],{"id":2347,"depth":502,"text":2350},{"id":2422,"depth":502,"text":2425},{"id":2478,"depth":502,"text":2481},{"id":2515,"depth":505,"text":2518},{"id":2590,"depth":505,"text":2593,"children":2816},[2817,2818,2819],{"id":2596,"depth":502,"text":2599},{"id":2625,"depth":502,"text":2628},{"id":2649,"depth":502,"text":2652},{"id":2676,"depth":505,"text":2679},{"id":2713,"depth":505,"text":2716},{"id":354,"depth":505,"text":354},"content:topics:performance:rum-real-user-monitoring-design.md","topics/performance/rum-real-user-monitoring-design.md","topics/performance/rum-real-user-monitoring-design",{"_path":2827,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":2828,"description":2829,"date":2830,"topic":5,"author":11,"tags":2831,"image":2835,"featured":19,"readingTime":2836,"body":2837,"_type":537,"_id":3753,"_source":539,"_file":3754,"_stem":3755,"_extension":542},"/topics/performance/core-web-vitals-2026-guide","Core Web Vitals 2026 新标准解读：INP 时代的性能优化策略","全面解读 2026 年 Core Web Vitals 的重大变化，深入分析 INP 取代 FID 的技术背景、测量方法与优化策略，帮助开发者适应新的性能评估体系。","2026-01-15",[551,2832,14,2833,2834],"INP","Web 性能","Google 排名","/images/topics/core-web-vitals-2026.jpg",15,{"type":22,"children":2838,"toc":3712},[2839,2845,2851,2863,2869,2877,2951,2959,2967,2973,3121,3127,3133,3145,3154,3162,3180,3186,3191,3200,3206,3211,3219,3225,3231,3240,3246,3257,3263,3272,3278,3284,3289,3350,3359,3365,3375,3380,3389,3395,3400,3409,3415,3424,3430,3439,3445,3454,3460,3466,3475,3481,3490,3495,3501,3506,3514,3522,3540,3545,3554,3558,3563,3568,3627,3632,3655,3660],{"type":25,"tag":26,"props":2840,"children":2842},{"id":2841},"core-web-vitals-2026-新标准解读",[2843],{"type":30,"value":2844},"Core Web Vitals 2026 新标准解读",{"type":25,"tag":26,"props":2846,"children":2848},{"id":2847},"_2026-年的重大变化inp-正式取代-fid",[2849],{"type":30,"value":2850},"2026 年的重大变化：INP 正式取代 FID",{"type":25,"tag":38,"props":2852,"children":2853},{},[2854,2856,2861],{"type":30,"value":2855},"2024 年 3 月，Google 正式宣布 ",{"type":25,"tag":78,"props":2857,"children":2858},{},[2859],{"type":30,"value":2860},"INP（Interaction to Next Paint）",{"type":30,"value":2862}," 取代 FID（First Input Delay）成为 Core Web Vitals 的核心指标。经过两年的过渡期，2026 年 INP 已完全成为搜索排名的重要因素。",{"type":25,"tag":60,"props":2864,"children":2866},{"id":2865},"为什么要替换-fid",[2867],{"type":30,"value":2868},"为什么要替换 FID？",{"type":25,"tag":38,"props":2870,"children":2871},{},[2872],{"type":25,"tag":78,"props":2873,"children":2874},{},[2875],{"type":30,"value":2876},"FID 的局限性：",{"type":25,"tag":1245,"props":2878,"children":2879},{},[2880,2896],{"type":25,"tag":1249,"props":2881,"children":2882},{},[2883],{"type":25,"tag":1253,"props":2884,"children":2885},{},[2886,2891],{"type":25,"tag":1257,"props":2887,"children":2888},{},[2889],{"type":30,"value":2890},"问题",{"type":25,"tag":1257,"props":2892,"children":2893},{},[2894],{"type":30,"value":2895},"说明",{"type":25,"tag":1273,"props":2897,"children":2898},{},[2899,2912,2925,2938],{"type":25,"tag":1253,"props":2900,"children":2901},{},[2902,2907],{"type":25,"tag":1280,"props":2903,"children":2904},{},[2905],{"type":30,"value":2906},"只测量首次交互",{"type":25,"tag":1280,"props":2908,"children":2909},{},[2910],{"type":30,"value":2911},"忽略后续所有交互的延迟",{"type":25,"tag":1253,"props":2913,"children":2914},{},[2915,2920],{"type":25,"tag":1280,"props":2916,"children":2917},{},[2918],{"type":30,"value":2919},"只测量输入延迟",{"type":25,"tag":1280,"props":2921,"children":2922},{},[2923],{"type":30,"value":2924},"不包含事件处理和渲染时间",{"type":25,"tag":1253,"props":2926,"children":2927},{},[2928,2933],{"type":25,"tag":1280,"props":2929,"children":2930},{},[2931],{"type":30,"value":2932},"样本偏差",{"type":25,"tag":1280,"props":2934,"children":2935},{},[2936],{"type":30,"value":2937},"某些用户可能永远不触发交互",{"type":25,"tag":1253,"props":2939,"children":2940},{},[2941,2946],{"type":25,"tag":1280,"props":2942,"children":2943},{},[2944],{"type":30,"value":2945},"无法反映真实体验",{"type":25,"tag":1280,"props":2947,"children":2948},{},[2949],{"type":30,"value":2950},"首次交互可能很快，但后续很慢",{"type":25,"tag":38,"props":2952,"children":2953},{},[2954],{"type":25,"tag":78,"props":2955,"children":2956},{},[2957],{"type":30,"value":2958},"INP 的优势：",{"type":25,"tag":44,"props":2960,"children":2962},{"code":2961},"FID 测量范围：\n┌──────────────────────────────────────────────────┐\n│  用户点击  →  浏览器开始处理  │  FID 结束      │\n│     ▼              ▼          │                │\n│   [===========]               │                │\n│   只测这一段                   │                │\n└──────────────────────────────────────────────────┘\n\nINP 测量范围：\n┌──────────────────────────────────────────────────┐\n│  用户点击  →  处理事件  →  渲染完成  │  INP 结束 │\n│     ▼          ▼           ▼        │          │\n│   [================================]            │\n│   完整的交互响应时间                             │\n└──────────────────────────────────────────────────┘\n",[2963],{"type":25,"tag":49,"props":2964,"children":2965},{"__ignoreMap":7},[2966],{"type":30,"value":2961},{"type":25,"tag":60,"props":2968,"children":2970},{"id":2969},"_2026-年-core-web-vitals-完整指标体系",[2971],{"type":30,"value":2972},"2026 年 Core Web Vitals 完整指标体系",{"type":25,"tag":1245,"props":2974,"children":2975},{},[2976,3012],{"type":25,"tag":1249,"props":2977,"children":2978},{},[2979],{"type":25,"tag":1253,"props":2980,"children":2981},{},[2982,2987,2992,2997,3002,3007],{"type":25,"tag":1257,"props":2983,"children":2984},{},[2985],{"type":30,"value":2986},"指标",{"type":25,"tag":1257,"props":2988,"children":2989},{},[2990],{"type":30,"value":2991},"全称",{"type":25,"tag":1257,"props":2993,"children":2994},{},[2995],{"type":30,"value":2996},"测量内容",{"type":25,"tag":1257,"props":2998,"children":2999},{},[3000],{"type":30,"value":3001},"良好阈值",{"type":25,"tag":1257,"props":3003,"children":3004},{},[3005],{"type":30,"value":3006},"需改进",{"type":25,"tag":1257,"props":3008,"children":3009},{},[3010],{"type":30,"value":3011},"差",{"type":25,"tag":1273,"props":3013,"children":3014},{},[3015,3050,3085],{"type":25,"tag":1253,"props":3016,"children":3017},{},[3018,3025,3030,3035,3040,3045],{"type":25,"tag":1280,"props":3019,"children":3020},{},[3021],{"type":25,"tag":78,"props":3022,"children":3023},{},[3024],{"type":30,"value":550},{"type":25,"tag":1280,"props":3026,"children":3027},{},[3028],{"type":30,"value":3029},"Largest Contentful Paint",{"type":25,"tag":1280,"props":3031,"children":3032},{},[3033],{"type":30,"value":3034},"最大内容绘制时间",{"type":25,"tag":1280,"props":3036,"children":3037},{},[3038],{"type":30,"value":3039},"≤ 2.5s",{"type":25,"tag":1280,"props":3041,"children":3042},{},[3043],{"type":30,"value":3044},"≤ 4s",{"type":25,"tag":1280,"props":3046,"children":3047},{},[3048],{"type":30,"value":3049},"> 4s",{"type":25,"tag":1253,"props":3051,"children":3052},{},[3053,3060,3065,3070,3075,3080],{"type":25,"tag":1280,"props":3054,"children":3055},{},[3056],{"type":25,"tag":78,"props":3057,"children":3058},{},[3059],{"type":30,"value":2832},{"type":25,"tag":1280,"props":3061,"children":3062},{},[3063],{"type":30,"value":3064},"Interaction to Next Paint",{"type":25,"tag":1280,"props":3066,"children":3067},{},[3068],{"type":30,"value":3069},"交互到下一次绘制",{"type":25,"tag":1280,"props":3071,"children":3072},{},[3073],{"type":30,"value":3074},"≤ 200ms",{"type":25,"tag":1280,"props":3076,"children":3077},{},[3078],{"type":30,"value":3079},"≤ 500ms",{"type":25,"tag":1280,"props":3081,"children":3082},{},[3083],{"type":30,"value":3084},"> 500ms",{"type":25,"tag":1253,"props":3086,"children":3087},{},[3088,3096,3101,3106,3111,3116],{"type":25,"tag":1280,"props":3089,"children":3090},{},[3091],{"type":25,"tag":78,"props":3092,"children":3093},{},[3094],{"type":30,"value":3095},"CLS",{"type":25,"tag":1280,"props":3097,"children":3098},{},[3099],{"type":30,"value":3100},"Cumulative Layout Shift",{"type":25,"tag":1280,"props":3102,"children":3103},{},[3104],{"type":30,"value":3105},"累积布局偏移",{"type":25,"tag":1280,"props":3107,"children":3108},{},[3109],{"type":30,"value":3110},"≤ 0.1",{"type":25,"tag":1280,"props":3112,"children":3113},{},[3114],{"type":30,"value":3115},"≤ 0.25",{"type":25,"tag":1280,"props":3117,"children":3118},{},[3119],{"type":30,"value":3120},"> 0.25",{"type":25,"tag":26,"props":3122,"children":3124},{"id":3123},"inp-深度解析",[3125],{"type":30,"value":3126},"INP 深度解析",{"type":25,"tag":60,"props":3128,"children":3130},{"id":3129},"inp-的计算方式",[3131],{"type":30,"value":3132},"INP 的计算方式",{"type":25,"tag":38,"props":3134,"children":3135},{},[3136,3138,3143],{"type":30,"value":3137},"INP 并非所有交互延迟的平均值，而是采用",{"type":25,"tag":78,"props":3139,"children":3140},{},[3141],{"type":30,"value":3142},"高百分位值",{"type":30,"value":3144},"策略：",{"type":25,"tag":44,"props":3146,"children":3149},{"code":3147,"language":151,"meta":7,"className":3148},"// INP 计算逻辑（简化版）\nfunction calculateINP(interactions) {\n  // 按延迟时间排序\n  const sorted = interactions.sort((a, b) => b.duration - a.duration);\n  \n  // 根据交互数量选择百分位\n  // 交互少于 50 次：取最大值\n  // 交互 50 次以上：取第 98 百分位\n  const count = sorted.length;\n  \n  if (count \u003C 50) {\n    return sorted[0]?.duration ?? 0;\n  }\n  \n  // 98th percentile\n  const index = Math.floor(count * 0.02);\n  return sorted[index].duration;\n}\n",[153],[3150],{"type":25,"tag":49,"props":3151,"children":3152},{"__ignoreMap":7},[3153],{"type":30,"value":3147},{"type":25,"tag":38,"props":3155,"children":3156},{},[3157],{"type":25,"tag":78,"props":3158,"children":3159},{},[3160],{"type":30,"value":3161},"为什么选择高百分位而非平均值？",{"type":25,"tag":433,"props":3163,"children":3164},{},[3165,3170,3175],{"type":25,"tag":367,"props":3166,"children":3167},{},[3168],{"type":30,"value":3169},"平均值会被大量快速交互\"稀释\"",{"type":25,"tag":367,"props":3171,"children":3172},{},[3173],{"type":30,"value":3174},"用户对慢交互的感知更强烈",{"type":25,"tag":367,"props":3176,"children":3177},{},[3178],{"type":30,"value":3179},"高百分位更能反映\"最坏情况\"体验",{"type":25,"tag":60,"props":3181,"children":3183},{"id":3182},"什么算作一次交互",[3184],{"type":30,"value":3185},"什么算作一次交互？",{"type":25,"tag":38,"props":3187,"children":3188},{},[3189],{"type":30,"value":3190},"INP 追踪以下类型的交互：",{"type":25,"tag":44,"props":3192,"children":3195},{"code":3193,"language":151,"meta":7,"className":3194},"// INP 追踪的交互类型\nconst trackedInteractions = {\n  // 点击相关\n  click: true,\n  dblclick: true,\n  contextmenu: true,\n  \n  // 键盘相关\n  keydown: true,\n  keyup: true,\n  keypress: true,\n  \n  // 触摸相关\n  touchstart: true,\n  touchend: true,\n  \n  // 指针相关\n  pointerdown: true,\n  pointerup: true\n};\n\n// 以下不计入 INP\nconst notTracked = {\n  scroll: '滚动不是离散交互',\n  mousemove: '持续性事件',\n  hover: '非用户主动操作'\n};\n",[153],[3196],{"type":25,"tag":49,"props":3197,"children":3198},{"__ignoreMap":7},[3199],{"type":30,"value":3193},{"type":25,"tag":60,"props":3201,"children":3203},{"id":3202},"inp-的三个阶段",[3204],{"type":30,"value":3205},"INP 的三个阶段",{"type":25,"tag":38,"props":3207,"children":3208},{},[3209],{"type":30,"value":3210},"一次完整的交互由三个阶段组成：",{"type":25,"tag":44,"props":3212,"children":3214},{"code":3213},"┌─────────────────────────────────────────────────────────────┐\n│                      INP 总时长                             │\n├───────────────┬───────────────────────┬────────────────────┤\n│   Input Delay │   Processing Time     │   Presentation     │\n│   输入延迟    │   处理时间            │   呈现延迟         │\n├───────────────┼───────────────────────┼────────────────────┤\n│ 主线程被占用  │ 事件处理函数执行      │ 样式计算+布局+绘制 │\n│ 导致的等待    │                       │                    │\n├───────────────┼───────────────────────┼────────────────────┤\n│   优化方向：  │   优化方向：          │   优化方向：       │\n│ - 减少长任务  │ - 优化事件处理逻辑    │ - 减少 DOM 操作    │\n│ - 使用调度器  │ - 避免同步布局        │ - 使用 transform   │\n│ - Web Worker  │ - 防抖/节流           │ - 避免 Layout      │\n└───────────────┴───────────────────────┴────────────────────┘\n",[3215],{"type":25,"tag":49,"props":3216,"children":3217},{"__ignoreMap":7},[3218],{"type":30,"value":3213},{"type":25,"tag":26,"props":3220,"children":3222},{"id":3221},"测量-core-web-vitals",[3223],{"type":30,"value":3224},"测量 Core Web Vitals",{"type":25,"tag":60,"props":3226,"children":3228},{"id":3227},"使用-web-vitals-库",[3229],{"type":30,"value":3230},"使用 web-vitals 库",{"type":25,"tag":44,"props":3232,"children":3235},{"code":3233,"language":151,"meta":7,"className":3234},"import { onCLS, onINP, onLCP } from 'web-vitals';\n\n// 基础用法\nonLCP(console.log);\nonINP(console.log);\nonCLS(console.log);\n\n// 详细报告\nfunction sendToAnalytics(metric) {\n  const body = {\n    name: metric.name,\n    value: metric.value,\n    rating: metric.rating,        // 'good' | 'needs-improvement' | 'poor'\n    delta: metric.delta,          // 与上次报告的差值\n    id: metric.id,                // 唯一标识\n    navigationType: metric.navigationType,\n    entries: metric.entries       // 相关 PerformanceEntry\n  };\n  \n  // 发送到分析服务\n  navigator.sendBeacon('/analytics', JSON.stringify(body));\n}\n\nonLCP(sendToAnalytics);\nonINP(sendToAnalytics);\nonCLS(sendToAnalytics);\n",[153],[3236],{"type":25,"tag":49,"props":3237,"children":3238},{"__ignoreMap":7},[3239],{"type":30,"value":3233},{"type":25,"tag":60,"props":3241,"children":3243},{"id":3242},"在-vuenuxt-中集成",[3244],{"type":30,"value":3245},"在 Vue/Nuxt 中集成",{"type":25,"tag":44,"props":3247,"children":3252},{"code":3248,"language":3249,"meta":7,"className":3250},"// plugins/web-vitals.client.ts\nimport { onCLS, onINP, onLCP } from 'web-vitals';\n\nexport default defineNuxtPlugin(() => {\n  // 仅在客户端运行\n  if (process.server) return;\n  \n  const sendMetric = (metric: Metric) => {\n    // 发送到你的分析服务\n    $fetch('/api/analytics/vitals', {\n      method: 'POST',\n      body: {\n        name: metric.name,\n        value: metric.value,\n        rating: metric.rating,\n        url: window.location.pathname,\n        timestamp: Date.now()\n      }\n    });\n  };\n  \n  onLCP(sendMetric);\n  onINP(sendMetric);\n  onCLS(sendMetric);\n});\n","typescript",[3251],"language-typescript",[3253],{"type":25,"tag":49,"props":3254,"children":3255},{"__ignoreMap":7},[3256],{"type":30,"value":3248},{"type":25,"tag":60,"props":3258,"children":3260},{"id":3259},"在-nextjs-中集成",[3261],{"type":30,"value":3262},"在 Next.js 中集成",{"type":25,"tag":44,"props":3264,"children":3267},{"code":3265,"language":3249,"meta":7,"className":3266},"// app/components/WebVitals.tsx\n'use client';\n\nimport { useEffect } from 'react';\nimport { onCLS, onINP, onLCP } from 'web-vitals';\n\nexport function WebVitals() {\n  useEffect(() => {\n    const sendMetric = (metric) => {\n      // 使用 Next.js 的 Analytics\n      window.gtag?.('event', metric.name, {\n        value: Math.round(metric.name === 'CLS' ? metric.value * 1000 : metric.value),\n        event_label: metric.id,\n        non_interaction: true,\n      });\n    };\n\n    onLCP(sendMetric);\n    onINP(sendMetric);\n    onCLS(sendMetric);\n  }, []);\n\n  return null;\n}\n\n// app/layout.tsx\nimport { WebVitals } from './components/WebVitals';\n\nexport default function RootLayout({ children }) {\n  return (\n    \u003Chtml>\n      \u003Cbody>\n        \u003CWebVitals />\n        {children}\n      \u003C/body>\n    \u003C/html>\n  );\n}\n",[3251],[3268],{"type":25,"tag":49,"props":3269,"children":3270},{"__ignoreMap":7},[3271],{"type":30,"value":3265},{"type":25,"tag":26,"props":3273,"children":3275},{"id":3274},"lcp-优化策略-2026",[3276],{"type":30,"value":3277},"LCP 优化策略 2026",{"type":25,"tag":60,"props":3279,"children":3281},{"id":3280},"lcp-元素识别",[3282],{"type":30,"value":3283},"LCP 元素识别",{"type":25,"tag":38,"props":3285,"children":3286},{},[3287],{"type":30,"value":3288},"LCP 候选元素类型：",{"type":25,"tag":433,"props":3290,"children":3291},{},[3292,3303,3321,3332,3345],{"type":25,"tag":367,"props":3293,"children":3294},{},[3295,3301],{"type":25,"tag":49,"props":3296,"children":3298},{"className":3297},[],[3299],{"type":30,"value":3300},"\u003Cimg>",{"type":30,"value":3302}," 元素",{"type":25,"tag":367,"props":3304,"children":3305},{},[3306,3312,3314,3320],{"type":25,"tag":49,"props":3307,"children":3309},{"className":3308},[],[3310],{"type":30,"value":3311},"\u003Csvg>",{"type":30,"value":3313}," 内的 ",{"type":25,"tag":49,"props":3315,"children":3317},{"className":3316},[],[3318],{"type":30,"value":3319},"\u003Cimage>",{"type":30,"value":3302},{"type":25,"tag":367,"props":3322,"children":3323},{},[3324,3330],{"type":25,"tag":49,"props":3325,"children":3327},{"className":3326},[],[3328],{"type":30,"value":3329},"\u003Cvideo>",{"type":30,"value":3331}," 元素的封面图",{"type":25,"tag":367,"props":3333,"children":3334},{},[3335,3337,3343],{"type":30,"value":3336},"通过 ",{"type":25,"tag":49,"props":3338,"children":3340},{"className":3339},[],[3341],{"type":30,"value":3342},"background-image",{"type":30,"value":3344}," 加载图片的元素",{"type":25,"tag":367,"props":3346,"children":3347},{},[3348],{"type":30,"value":3349},"包含文本节点的块级元素",{"type":25,"tag":44,"props":3351,"children":3354},{"code":3352,"language":151,"meta":7,"className":3353},"// 获取 LCP 元素信息\nconst observer = new PerformanceObserver((list) => {\n  const entries = list.getEntries();\n  const lastEntry = entries[entries.length - 1];\n  \n  console.log('LCP 元素:', lastEntry.element);\n  console.log('LCP 时间:', lastEntry.startTime);\n  console.log('LCP 大小:', lastEntry.size);\n});\n\nobserver.observe({ type: 'largest-contentful-paint', buffered: true });\n",[153],[3355],{"type":25,"tag":49,"props":3356,"children":3357},{"__ignoreMap":7},[3358],{"type":30,"value":3352},{"type":25,"tag":60,"props":3360,"children":3362},{"id":3361},"_2026-年-lcp-优化清单",[3363],{"type":30,"value":3364},"2026 年 LCP 优化清单",{"type":25,"tag":44,"props":3366,"children":3370},{"code":3367,"language":537,"meta":7,"className":3368},"## 资源发现优化\n- [ ] 使用 `\u003Clink rel=\"preload\">` 预加载 LCP 图片\n- [ ] 避免懒加载首屏 LCP 元素\n- [ ] 优化资源发现时间（fetchpriority=\"high\"）\n\n## 资源加载优化\n- [ ] 使用现代图片格式（AVIF > WebP > JPEG）\n- [ ] 实施响应式图片（srcset + sizes）\n- [ ] 启用 HTTP/2 或 HTTP/3\n- [ ] 优化 CDN 配置\n\n## 渲染优化\n- [ ] 减少关键 CSS\n- [ ] 避免渲染阻塞资源\n- [ ] 优化 Web 字体加载\n",[3369],"language-markdown",[3371],{"type":25,"tag":49,"props":3372,"children":3373},{"__ignoreMap":7},[3374],{"type":30,"value":3367},{"type":25,"tag":60,"props":3376,"children":3378},{"id":3377},"资源优先级提示",[3379],{"type":30,"value":3377},{"type":25,"tag":44,"props":3381,"children":3384},{"code":3382,"language":86,"meta":7,"className":3383},"\u003C!-- 2026 年推荐的资源优先级设置 -->\n\n\u003C!-- LCP 图片：最高优先级 -->\n\u003Cimg \n  src=\"/hero.webp\" \n  fetchpriority=\"high\"\n  decoding=\"async\"\n  alt=\"Hero Image\"\n/>\n\n\u003C!-- 预加载关键资源 -->\n\u003Clink rel=\"preload\" href=\"/hero.webp\" as=\"image\" fetchpriority=\"high\">\n\u003Clink rel=\"preload\" href=\"/critical.css\" as=\"style\">\n\u003Clink rel=\"preload\" href=\"/main-font.woff2\" as=\"font\" type=\"font/woff2\" crossorigin>\n\n\u003C!-- 预连接到关键域名 -->\n\u003Clink rel=\"preconnect\" href=\"https://cdn.example.com\">\n\u003Clink rel=\"dns-prefetch\" href=\"https://analytics.example.com\">\n\n\u003C!-- 降低非关键资源优先级 -->\n\u003Cimg src=\"/below-fold.webp\" fetchpriority=\"low\" loading=\"lazy\" />\n",[88],[3385],{"type":25,"tag":49,"props":3386,"children":3387},{"__ignoreMap":7},[3388],{"type":30,"value":3382},{"type":25,"tag":26,"props":3390,"children":3392},{"id":3391},"inp-优化策略-2026",[3393],{"type":30,"value":3394},"INP 优化策略 2026",{"type":25,"tag":60,"props":3396,"children":3398},{"id":3397},"识别慢交互",[3399],{"type":30,"value":3397},{"type":25,"tag":44,"props":3401,"children":3404},{"code":3402,"language":151,"meta":7,"className":3403},"// 使用 PerformanceObserver 监控慢交互\nconst slowInteractions = [];\n\nconst observer = new PerformanceObserver((list) => {\n  for (const entry of list.getEntries()) {\n    if (entry.duration > 200) { // INP 阈值\n      slowInteractions.push({\n        name: entry.name,\n        duration: entry.duration,\n        startTime: entry.startTime,\n        processingStart: entry.processingStart,\n        processingEnd: entry.processingEnd,\n        // 分解三个阶段\n        inputDelay: entry.processingStart - entry.startTime,\n        processingTime: entry.processingEnd - entry.processingStart,\n        presentationDelay: entry.duration - (entry.processingEnd - entry.startTime)\n      });\n      \n      console.warn('慢交互检测:', slowInteractions[slowInteractions.length - 1]);\n    }\n  }\n});\n\nobserver.observe({ type: 'event', buffered: true, durationThreshold: 16 });\n",[153],[3405],{"type":25,"tag":49,"props":3406,"children":3407},{"__ignoreMap":7},[3408],{"type":30,"value":3402},{"type":25,"tag":60,"props":3410,"children":3412},{"id":3411},"优化输入延迟input-delay",[3413],{"type":30,"value":3414},"优化输入延迟（Input Delay）",{"type":25,"tag":44,"props":3416,"children":3419},{"code":3417,"language":151,"meta":7,"className":3418},"// ❌ 长任务阻塞主线程\nfunction processLargeData(data) {\n  // 同步处理 100000 条数据\n  return data.map(item => heavyComputation(item));\n}\n\n// ✅ 使用 scheduler.yield() 拆分长任务\nasync function processLargeDataOptimized(data) {\n  const results = [];\n  const chunkSize = 1000;\n  \n  for (let i = 0; i \u003C data.length; i += chunkSize) {\n    const chunk = data.slice(i, i + chunkSize);\n    results.push(...chunk.map(item => heavyComputation(item)));\n    \n    // 让出主线程，允许处理用户交互\n    if (i + chunkSize \u003C data.length) {\n      await scheduler.yield();\n    }\n  }\n  \n  return results;\n}\n\n// ✅ 使用 requestIdleCallback 处理非关键任务\nfunction scheduleNonCriticalWork(callback) {\n  if ('requestIdleCallback' in window) {\n    requestIdleCallback(callback, { timeout: 1000 });\n  } else {\n    setTimeout(callback, 0);\n  }\n}\n",[153],[3420],{"type":25,"tag":49,"props":3421,"children":3422},{"__ignoreMap":7},[3423],{"type":30,"value":3417},{"type":25,"tag":60,"props":3425,"children":3427},{"id":3426},"优化处理时间processing-time",[3428],{"type":30,"value":3429},"优化处理时间（Processing Time）",{"type":25,"tag":44,"props":3431,"children":3434},{"code":3432,"language":151,"meta":7,"className":3433},"// ❌ 事件处理中包含大量同步操作\nbutton.addEventListener('click', () => {\n  // 同步数据处理\n  const result = processData(data);\n  \n  // 同步 DOM 更新\n  updateDOM(result);\n  \n  // 同步网络请求\n  fetch('/api/save', { method: 'POST', body: JSON.stringify(result) });\n});\n\n// ✅ 优化后：最小化同步操作\nbutton.addEventListener('click', async () => {\n  // 立即提供视觉反馈\n  button.disabled = true;\n  showLoadingState();\n  \n  // 使用 queueMicrotask 延迟非关键更新\n  queueMicrotask(() => {\n    // 数据处理移到微任务\n    const result = processData(data);\n    \n    // 使用 requestAnimationFrame 批量 DOM 更新\n    requestAnimationFrame(() => {\n      updateDOM(result);\n    });\n    \n    // 异步网络请求\n    fetch('/api/save', { method: 'POST', body: JSON.stringify(result) });\n  });\n});\n",[153],[3435],{"type":25,"tag":49,"props":3436,"children":3437},{"__ignoreMap":7},[3438],{"type":30,"value":3432},{"type":25,"tag":60,"props":3440,"children":3442},{"id":3441},"优化呈现延迟presentation-delay",[3443],{"type":30,"value":3444},"优化呈现延迟（Presentation Delay）",{"type":25,"tag":44,"props":3446,"children":3449},{"code":3447,"language":151,"meta":7,"className":3448},"// ❌ 触发强制同步布局\nelement.addEventListener('click', () => {\n  // 修改样式\n  element.style.width = '100px';\n  \n  // 立即读取布局信息 → 触发强制同步布局\n  const height = element.offsetHeight;\n  \n  // 再次修改样式 → 布局失效\n  element.style.height = height + 'px';\n});\n\n// ✅ 读写分离，使用 transform\nelement.addEventListener('click', () => {\n  // 使用 transform 避免布局计算\n  element.style.transform = 'scale(1.1)';\n  \n  // 批量读取\n  requestAnimationFrame(() => {\n    const rect = element.getBoundingClientRect();\n    // 批量写入\n    requestAnimationFrame(() => {\n      updateRelatedElements(rect);\n    });\n  });\n});\n",[153],[3450],{"type":25,"tag":49,"props":3451,"children":3452},{"__ignoreMap":7},[3453],{"type":30,"value":3447},{"type":25,"tag":26,"props":3455,"children":3457},{"id":3456},"cls-优化策略-2026",[3458],{"type":30,"value":3459},"CLS 优化策略 2026",{"type":25,"tag":60,"props":3461,"children":3463},{"id":3462},"cls-来源分析",[3464],{"type":30,"value":3465},"CLS 来源分析",{"type":25,"tag":44,"props":3467,"children":3470},{"code":3468,"language":151,"meta":7,"className":3469},"// 监控并分析 CLS 来源\nconst clsSources = [];\n\nconst observer = new PerformanceObserver((list) => {\n  for (const entry of list.getEntries()) {\n    if (!entry.hadRecentInput) { // 排除用户交互导致的偏移\n      for (const source of entry.sources || []) {\n        clsSources.push({\n          value: entry.value,\n          element: source.node,\n          previousRect: source.previousRect,\n          currentRect: source.currentRect\n        });\n      }\n    }\n  }\n});\n\nobserver.observe({ type: 'layout-shift', buffered: true });\n",[153],[3471],{"type":25,"tag":49,"props":3472,"children":3473},{"__ignoreMap":7},[3474],{"type":30,"value":3468},{"type":25,"tag":60,"props":3476,"children":3478},{"id":3477},"_2026-年-cls-优化清单",[3479],{"type":30,"value":3480},"2026 年 CLS 优化清单",{"type":25,"tag":44,"props":3482,"children":3485},{"code":3483,"language":86,"meta":7,"className":3484},"\u003C!-- 1. 图片和视频预留空间 -->\n\u003Cimg \n  src=\"/image.webp\" \n  width=\"800\" \n  height=\"600\" \n  alt=\"...\"\n  style=\"aspect-ratio: 800/600;\"\n/>\n\n\u003C!-- 2. 使用 CSS aspect-ratio -->\n\u003Cstyle>\n.video-container {\n  aspect-ratio: 16/9;\n  width: 100%;\n}\n\u003C/style>\n\n\u003C!-- 3. 为动态内容预留空间 -->\n\u003Cstyle>\n.ad-slot {\n  min-height: 250px; /* 广告最小高度 */\n}\n.skeleton {\n  min-height: 200px; /* 骨架屏占位 */\n}\n\u003C/style>\n\n\u003C!-- 4. 避免在现有内容上方插入内容 -->\n\u003C!-- ❌ 错误 -->\n\u003Cdiv class=\"new-banner\" style=\"position: relative;\">新公告\u003C/div>\n\n\u003C!-- ✅ 正确：预留空间或使用 transform -->\n\u003Cdiv class=\"banner-slot\" style=\"min-height: 50px;\">\n  \u003Cdiv class=\"new-banner\">新公告\u003C/div>\n\u003C/div>\n",[88],[3486],{"type":25,"tag":49,"props":3487,"children":3488},{"__ignoreMap":7},[3489],{"type":30,"value":3483},{"type":25,"tag":26,"props":3491,"children":3493},{"id":3492},"搜索排名影响与应对策略",[3494],{"type":30,"value":3492},{"type":25,"tag":60,"props":3496,"children":3498},{"id":3497},"core-web-vitals-在排名中的权重",[3499],{"type":30,"value":3500},"Core Web Vitals 在排名中的权重",{"type":25,"tag":38,"props":3502,"children":3503},{},[3504],{"type":30,"value":3505},"根据 Google 官方说明和实际观察：",{"type":25,"tag":44,"props":3507,"children":3509},{"code":3508},"排名因素权重（估算）：\n├─ 内容相关性 ████████████████████ 40%+\n├─ 反向链接质量 ████████████ 25%\n├─ 页面体验信号\n│   ├─ HTTPS ██ 5%\n│   ├─ Mobile-Friendly ███ 7%\n│   ├─ No Intrusive Interstitials ██ 3%\n│   └─ Core Web Vitals ████ 8-10%\n└─ 其他因素 █████ 10%\n",[3510],{"type":25,"tag":49,"props":3511,"children":3512},{"__ignoreMap":7},[3513],{"type":30,"value":3508},{"type":25,"tag":38,"props":3515,"children":3516},{},[3517],{"type":25,"tag":78,"props":3518,"children":3519},{},[3520],{"type":30,"value":3521},"重要提示：",{"type":25,"tag":433,"props":3523,"children":3524},{},[3525,3530,3535],{"type":25,"tag":367,"props":3526,"children":3527},{},[3528],{"type":30,"value":3529},"Core Web Vitals 是\"入围资格\"而非\"排名加分\"",{"type":25,"tag":367,"props":3531,"children":3532},{},[3533],{"type":30,"value":3534},"当内容质量相近时，性能优势更明显",{"type":25,"tag":367,"props":3536,"children":3537},{},[3538],{"type":30,"value":3539},"差的 Core Web Vitals 可能导致排名下降",{"type":25,"tag":60,"props":3541,"children":3543},{"id":3542},"监控与预警系统",[3544],{"type":30,"value":3542},{"type":25,"tag":44,"props":3546,"children":3549},{"code":3547,"language":3249,"meta":7,"className":3548},"// 建立 Core Web Vitals 监控系统\ninterface VitalsThreshold {\n  good: number;\n  needsImprovement: number;\n}\n\nconst thresholds: Record\u003Cstring, VitalsThreshold> = {\n  LCP: { good: 2500, needsImprovement: 4000 },\n  INP: { good: 200, needsImprovement: 500 },\n  CLS: { good: 0.1, needsImprovement: 0.25 }\n};\n\nfunction analyzeVitals(metrics: Record\u003Cstring, number>) {\n  const report = {};\n  \n  for (const [name, value] of Object.entries(metrics)) {\n    const threshold = thresholds[name];\n    \n    let status: 'good' | 'needs-improvement' | 'poor';\n    if (value \u003C= threshold.good) {\n      status = 'good';\n    } else if (value \u003C= threshold.needsImprovement) {\n      status = 'needs-improvement';\n    } else {\n      status = 'poor';\n    }\n    \n    report[name] = { value, status };\n    \n    // 触发告警\n    if (status === 'poor') {\n      sendAlert(`${name} 指标严重不达标: ${value}`);\n    }\n  }\n  \n  return report;\n}\n",[3251],[3550],{"type":25,"tag":49,"props":3551,"children":3552},{"__ignoreMap":7},[3553],{"type":30,"value":3547},{"type":25,"tag":26,"props":3555,"children":3556},{"id":354},[3557],{"type":30,"value":354},{"type":25,"tag":38,"props":3559,"children":3560},{},[3561],{"type":30,"value":3562},"2026 年的 Core Web Vitals 以 INP 为核心，标志着性能评估从\"首次加载\"向\"全程交互\"的转变。",{"type":25,"tag":60,"props":3564,"children":3566},{"id":3565},"关键要点回顾",[3567],{"type":30,"value":3565},{"type":25,"tag":433,"props":3569,"children":3570},{},[3571,3583,3594,3605,3616],{"type":25,"tag":367,"props":3572,"children":3573},{},[3574,3576,3581],{"type":30,"value":3575},"✅ ",{"type":25,"tag":78,"props":3577,"children":3578},{},[3579],{"type":30,"value":3580},"INP 取代 FID",{"type":30,"value":3582},"：测量完整交互响应时间",{"type":25,"tag":367,"props":3584,"children":3585},{},[3586,3587,3592],{"type":30,"value":3575},{"type":25,"tag":78,"props":3588,"children":3589},{},[3590],{"type":30,"value":3591},"三大指标协同",{"type":30,"value":3593},"：LCP（加载）+ INP（交互）+ CLS（稳定）",{"type":25,"tag":367,"props":3595,"children":3596},{},[3597,3598,3603],{"type":30,"value":3575},{"type":25,"tag":78,"props":3599,"children":3600},{},[3601],{"type":30,"value":3602},"优化优先级",{"type":30,"value":3604},"：先保证 INP，再优化 LCP 和 CLS",{"type":25,"tag":367,"props":3606,"children":3607},{},[3608,3609,3614],{"type":30,"value":3575},{"type":25,"tag":78,"props":3610,"children":3611},{},[3612],{"type":30,"value":3613},"持续监控",{"type":30,"value":3615},"：建立实时监控和预警机制",{"type":25,"tag":367,"props":3617,"children":3618},{},[3619,3620,3625],{"type":30,"value":3575},{"type":25,"tag":78,"props":3621,"children":3622},{},[3623],{"type":30,"value":3624},"渐进优化",{"type":30,"value":3626},"：从高流量页面开始，逐步覆盖全站",{"type":25,"tag":60,"props":3628,"children":3630},{"id":3629},"立即行动",[3631],{"type":30,"value":3629},{"type":25,"tag":363,"props":3633,"children":3634},{},[3635,3640,3645,3650],{"type":25,"tag":367,"props":3636,"children":3637},{},[3638],{"type":30,"value":3639},"使用 web-vitals 库集成性能监控",{"type":25,"tag":367,"props":3641,"children":3642},{},[3643],{"type":30,"value":3644},"在 Chrome DevTools 中检查慢交互",{"type":25,"tag":367,"props":3646,"children":3647},{},[3648],{"type":30,"value":3649},"重点优化 INP > 200ms 的交互",{"type":25,"tag":367,"props":3651,"children":3652},{},[3653],{"type":30,"value":3654},"建立周期性的性能审计流程",{"type":25,"tag":26,"props":3656,"children":3658},{"id":3657},"相关资源",[3659],{"type":30,"value":3657},{"type":25,"tag":433,"props":3661,"children":3662},{},[3663,3673,3682,3692,3702],{"type":25,"tag":367,"props":3664,"children":3665},{},[3666],{"type":25,"tag":473,"props":3667,"children":3670},{"href":3668,"rel":3669},"https://web.dev/vitals/",[477],[3671],{"type":30,"value":3672},"web.dev - Core Web Vitals",{"type":25,"tag":367,"props":3674,"children":3675},{},[3676],{"type":25,"tag":473,"props":3677,"children":3679},{"href":486,"rel":3678},[477],[3680],{"type":30,"value":3681},"Chrome DevTools - 性能分析",{"type":25,"tag":367,"props":3683,"children":3684},{},[3685],{"type":25,"tag":473,"props":3686,"children":3689},{"href":3687,"rel":3688},"https://github.com/GoogleChrome/web-vitals",[477],[3690],{"type":30,"value":3691},"web-vitals 库",{"type":25,"tag":367,"props":3693,"children":3694},{},[3695],{"type":25,"tag":473,"props":3696,"children":3699},{"href":3697,"rel":3698},"https://pagespeed.web.dev/",[477],[3700],{"type":30,"value":3701},"PageSpeed Insights",{"type":25,"tag":367,"props":3703,"children":3704},{},[3705],{"type":25,"tag":473,"props":3706,"children":3709},{"href":3707,"rel":3708},"https://search.google.com/search-console/",[477],[3710],{"type":30,"value":3711},"Search Console Core Web Vitals 报告",{"title":7,"searchDepth":502,"depth":502,"links":3713},[3714,3715,3719,3724,3729,3734,3740,3744,3748,3752],{"id":2841,"depth":505,"text":2844},{"id":2847,"depth":505,"text":2850,"children":3716},[3717,3718],{"id":2865,"depth":502,"text":2868},{"id":2969,"depth":502,"text":2972},{"id":3123,"depth":505,"text":3126,"children":3720},[3721,3722,3723],{"id":3129,"depth":502,"text":3132},{"id":3182,"depth":502,"text":3185},{"id":3202,"depth":502,"text":3205},{"id":3221,"depth":505,"text":3224,"children":3725},[3726,3727,3728],{"id":3227,"depth":502,"text":3230},{"id":3242,"depth":502,"text":3245},{"id":3259,"depth":502,"text":3262},{"id":3274,"depth":505,"text":3277,"children":3730},[3731,3732,3733],{"id":3280,"depth":502,"text":3283},{"id":3361,"depth":502,"text":3364},{"id":3377,"depth":502,"text":3377},{"id":3391,"depth":505,"text":3394,"children":3735},[3736,3737,3738,3739],{"id":3397,"depth":502,"text":3397},{"id":3411,"depth":502,"text":3414},{"id":3426,"depth":502,"text":3429},{"id":3441,"depth":502,"text":3444},{"id":3456,"depth":505,"text":3459,"children":3741},[3742,3743],{"id":3462,"depth":502,"text":3465},{"id":3477,"depth":502,"text":3480},{"id":3492,"depth":505,"text":3492,"children":3745},[3746,3747],{"id":3497,"depth":502,"text":3500},{"id":3542,"depth":502,"text":3542},{"id":354,"depth":505,"text":354,"children":3749},[3750,3751],{"id":3565,"depth":502,"text":3565},{"id":3629,"depth":502,"text":3629},{"id":3657,"depth":505,"text":3657},"content:topics:performance:core-web-vitals-2026-guide.md","topics/performance/core-web-vitals-2026-guide.md","topics/performance/core-web-vitals-2026-guide",{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"topic":5,"author":11,"tags":3757,"image":18,"featured":19,"readingTime":20,"body":3758,"_type":537,"_id":538,"_source":539,"_file":540,"_stem":541,"_extension":542},[13,14,15,16,17],{"type":22,"children":3759,"toc":4127},[3760,3764,3768,3772,3779,3783,3787,3794,3801,3809,3813,3820,3824,3831,3835,3839,3846,3850,3858,3862,3870,3874,3878,3885,3889,3897,3901,3905,3912,3916,3920,3928,3932,3936,3943,3947,3951,3959,3963,3967,3974,3978,3986,3990,3998,4002,4010,4014,4018,4069,4073,4096,4100],{"type":25,"tag":26,"props":3761,"children":3762},{"id":8},[3763],{"type":30,"value":8},{"type":25,"tag":26,"props":3765,"children":3766},{"id":33},[3767],{"type":30,"value":36},{"type":25,"tag":38,"props":3769,"children":3770},{},[3771],{"type":30,"value":42},{"type":25,"tag":44,"props":3773,"children":3774},{"code":46},[3775],{"type":25,"tag":49,"props":3776,"children":3777},{"__ignoreMap":7},[3778],{"type":30,"value":46},{"type":25,"tag":26,"props":3780,"children":3781},{"id":55},[3782],{"type":30,"value":58},{"type":25,"tag":60,"props":3784,"children":3785},{"id":62},[3786],{"type":30,"value":65},{"type":25,"tag":44,"props":3788,"children":3789},{"code":68},[3790],{"type":25,"tag":49,"props":3791,"children":3792},{"__ignoreMap":7},[3793],{"type":30,"value":68},{"type":25,"tag":38,"props":3795,"children":3796},{},[3797],{"type":25,"tag":78,"props":3798,"children":3799},{},[3800],{"type":30,"value":82},{"type":25,"tag":44,"props":3802,"children":3804},{"code":85,"language":86,"meta":7,"className":3803},[88],[3805],{"type":25,"tag":49,"props":3806,"children":3807},{"__ignoreMap":7},[3808],{"type":30,"value":85},{"type":25,"tag":60,"props":3810,"children":3811},{"id":96},[3812],{"type":30,"value":99},{"type":25,"tag":44,"props":3814,"children":3815},{"code":102},[3816],{"type":25,"tag":49,"props":3817,"children":3818},{"__ignoreMap":7},[3819],{"type":30,"value":102},{"type":25,"tag":60,"props":3821,"children":3822},{"id":110},[3823],{"type":30,"value":113},{"type":25,"tag":44,"props":3825,"children":3826},{"code":116},[3827],{"type":25,"tag":49,"props":3828,"children":3829},{"__ignoreMap":7},[3830],{"type":30,"value":116},{"type":25,"tag":26,"props":3832,"children":3833},{"id":124},[3834],{"type":30,"value":127},{"type":25,"tag":60,"props":3836,"children":3837},{"id":130},[3838],{"type":30,"value":133},{"type":25,"tag":44,"props":3840,"children":3841},{"code":136},[3842],{"type":25,"tag":49,"props":3843,"children":3844},{"__ignoreMap":7},[3845],{"type":30,"value":136},{"type":25,"tag":60,"props":3847,"children":3848},{"id":144},[3849],{"type":30,"value":147},{"type":25,"tag":44,"props":3851,"children":3853},{"code":150,"language":151,"meta":7,"className":3852},[153],[3854],{"type":25,"tag":49,"props":3855,"children":3856},{"__ignoreMap":7},[3857],{"type":30,"value":150},{"type":25,"tag":60,"props":3859,"children":3860},{"id":161},[3861],{"type":30,"value":164},{"type":25,"tag":44,"props":3863,"children":3865},{"code":167,"language":86,"meta":7,"className":3864},[88],[3866],{"type":25,"tag":49,"props":3867,"children":3868},{"__ignoreMap":7},[3869],{"type":30,"value":167},{"type":25,"tag":26,"props":3871,"children":3872},{"id":176},[3873],{"type":30,"value":179},{"type":25,"tag":60,"props":3875,"children":3876},{"id":182},[3877],{"type":30,"value":185},{"type":25,"tag":44,"props":3879,"children":3880},{"code":188},[3881],{"type":25,"tag":49,"props":3882,"children":3883},{"__ignoreMap":7},[3884],{"type":30,"value":188},{"type":25,"tag":60,"props":3886,"children":3887},{"id":196},[3888],{"type":30,"value":199},{"type":25,"tag":44,"props":3890,"children":3892},{"code":202,"language":151,"meta":7,"className":3891},[153],[3893],{"type":25,"tag":49,"props":3894,"children":3895},{"__ignoreMap":7},[3896],{"type":30,"value":202},{"type":25,"tag":26,"props":3898,"children":3899},{"id":211},[3900],{"type":30,"value":214},{"type":25,"tag":60,"props":3902,"children":3903},{"id":217},[3904],{"type":30,"value":220},{"type":25,"tag":44,"props":3906,"children":3907},{"code":223},[3908],{"type":25,"tag":49,"props":3909,"children":3910},{"__ignoreMap":7},[3911],{"type":30,"value":223},{"type":25,"tag":60,"props":3913,"children":3914},{"id":231},[3915],{"type":30,"value":234},{"type":25,"tag":38,"props":3917,"children":3918},{},[3919],{"type":30,"value":239},{"type":25,"tag":44,"props":3921,"children":3923},{"code":242,"language":151,"meta":7,"className":3922},[153],[3924],{"type":25,"tag":49,"props":3925,"children":3926},{"__ignoreMap":7},[3927],{"type":30,"value":242},{"type":25,"tag":26,"props":3929,"children":3930},{"id":251},[3931],{"type":30,"value":254},{"type":25,"tag":60,"props":3933,"children":3934},{"id":257},[3935],{"type":30,"value":260},{"type":25,"tag":44,"props":3937,"children":3938},{"code":263},[3939],{"type":25,"tag":49,"props":3940,"children":3941},{"__ignoreMap":7},[3942],{"type":30,"value":263},{"type":25,"tag":60,"props":3944,"children":3945},{"id":271},[3946],{"type":30,"value":274},{"type":25,"tag":38,"props":3948,"children":3949},{},[3950],{"type":30,"value":279},{"type":25,"tag":44,"props":3952,"children":3954},{"code":282,"language":151,"meta":7,"className":3953},[153],[3955],{"type":25,"tag":49,"props":3956,"children":3957},{"__ignoreMap":7},[3958],{"type":30,"value":282},{"type":25,"tag":26,"props":3960,"children":3961},{"id":291},[3962],{"type":30,"value":294},{"type":25,"tag":60,"props":3964,"children":3965},{"id":297},[3966],{"type":30,"value":300},{"type":25,"tag":44,"props":3968,"children":3969},{"code":303},[3970],{"type":25,"tag":49,"props":3971,"children":3972},{"__ignoreMap":7},[3973],{"type":30,"value":303},{"type":25,"tag":60,"props":3975,"children":3976},{"id":311},[3977],{"type":30,"value":314},{"type":25,"tag":44,"props":3979,"children":3981},{"code":317,"language":151,"meta":7,"className":3980},[153],[3982],{"type":25,"tag":49,"props":3983,"children":3984},{"__ignoreMap":7},[3985],{"type":30,"value":317},{"type":25,"tag":26,"props":3987,"children":3988},{"id":326},[3989],{"type":30,"value":326},{"type":25,"tag":44,"props":3991,"children":3993},{"code":331,"language":151,"meta":7,"className":3992},[153],[3994],{"type":25,"tag":49,"props":3995,"children":3996},{"__ignoreMap":7},[3997],{"type":30,"value":331},{"type":25,"tag":26,"props":3999,"children":4000},{"id":340},[4001],{"type":30,"value":340},{"type":25,"tag":44,"props":4003,"children":4005},{"code":345,"language":151,"meta":7,"className":4004},[153],[4006],{"type":25,"tag":49,"props":4007,"children":4008},{"__ignoreMap":7},[4009],{"type":30,"value":345},{"type":25,"tag":26,"props":4011,"children":4012},{"id":354},[4013],{"type":30,"value":354},{"type":25,"tag":38,"props":4015,"children":4016},{},[4017],{"type":30,"value":361},{"type":25,"tag":363,"props":4019,"children":4020},{},[4021,4029,4037,4045,4053,4061],{"type":25,"tag":367,"props":4022,"children":4023},{},[4024,4028],{"type":25,"tag":78,"props":4025,"children":4026},{},[4027],{"type":30,"value":374},{"type":30,"value":376},{"type":25,"tag":367,"props":4030,"children":4031},{},[4032,4036],{"type":25,"tag":78,"props":4033,"children":4034},{},[4035],{"type":30,"value":384},{"type":30,"value":386},{"type":25,"tag":367,"props":4038,"children":4039},{},[4040,4044],{"type":25,"tag":78,"props":4041,"children":4042},{},[4043],{"type":30,"value":394},{"type":30,"value":396},{"type":25,"tag":367,"props":4046,"children":4047},{},[4048,4052],{"type":25,"tag":78,"props":4049,"children":4050},{},[4051],{"type":30,"value":404},{"type":30,"value":406},{"type":25,"tag":367,"props":4054,"children":4055},{},[4056,4060],{"type":25,"tag":78,"props":4057,"children":4058},{},[4059],{"type":30,"value":414},{"type":30,"value":416},{"type":25,"tag":367,"props":4062,"children":4063},{},[4064,4068],{"type":25,"tag":78,"props":4065,"children":4066},{},[4067],{"type":30,"value":424},{"type":30,"value":426},{"type":25,"tag":38,"props":4070,"children":4071},{},[4072],{"type":30,"value":431},{"type":25,"tag":433,"props":4074,"children":4075},{},[4076,4080,4084,4088,4092],{"type":25,"tag":367,"props":4077,"children":4078},{},[4079],{"type":30,"value":440},{"type":25,"tag":367,"props":4081,"children":4082},{},[4083],{"type":30,"value":445},{"type":25,"tag":367,"props":4085,"children":4086},{},[4087],{"type":30,"value":450},{"type":25,"tag":367,"props":4089,"children":4090},{},[4091],{"type":30,"value":455},{"type":25,"tag":367,"props":4093,"children":4094},{},[4095],{"type":30,"value":460},{"type":25,"tag":26,"props":4097,"children":4098},{"id":463},[4099],{"type":30,"value":463},{"type":25,"tag":433,"props":4101,"children":4102},{},[4103,4111,4119],{"type":25,"tag":367,"props":4104,"children":4105},{},[4106],{"type":25,"tag":473,"props":4107,"children":4109},{"href":475,"rel":4108},[477],[4110],{"type":30,"value":480},{"type":25,"tag":367,"props":4112,"children":4113},{},[4114],{"type":25,"tag":473,"props":4115,"children":4117},{"href":486,"rel":4116},[477],[4118],{"type":30,"value":490},{"type":25,"tag":367,"props":4120,"children":4121},{},[4122],{"type":25,"tag":473,"props":4123,"children":4125},{"href":496,"rel":4124},[477],[4126],{"type":30,"value":500},{"title":7,"searchDepth":502,"depth":502,"links":4128},[4129,4130,4131,4136,4141,4145,4149,4153,4157,4158,4159,4160],{"id":8,"depth":505,"text":8},{"id":33,"depth":505,"text":36},{"id":55,"depth":505,"text":58,"children":4132},[4133,4134,4135],{"id":62,"depth":502,"text":65},{"id":96,"depth":502,"text":99},{"id":110,"depth":502,"text":113},{"id":124,"depth":505,"text":127,"children":4137},[4138,4139,4140],{"id":130,"depth":502,"text":133},{"id":144,"depth":502,"text":147},{"id":161,"depth":502,"text":164},{"id":176,"depth":505,"text":179,"children":4142},[4143,4144],{"id":182,"depth":502,"text":185},{"id":196,"depth":502,"text":199},{"id":211,"depth":505,"text":214,"children":4146},[4147,4148],{"id":217,"depth":502,"text":220},{"id":231,"depth":502,"text":234},{"id":251,"depth":505,"text":254,"children":4150},[4151,4152],{"id":257,"depth":502,"text":260},{"id":271,"depth":502,"text":274},{"id":291,"depth":505,"text":294,"children":4154},[4155,4156],{"id":297,"depth":502,"text":300},{"id":311,"depth":502,"text":314},{"id":326,"depth":505,"text":326},{"id":340,"depth":505,"text":340},{"id":354,"depth":505,"text":354},{"id":463,"depth":505,"text":463},1778574599816]