[{"data":1,"prerenderedAt":5120},["ShallowReactive",2],{"article-/topics/performance/gpu-acceleration-rendering-guide":3,"related-performance":1067,"content-query-yRh8BnGLnV":4274},{"_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":1061,"_id":1062,"_source":1063,"_file":1064,"_stem":1065,"_extension":1066},"/topics/performance/gpu-acceleration-rendering-guide","performance",false,"","GPU 加速渲染原理：浏览器如何借助显卡飞速绘制页面","深入解析浏览器渲染引擎与 GPU 的协作机制，包括合成层、硬件加速、will-change 属性等核心概念，帮助开发者写出流畅的 60fps 动画。","2024-12-30","HTMLPAGE 团队",[13,14,15,16,17],"GPU加速","渲染优化","合成层","硬件加速","动画性能","/images/topics/performance/gpu-acceleration-rendering-guide.jpg",true,20,{"type":22,"children":23,"toc":1015},"root",[24,32,38,44,51,71,76,86,91,96,102,107,118,124,129,138,144,149,157,163,168,177,183,188,197,203,208,217,222,227,232,416,421,426,446,455,461,466,490,498,503,514,526,532,537,547,556,561,579,584,593,598,607,612,631,641,646,651,656,667,672,677,682,691,696,705,710,736,742,748,757,763,772,778,787,792,798,803,811,817,835,840,849,854,859,961,973,978],{"type":25,"tag":26,"props":27,"children":29},"element","h2",{"id":28},"gpu-加速渲染原理浏览器如何借助显卡飞速绘制页面",[30],{"type":31,"value":8},"text",{"type":25,"tag":33,"props":34,"children":35},"p",{},[36],{"type":31,"value":37},"当你在页面上拖动一个元素时，如果感到丝滑流畅，那可能要感谢你的显卡。浏览器并非只靠 CPU 单打独斗——现代浏览器会把大量绑定工作交给 GPU 处理。理解这个机制，是写出 60fps 动画的关键。",{"type":25,"tag":26,"props":39,"children":41},{"id":40},"cpu-与-gpu分工不同",[42],{"type":31,"value":43},"CPU 与 GPU：分工不同",{"type":25,"tag":45,"props":46,"children":48},"h3",{"id":47},"为什么需要-gpu",[49],{"type":31,"value":50},"为什么需要 GPU",{"type":25,"tag":33,"props":52,"children":53},{},[54,56,62,64,69],{"type":31,"value":55},"CPU 擅长",{"type":25,"tag":57,"props":58,"children":59},"strong",{},[60],{"type":31,"value":61},"复杂逻辑运算",{"type":31,"value":63},"——它有强大的控制单元和缓存，但核心数量有限。\nGPU 擅长",{"type":25,"tag":57,"props":65,"children":66},{},[67],{"type":31,"value":68},"并行简单运算",{"type":31,"value":70},"——它有数千个小核心，能同时处理大量相似任务。",{"type":25,"tag":33,"props":72,"children":73},{},[74],{"type":31,"value":75},"渲染页面恰恰是一个高度并行的任务：屏幕上有数百万个像素，每个像素的颜色都需要计算。这正是 GPU 的主场。",{"type":25,"tag":77,"props":78,"children":80},"pre",{"code":79},"┌─────────────────────────────────────────────┐\n│ CPU（主线程） │\n│ │\n│ JavaScript 执行 → DOM 构建 → 样式计算 │\n│ ↓ │\n│ 布局 (Layout) │\n│ ↓ │\n│ 绘制 (Paint) → 生成绘制指令 │\n│ ↓ │\n└────────┬────────────────────────────────────┘\n │\n ↓ 绘制指令提交给 GPU\n │\n┌────────┴────────────────────────────────────┐\n│ GPU（合成线程） │\n│ │\n│ 纹理上传 → 层合成 → 光栅化 → 输出到屏幕 │\n│ │\n└─────────────────────────────────────────────┘\n",[81],{"type":25,"tag":82,"props":83,"children":84},"code",{"__ignoreMap":7},[85],{"type":31,"value":79},{"type":25,"tag":26,"props":87,"children":89},{"id":88},"浏览器渲染管线",[90],{"type":31,"value":88},{"type":25,"tag":33,"props":92,"children":93},{},[94],{"type":31,"value":95},"理解 GPU 加速，首先要理解完整的渲染管线：",{"type":25,"tag":45,"props":97,"children":99},{"id":98},"_1-样式计算-style",[100],{"type":31,"value":101},"1. 样式计算 (Style)",{"type":25,"tag":33,"props":103,"children":104},{},[105],{"type":31,"value":106},"确定每个 DOM 元素的最终样式：",{"type":25,"tag":77,"props":108,"children":113},{"code":109,"language":110,"meta":7,"className":111},"// 浏览器内部伪代码\nfor (const element of allElements) {\n element.computedStyle = computeStyle(element, stylesheets)\n}\n","javascript",[112],"language-javascript",[114],{"type":25,"tag":82,"props":115,"children":116},{"__ignoreMap":7},[117],{"type":31,"value":109},{"type":25,"tag":45,"props":119,"children":121},{"id":120},"_2-布局-layout",[122],{"type":31,"value":123},"2. 布局 (Layout)",{"type":25,"tag":33,"props":125,"children":126},{},[127],{"type":31,"value":128},"计算每个元素的几何信息（位置、大小）：",{"type":25,"tag":77,"props":130,"children":133},{"code":131,"language":110,"meta":7,"className":132},"for (const element of renderTree) {\n element.layoutInfo = {\n x, y, width, height\n }\n}\n",[112],[134],{"type":25,"tag":82,"props":135,"children":136},{"__ignoreMap":7},[137],{"type":31,"value":131},{"type":25,"tag":45,"props":139,"children":141},{"id":140},"_3-分层-layer",[142],{"type":31,"value":143},"3. 分层 (Layer)",{"type":25,"tag":33,"props":145,"children":146},{},[147],{"type":31,"value":148},"将页面划分为多个合成层。这一步决定了哪些内容可以独立 GPU 加速：",{"type":25,"tag":77,"props":150,"children":152},{"code":151},"┌────────────────────────────────────────┐\n│ 根合成层 (Root Layer) │\n│ ┌──────────────────────────────────┐ │\n│ │ 固定定位元素层 │ │\n│ └──────────────────────────────────┘ │\n│ ┌──────────────────────────────────┐ │\n│ │ 3D 变换元素层 │ │\n│ └──────────────────────────────────┘ │\n│ ┌──────────────────────────────────┐ │\n│ │ video/canvas 元素层 │ │\n│ └──────────────────────────────────┘ │\n└────────────────────────────────────────┘\n",[153],{"type":25,"tag":82,"props":154,"children":155},{"__ignoreMap":7},[156],{"type":31,"value":151},{"type":25,"tag":45,"props":158,"children":160},{"id":159},"_4-绘制-paint",[161],{"type":31,"value":162},"4. 绘制 (Paint)",{"type":25,"tag":33,"props":164,"children":165},{},[166],{"type":31,"value":167},"生成每个层的绘制指令列表（但不真正执行）：",{"type":25,"tag":77,"props":169,"children":172},{"code":170,"language":110,"meta":7,"className":171},"// 绘制指令示例\n[\n { op: 'drawRect', x: 0, y: 0, w: 100, h: 100, color: '#f00' },\n { op: 'drawText', text: 'Hello', x: 10, y: 50, font: '16px Arial' },\n { op: 'drawImage', src: '...', x: 0, y: 0, w: 50, h: 50 }\n]\n",[112],[173],{"type":25,"tag":82,"props":174,"children":175},{"__ignoreMap":7},[176],{"type":31,"value":170},{"type":25,"tag":45,"props":178,"children":180},{"id":179},"_5-光栅化-raster",[181],{"type":31,"value":182},"5. 光栅化 (Raster)",{"type":25,"tag":33,"props":184,"children":185},{},[186],{"type":31,"value":187},"将绘制指令转换为像素（位图）。这一步 GPU 参与：",{"type":25,"tag":77,"props":189,"children":192},{"code":190,"language":110,"meta":7,"className":191},"// GPU 并行处理\nfor (const pixel of layer.pixels) {\n pixel.color = executeDrawCommands(drawCommands, pixel.x, pixel.y)\n}\n",[112],[193],{"type":25,"tag":82,"props":194,"children":195},{"__ignoreMap":7},[196],{"type":31,"value":190},{"type":25,"tag":45,"props":198,"children":200},{"id":199},"_6-合成-composite",[201],{"type":31,"value":202},"6. 合成 (Composite)",{"type":25,"tag":33,"props":204,"children":205},{},[206],{"type":31,"value":207},"将所有层按顺序合并，输出最终画面。完全在 GPU 上执行：",{"type":25,"tag":77,"props":209,"children":212},{"code":210,"language":110,"meta":7,"className":211},"finalImage = composeLayers([layer1, layer2, layer3], zIndex, opacity, transforms)\n",[112],[213],{"type":25,"tag":82,"props":214,"children":215},{"__ignoreMap":7},[216],{"type":31,"value":210},{"type":25,"tag":26,"props":218,"children":220},{"id":219},"硬件加速触发条件",[221],{"type":31,"value":219},{"type":25,"tag":33,"props":223,"children":224},{},[225],{"type":31,"value":226},"并非所有元素都会创建独立的合成层。只有满足特定条件的元素才会被提升为合成层，享受 GPU 加速：",{"type":25,"tag":45,"props":228,"children":230},{"id":229},"触发条件",[231],{"type":31,"value":229},{"type":25,"tag":233,"props":234,"children":235},"table",{},[236,255],{"type":25,"tag":237,"props":238,"children":239},"thead",{},[240],{"type":25,"tag":241,"props":242,"children":243},"tr",{},[244,250],{"type":25,"tag":245,"props":246,"children":247},"th",{},[248],{"type":31,"value":249},"条件",{"type":25,"tag":245,"props":251,"children":252},{},[253],{"type":31,"value":254},"示例",{"type":25,"tag":256,"props":257,"children":258},"tbody",{},[259,285,306,333,350,367,384,403],{"type":25,"tag":241,"props":260,"children":261},{},[262,268],{"type":25,"tag":263,"props":264,"children":265},"td",{},[266],{"type":31,"value":267},"3D 变换",{"type":25,"tag":263,"props":269,"children":270},{},[271,277,279],{"type":25,"tag":82,"props":272,"children":274},{"className":273},[],[275],{"type":31,"value":276},"transform: translateZ(0)",{"type":31,"value":278}," ",{"type":25,"tag":82,"props":280,"children":282},{"className":281},[],[283],{"type":31,"value":284},"translate3d(0,0,0)",{"type":25,"tag":241,"props":286,"children":287},{},[288,297],{"type":25,"tag":263,"props":289,"children":290},{},[291],{"type":25,"tag":82,"props":292,"children":294},{"className":293},[],[295],{"type":31,"value":296},"will-change",{"type":25,"tag":263,"props":298,"children":299},{},[300],{"type":25,"tag":82,"props":301,"children":303},{"className":302},[],[304],{"type":31,"value":305},"will-change: transform",{"type":25,"tag":241,"props":307,"children":308},{},[309,320],{"type":25,"tag":263,"props":310,"children":311},{},[312,318],{"type":25,"tag":82,"props":313,"children":315},{"className":314},[],[316],{"type":31,"value":317},"opacity",{"type":31,"value":319}," 动画",{"type":25,"tag":263,"props":321,"children":322},{},[323,325,331],{"type":31,"value":324},"与 ",{"type":25,"tag":82,"props":326,"children":328},{"className":327},[],[329],{"type":31,"value":330},"transform",{"type":31,"value":332}," 结合使用",{"type":25,"tag":241,"props":334,"children":335},{},[336,341],{"type":25,"tag":263,"props":337,"children":338},{},[339],{"type":31,"value":340},"视频元素",{"type":25,"tag":263,"props":342,"children":343},{},[344],{"type":25,"tag":82,"props":345,"children":347},{"className":346},[],[348],{"type":31,"value":349},"\u003Cvideo>",{"type":25,"tag":241,"props":351,"children":352},{},[353,358],{"type":25,"tag":263,"props":354,"children":355},{},[356],{"type":31,"value":357},"Canvas 元素",{"type":25,"tag":263,"props":359,"children":360},{},[361],{"type":25,"tag":82,"props":362,"children":364},{"className":363},[],[365],{"type":31,"value":366},"\u003Ccanvas>",{"type":25,"tag":241,"props":368,"children":369},{},[370,375],{"type":25,"tag":263,"props":371,"children":372},{},[373],{"type":31,"value":374},"CSS Filter",{"type":25,"tag":263,"props":376,"children":377},{},[378],{"type":25,"tag":82,"props":379,"children":381},{"className":380},[],[382],{"type":31,"value":383},"filter: blur(5px)",{"type":25,"tag":241,"props":385,"children":386},{},[387,392],{"type":25,"tag":263,"props":388,"children":389},{},[390],{"type":31,"value":391},"固定定位",{"type":25,"tag":263,"props":393,"children":394},{},[395,401],{"type":25,"tag":82,"props":396,"children":398},{"className":397},[],[399],{"type":31,"value":400},"position: fixed",{"type":31,"value":402},"（部分浏览器）",{"type":25,"tag":241,"props":404,"children":405},{},[406,411],{"type":25,"tag":263,"props":407,"children":408},{},[409],{"type":31,"value":410},"子元素有合成层",{"type":25,"tag":263,"props":412,"children":413},{},[414],{"type":31,"value":415},"为避免层叠问题而提升",{"type":25,"tag":45,"props":417,"children":419},{"id":418},"查看合成层",[420],{"type":31,"value":418},{"type":25,"tag":33,"props":422,"children":423},{},[424],{"type":31,"value":425},"使用 Chrome DevTools 的 Layers 面板：",{"type":25,"tag":427,"props":428,"children":429},"ol",{},[430,436,441],{"type":25,"tag":431,"props":432,"children":433},"li",{},[434],{"type":31,"value":435},"打开 DevTools → 更多工具 → Layers",{"type":25,"tag":431,"props":437,"children":438},{},[439],{"type":31,"value":440},"旋转 3D 视图查看层堆叠",{"type":25,"tag":431,"props":442,"children":443},{},[444],{"type":31,"value":445},"点击每个层查看创建原因",{"type":25,"tag":77,"props":447,"children":450},{"code":448,"language":110,"meta":7,"className":449},"// 在控制台查看某元素是否有独立层\ngetComputedStyle(element).willChange // 如果不是 'auto'，可能有独立层\n",[112],[451],{"type":25,"tag":82,"props":452,"children":453},{"__ignoreMap":7},[454],{"type":31,"value":448},{"type":25,"tag":26,"props":456,"children":458},{"id":457},"transform-与-opacity为何特殊",[459],{"type":31,"value":460},"transform 与 opacity：为何特殊",{"type":25,"tag":45,"props":462,"children":464},{"id":463},"仅合成阶段即可处理",[465],{"type":31,"value":463},{"type":25,"tag":33,"props":467,"children":468},{},[469,474,476,481,483,488],{"type":25,"tag":82,"props":470,"children":472},{"className":471},[],[473],{"type":31,"value":330},{"type":31,"value":475}," 和 ",{"type":25,"tag":82,"props":477,"children":479},{"className":478},[],[480],{"type":31,"value":317},{"type":31,"value":482}," 之所以高效，是因为它们",{"type":25,"tag":57,"props":484,"children":485},{},[486],{"type":31,"value":487},"只影响合成阶段",{"type":31,"value":489},"，不触发布局和绘制：",{"type":25,"tag":77,"props":491,"children":493},{"code":492},"完整渲染管线：\n 样式 → 布局 → 分层 → 绘制 → 光栅化 → 合成\n\n修改 width:\n 样式 → 布局 → 分层 → 绘制 → 光栅化 → 合成（几乎全部）\n\n修改 background:\n 样式 → 绘制 → 光栅化 → 合成（跳过布局）\n\n修改 transform/opacity:\n 合成（只有最后一步！）\n",[494],{"type":25,"tag":82,"props":495,"children":496},{"__ignoreMap":7},[497],{"type":31,"value":492},{"type":25,"tag":45,"props":499,"children":501},{"id":500},"实际对比",[502],{"type":31,"value":500},{"type":25,"tag":77,"props":504,"children":509},{"code":505,"language":506,"meta":7,"className":507},"/* ❌ 触发布局 + 绘制 + 合成 */\n.animate-bad {\n transition: left 0.3s, top 0.3s;\n}\n.animate-bad:hover {\n left: 100px;\n top: 100px;\n}\n\n/* ✅ 只触发合成 */\n.animate-good {\n transition: transform 0.3s;\n}\n.animate-good:hover {\n transform: translate(100px, 100px);\n}\n","css",[508],"language-css",[510],{"type":25,"tag":82,"props":511,"children":512},{"__ignoreMap":7},[513],{"type":31,"value":505},{"type":25,"tag":33,"props":515,"children":516},{},[517,519,524],{"type":31,"value":518},"性能差异可达 ",{"type":25,"tag":57,"props":520,"children":521},{},[522],{"type":31,"value":523},"10-100 倍",{"type":31,"value":525},"。",{"type":25,"tag":26,"props":527,"children":529},{"id":528},"will-change提前告知优化意图",[530],{"type":31,"value":531},"will-change：提前告知优化意图",{"type":25,"tag":45,"props":533,"children":535},{"id":534},"工作原理",[536],{"type":31,"value":534},{"type":25,"tag":33,"props":538,"children":539},{},[540,545],{"type":25,"tag":82,"props":541,"children":543},{"className":542},[],[544],{"type":31,"value":296},{"type":31,"value":546}," 告诉浏览器\"这个属性即将变化，请提前优化\"：",{"type":25,"tag":77,"props":548,"children":551},{"code":549,"language":506,"meta":7,"className":550},".animate-soon {\n will-change: transform, opacity;\n}\n",[508],[552],{"type":25,"tag":82,"props":553,"children":554},{"__ignoreMap":7},[555],{"type":31,"value":549},{"type":25,"tag":33,"props":557,"children":558},{},[559],{"type":31,"value":560},"浏览器收到提示后：",{"type":25,"tag":427,"props":562,"children":563},{},[564,569,574],{"type":25,"tag":431,"props":565,"children":566},{},[567],{"type":31,"value":568},"提前创建合成层",{"type":25,"tag":431,"props":570,"children":571},{},[572],{"type":31,"value":573},"分配 GPU 内存",{"type":25,"tag":431,"props":575,"children":576},{},[577],{"type":31,"value":578},"准备好纹理",{"type":25,"tag":45,"props":580,"children":582},{"id":581},"正确用法",[583],{"type":31,"value":581},{"type":25,"tag":77,"props":585,"children":588},{"code":586,"language":506,"meta":7,"className":587},"/* ✅ 悬停前提前准备 */\n.card {\n transition: transform 0.3s;\n}\n.card:hover {\n will-change: transform;\n}\n.card:active {\n transform: scale(1.05);\n}\n\n/* ✅ 用 JavaScript 动态控制 */\nelement.addEventListener('mouseenter', () => {\n element.style.willChange = 'transform'\n})\nelement.addEventListener('transitionend', () => {\n element.style.willChange = 'auto' // 动画结束后移除\n})\n",[508],[589],{"type":25,"tag":82,"props":590,"children":591},{"__ignoreMap":7},[592],{"type":31,"value":586},{"type":25,"tag":45,"props":594,"children":596},{"id":595},"滥用的代价",[597],{"type":31,"value":595},{"type":25,"tag":77,"props":599,"children":602},{"code":600,"language":506,"meta":7,"className":601},"/* ❌ 危险：全局应用 */\n* {\n will-change: transform, opacity;\n}\n",[508],[603],{"type":25,"tag":82,"props":604,"children":605},{"__ignoreMap":7},[606],{"type":31,"value":600},{"type":25,"tag":33,"props":608,"children":609},{},[610],{"type":31,"value":611},"后果：",{"type":25,"tag":613,"props":614,"children":615},"ul",{},[616,621,626],{"type":25,"tag":431,"props":617,"children":618},{},[619],{"type":31,"value":620},"每个元素都创建合成层",{"type":25,"tag":431,"props":622,"children":623},{},[624],{"type":31,"value":625},"GPU 内存爆炸",{"type":25,"tag":431,"props":627,"children":628},{},[629],{"type":31,"value":630},"反而拖慢渲染",{"type":25,"tag":33,"props":632,"children":633},{},[634,639],{"type":25,"tag":57,"props":635,"children":636},{},[637],{"type":31,"value":638},"原则",{"type":31,"value":640},"：只在动画发生前设置，动画结束后移除。",{"type":25,"tag":26,"props":642,"children":644},{"id":643},"层爆炸问题",[645],{"type":31,"value":643},{"type":25,"tag":45,"props":647,"children":649},{"id":648},"什么是层爆炸",[650],{"type":31,"value":648},{"type":25,"tag":33,"props":652,"children":653},{},[654],{"type":31,"value":655},"当页面创建过多合成层时，会消耗大量 GPU 内存：",{"type":25,"tag":77,"props":657,"children":662},{"code":658,"language":659,"meta":7,"className":660},"\u003C!-- 每个 item 都有 3D 变换，都是独立层 -->\n\u003Cdiv class=\"list\">\n \u003Cdiv class=\"item\" style=\"transform: translateZ(0)\">1\u003C/div>\n \u003Cdiv class=\"item\" style=\"transform: translateZ(0)\">2\u003C/div>\n \u003C!-- ... 1000 个 -->\n \u003Cdiv class=\"item\" style=\"transform: translateZ(0)\">1000\u003C/div>\n\u003C/div>\n","html",[661],"language-html",[663],{"type":25,"tag":82,"props":664,"children":665},{"__ignoreMap":7},[666],{"type":31,"value":658},{"type":25,"tag":33,"props":668,"children":669},{},[670],{"type":31,"value":671},"1000 个独立层 × 每层占用内存 = 内存溢出！",{"type":25,"tag":45,"props":673,"children":675},{"id":674},"隐式提升",[676],{"type":31,"value":674},{"type":25,"tag":33,"props":678,"children":679},{},[680],{"type":31,"value":681},"更危险的是隐式提升——子元素有合成层时，父元素可能被强制提升：",{"type":25,"tag":77,"props":683,"children":686},{"code":684,"language":506,"meta":7,"className":685},"/* .parent 会被隐式提升为合成层，因为子元素层叠在其上 */\n.parent {\n position: relative;\n}\n.child {\n position: absolute;\n transform: translateZ(0); /* 创建合成层 */\n z-index: 1; /* 在 parent 之上 */\n}\n",[508],[687],{"type":25,"tag":82,"props":688,"children":689},{"__ignoreMap":7},[690],{"type":31,"value":684},{"type":25,"tag":45,"props":692,"children":694},{"id":693},"检测与解决",[695],{"type":31,"value":693},{"type":25,"tag":77,"props":697,"children":700},{"code":698,"language":110,"meta":7,"className":699},"// 检测层数量\nconst layerCount = document.querySelectorAll('[style*=\"translateZ\"], [style*=\"will-change\"]').length\nconsole.log(`当前层数: ${layerCount}`)\n\n// Chrome DevTools Layers 面板\n// 查看 \"Compositing Reasons\" 了解每层创建原因\n",[112],[701],{"type":25,"tag":82,"props":702,"children":703},{"__ignoreMap":7},[704],{"type":31,"value":698},{"type":25,"tag":33,"props":706,"children":707},{},[708],{"type":31,"value":709},"解决方案：",{"type":25,"tag":427,"props":711,"children":712},{},[713,718,723],{"type":25,"tag":431,"props":714,"children":715},{},[716],{"type":31,"value":717},"只在必要的元素上使用 3D 变换",{"type":25,"tag":431,"props":719,"children":720},{},[721],{"type":31,"value":722},"合并小层为大层",{"type":25,"tag":431,"props":724,"children":725},{},[726,728,734],{"type":31,"value":727},"使用 ",{"type":25,"tag":82,"props":729,"children":731},{"className":730},[],[732],{"type":31,"value":733},"isolation: isolate",{"type":31,"value":735}," 控制层叠上下文",{"type":25,"tag":26,"props":737,"children":739},{"id":738},"实战60fps-动画优化",[740],{"type":31,"value":741},"实战：60fps 动画优化",{"type":25,"tag":45,"props":743,"children":745},{"id":744},"案例流畅的卡片悬停效果",[746],{"type":31,"value":747},"案例：流畅的卡片悬停效果",{"type":25,"tag":77,"props":749,"children":752},{"code":750,"language":506,"meta":7,"className":751},"/* 优化前 */\n.card {\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n transition: all 0.3s;\n}\n.card:hover {\n box-shadow: 0 8px 32px rgba(0,0,0,0.2);\n margin-top: -10px; /* ❌ 触发布局 */\n}\n\n/* 优化后 */\n.card {\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n transition: transform 0.3s, box-shadow 0.3s;\n}\n.card:hover {\n transform: translateY(-10px); /* ✅ 只触发合成 */\n box-shadow: 0 8px 32px rgba(0,0,0,0.2);\n}\n",[508],[753],{"type":25,"tag":82,"props":754,"children":755},{"__ignoreMap":7},[756],{"type":31,"value":750},{"type":25,"tag":45,"props":758,"children":760},{"id":759},"案例滚动视差效果",[761],{"type":31,"value":762},"案例：滚动视差效果",{"type":25,"tag":77,"props":764,"children":767},{"code":765,"language":110,"meta":7,"className":766},"// ❌ 滚动时直接修改 top\nwindow.addEventListener('scroll', () => {\n const scrollY = window.scrollY\n parallaxElement.style.top = scrollY * 0.5 + 'px' // 触发布局\n})\n\n// ✅ 使用 transform\nwindow.addEventListener('scroll', () => {\n const scrollY = window.scrollY\n parallaxElement.style.transform = `translateY(${scrollY * 0.5}px)` // 只触发合成\n})\n\n// ✅✅ 最佳：使用 CSS scroll-driven animation（现代浏览器）\n.parallax {\n animation: parallax linear;\n animation-timeline: scroll();\n}\n@keyframes parallax {\n from { transform: translateY(0); }\n to { transform: translateY(-50%); }\n}\n",[112],[768],{"type":25,"tag":82,"props":769,"children":770},{"__ignoreMap":7},[771],{"type":31,"value":765},{"type":25,"tag":45,"props":773,"children":775},{"id":774},"案例复杂列表动画",[776],{"type":31,"value":777},"案例：复杂列表动画",{"type":25,"tag":77,"props":779,"children":782},{"code":780,"language":110,"meta":7,"className":781},"// ❌ 一次性给所有项目添加动画\nitems.forEach(item => {\n item.classList.add('animate-in')\n})\n\n// ✅ 分批处理，避免层爆炸\nconst batchSize = 10\nfor (let i = 0; i \u003C items.length; i += batchSize) {\n requestAnimationFrame(() => {\n items.slice(i, i + batchSize).forEach(item => {\n item.classList.add('animate-in')\n })\n })\n}\n\n// ✅✅ 使用 content-visibility 优化屏幕外元素\n.list-item {\n content-visibility: auto;\n contain-intrinsic-size: 0 100px;\n}\n",[112],[783],{"type":25,"tag":82,"props":784,"children":785},{"__ignoreMap":7},[786],{"type":31,"value":780},{"type":25,"tag":26,"props":788,"children":790},{"id":789},"调试工具",[791],{"type":31,"value":789},{"type":25,"tag":45,"props":793,"children":795},{"id":794},"chrome-devtools-渲染选项",[796],{"type":31,"value":797},"Chrome DevTools 渲染选项",{"type":25,"tag":33,"props":799,"children":800},{},[801],{"type":31,"value":802},"在 DevTools 中启用以下选项：",{"type":25,"tag":77,"props":804,"children":806},{"code":805},"设置 → 更多工具 → 渲染\n ☑️ Paint flashing // 高亮重绘区域\n ☑️ Layer borders // 显示层边界\n ☑️ FPS meter // 显示帧率\n",[807],{"type":25,"tag":82,"props":808,"children":809},{"__ignoreMap":7},[810],{"type":31,"value":805},{"type":25,"tag":45,"props":812,"children":814},{"id":813},"performance-面板分析",[815],{"type":31,"value":816},"Performance 面板分析",{"type":25,"tag":427,"props":818,"children":819},{},[820,825,830],{"type":25,"tag":431,"props":821,"children":822},{},[823],{"type":31,"value":824},"录制动画过程",{"type":25,"tag":431,"props":826,"children":827},{},[828],{"type":31,"value":829},"查看 Summary 中 Rendering/Painting/Scripting 占比",{"type":25,"tag":431,"props":831,"children":832},{},[833],{"type":31,"value":834},"理想状态：绿色（Painting）和紫色（Rendering）尽可能少",{"type":25,"tag":45,"props":836,"children":838},{"id":837},"代码检测",[839],{"type":31,"value":837},{"type":25,"tag":77,"props":841,"children":844},{"code":842,"language":110,"meta":7,"className":843},"// 检测是否使用硬件加速\nfunction isHardwareAccelerated(element) {\n const style = getComputedStyle(element)\n const transform = style.transform\n const willChange = style.willChange\n \n return (\n transform !== 'none' ||\n willChange.includes('transform') ||\n willChange.includes('opacity')\n )\n}\n\n// 监控帧率\nlet lastTime = performance.now()\nlet frameCount = 0\nfunction measureFPS() {\n frameCount++\n const now = performance.now()\n if (now - lastTime >= 1000) {\n console.log(`FPS: ${frameCount}`)\n frameCount = 0\n lastTime = now\n }\n requestAnimationFrame(measureFPS)\n}\nmeasureFPS()\n",[112],[845],{"type":25,"tag":82,"props":846,"children":847},{"__ignoreMap":7},[848],{"type":31,"value":842},{"type":25,"tag":26,"props":850,"children":852},{"id":851},"总结",[853],{"type":31,"value":851},{"type":25,"tag":33,"props":855,"children":856},{},[857],{"type":31,"value":858},"GPU 加速的核心要点：",{"type":25,"tag":233,"props":860,"children":861},{},[862,878],{"type":25,"tag":237,"props":863,"children":864},{},[865],{"type":25,"tag":241,"props":866,"children":867},{},[868,873],{"type":25,"tag":245,"props":869,"children":870},{},[871],{"type":31,"value":872},"要点",{"type":25,"tag":245,"props":874,"children":875},{},[876],{"type":31,"value":877},"说明",{"type":25,"tag":256,"props":879,"children":880},{},[881,897,913,929,945],{"type":25,"tag":241,"props":882,"children":883},{},[884,892],{"type":25,"tag":263,"props":885,"children":886},{},[887],{"type":25,"tag":57,"props":888,"children":889},{},[890],{"type":31,"value":891},"分层是关键",{"type":25,"tag":263,"props":893,"children":894},{},[895],{"type":31,"value":896},"独立合成层才能享受 GPU 加速",{"type":25,"tag":241,"props":898,"children":899},{},[900,908],{"type":25,"tag":263,"props":901,"children":902},{},[903],{"type":25,"tag":57,"props":904,"children":905},{},[906],{"type":31,"value":907},"transform/opacity 优先",{"type":25,"tag":263,"props":909,"children":910},{},[911],{"type":31,"value":912},"只触发合成，性能最佳",{"type":25,"tag":241,"props":914,"children":915},{},[916,924],{"type":25,"tag":263,"props":917,"children":918},{},[919],{"type":25,"tag":57,"props":920,"children":921},{},[922],{"type":31,"value":923},"避免层爆炸",{"type":25,"tag":263,"props":925,"children":926},{},[927],{"type":31,"value":928},"合成层不是越多越好",{"type":25,"tag":241,"props":930,"children":931},{},[932,940],{"type":25,"tag":263,"props":933,"children":934},{},[935],{"type":25,"tag":57,"props":936,"children":937},{},[938],{"type":31,"value":939},"will-change 谨慎使用",{"type":25,"tag":263,"props":941,"children":942},{},[943],{"type":31,"value":944},"动态开启，用完即关",{"type":25,"tag":241,"props":946,"children":947},{},[948,956],{"type":25,"tag":263,"props":949,"children":950},{},[951],{"type":25,"tag":57,"props":952,"children":953},{},[954],{"type":31,"value":955},"工具辅助",{"type":25,"tag":263,"props":957,"children":958},{},[959],{"type":31,"value":960},"Layers 面板 + FPS 监控",{"type":25,"tag":33,"props":962,"children":963},{},[964,966,971],{"type":31,"value":965},"记住：GPU 是一把双刃剑。用得好，60fps 丝滑流畅；用得不好，内存爆炸、反而更卡。",{"type":25,"tag":57,"props":967,"children":968},{},[969],{"type":31,"value":970},"只对真正需要动画的元素启用硬件加速",{"type":31,"value":972},"，才是正道。",{"type":25,"tag":26,"props":974,"children":976},{"id":975},"延伸阅读",[977],{"type":31,"value":975},{"type":25,"tag":613,"props":979,"children":980},{},[981,993,1005],{"type":25,"tag":431,"props":982,"children":983},{},[984],{"type":25,"tag":985,"props":986,"children":990},"a",{"href":987,"rel":988},"https://chromium.googlesource.com/chromium/src/+/master/docs/how_cc_works.md",[989],"nofollow",[991],{"type":31,"value":992},"Chromium Compositing",{"type":25,"tag":431,"props":994,"children":995},{},[996,1003],{"type":25,"tag":985,"props":997,"children":1000},{"href":998,"rel":999},"https://csstriggers.com",[989],[1001],{"type":31,"value":1002},"CSS Triggers",{"type":31,"value":1004}," - 查看各属性触发的渲染阶段",{"type":25,"tag":431,"props":1006,"children":1007},{},[1008],{"type":25,"tag":985,"props":1009,"children":1012},{"href":1010,"rel":1011},"https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome",[989],[1013],{"type":31,"value":1014},"GPU Accelerated Compositing in Chrome",{"title":7,"searchDepth":1016,"depth":1016,"links":1017},3,[1018,1020,1023,1031,1035,1039,1044,1049,1054,1059,1060],{"id":28,"depth":1019,"text":8},2,{"id":40,"depth":1019,"text":43,"children":1021},[1022],{"id":47,"depth":1016,"text":50},{"id":88,"depth":1019,"text":88,"children":1024},[1025,1026,1027,1028,1029,1030],{"id":98,"depth":1016,"text":101},{"id":120,"depth":1016,"text":123},{"id":140,"depth":1016,"text":143},{"id":159,"depth":1016,"text":162},{"id":179,"depth":1016,"text":182},{"id":199,"depth":1016,"text":202},{"id":219,"depth":1019,"text":219,"children":1032},[1033,1034],{"id":229,"depth":1016,"text":229},{"id":418,"depth":1016,"text":418},{"id":457,"depth":1019,"text":460,"children":1036},[1037,1038],{"id":463,"depth":1016,"text":463},{"id":500,"depth":1016,"text":500},{"id":528,"depth":1019,"text":531,"children":1040},[1041,1042,1043],{"id":534,"depth":1016,"text":534},{"id":581,"depth":1016,"text":581},{"id":595,"depth":1016,"text":595},{"id":643,"depth":1019,"text":643,"children":1045},[1046,1047,1048],{"id":648,"depth":1016,"text":648},{"id":674,"depth":1016,"text":674},{"id":693,"depth":1016,"text":693},{"id":738,"depth":1019,"text":741,"children":1050},[1051,1052,1053],{"id":744,"depth":1016,"text":747},{"id":759,"depth":1016,"text":762},{"id":774,"depth":1016,"text":777},{"id":789,"depth":1019,"text":789,"children":1055},[1056,1057,1058],{"id":794,"depth":1016,"text":797},{"id":813,"depth":1016,"text":816},{"id":837,"depth":1016,"text":837},{"id":851,"depth":1019,"text":851},{"id":975,"depth":1019,"text":975},"markdown","content:topics:performance:gpu-acceleration-rendering-guide.md","content","topics/performance/gpu-acceleration-rendering-guide.md","topics/performance/gpu-acceleration-rendering-guide","md",[1068,2016,3345],{"_path":1069,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":1070,"description":1071,"date":1072,"topic":5,"author":11,"tags":1073,"image":1079,"featured":19,"readingTime":1080,"body":1081,"_type":1061,"_id":2013,"_source":1063,"_file":2014,"_stem":2015,"_extension":1066},"/topics/performance/lcp-optimization-theory-practice","LCP 优化：从理论到实践","从渲染管线与 LCP 候选元素规则出发，系统讲清 LCP 变慢的根因，提供可复现的诊断流程与可落地的优化手段（图片、字体、SSR/CSR、资源优先级、CDN）。","2026-01-20",[1074,1075,1076,1077,1078],"性能优化","LCP","Core Web Vitals","图片优化","CDN","/images/topics/performance/lcp.jpg",23,{"type":22,"children":1082,"toc":1987},[1083,1088,1093,1098,1116,1121,1141,1146,1164,1168,1174,1179,1215,1220,1225,1228,1234,1239,1252,1257,1270,1275,1298,1301,1307,1312,1317,1322,1345,1348,1354,1360,1365,1378,1383,1396,1402,1407,1420,1426,1444,1447,1453,1459,1464,1482,1488,1501,1520,1526,1531,1540,1545,1554,1559,1565,1583,1586,1592,1598,1603,1616,1622,1627,1632,1654,1657,1663,1668,1673,1686,1691,1709,1714,1732,1735,1741,1746,1755,1760,1763,1769,1886,1889,1895,1957,1960,1964,1969],{"type":25,"tag":26,"props":1084,"children":1086},{"id":1085},"lcp-优化从理论到实践",[1087],{"type":31,"value":1070},{"type":25,"tag":33,"props":1089,"children":1090},{},[1091],{"type":31,"value":1092},"LCP（Largest Contentful Paint）是 Core Web Vitals 中最能代表“用户主观感受”的指标之一：它近似回答了“页面主要内容什么时候真正出来”。",{"type":25,"tag":33,"props":1094,"children":1095},{},[1096],{"type":31,"value":1097},"很多团队优化 LCP 的方式是：",{"type":25,"tag":613,"props":1099,"children":1100},{},[1101,1106,1111],{"type":25,"tag":431,"props":1102,"children":1103},{},[1104],{"type":31,"value":1105},"“把图片压一压”",{"type":25,"tag":431,"props":1107,"children":1108},{},[1109],{"type":31,"value":1110},"“上 CDN”",{"type":25,"tag":431,"props":1112,"children":1113},{},[1114],{"type":31,"value":1115},"“开 SSR”",{"type":25,"tag":33,"props":1117,"children":1118},{},[1119],{"type":31,"value":1120},"这些手段可能有效，但也经常无效——因为你没搞清楚：",{"type":25,"tag":613,"props":1122,"children":1123},{},[1124,1136],{"type":25,"tag":431,"props":1125,"children":1126},{},[1127,1129,1134],{"type":31,"value":1128},"LCP 的",{"type":25,"tag":57,"props":1130,"children":1131},{},[1132],{"type":31,"value":1133},"候选元素",{"type":31,"value":1135},"到底是谁？",{"type":25,"tag":431,"props":1137,"children":1138},{},[1139],{"type":31,"value":1140},"LCP 的时间到底卡在：网络、解析、布局、绘制还是 JS？",{"type":25,"tag":33,"props":1142,"children":1143},{},[1144],{"type":31,"value":1145},"这篇文章按“你能在生产上稳定把 LCP 做到好”为目标，给出：",{"type":25,"tag":613,"props":1147,"children":1148},{},[1149,1154,1159],{"type":25,"tag":431,"props":1150,"children":1151},{},[1152],{"type":31,"value":1153},"一套诊断流程（从现象到根因）",{"type":25,"tag":431,"props":1155,"children":1156},{},[1157],{"type":31,"value":1158},"一套常见根因 → 对应策略的映射",{"type":25,"tag":431,"props":1160,"children":1161},{},[1162],{"type":31,"value":1163},"可落地的优化手段与检查清单",{"type":25,"tag":1165,"props":1166,"children":1167},"hr",{},[],{"type":25,"tag":26,"props":1169,"children":1171},{"id":1170},"_1-lcp-的本质不是首屏渲染而是最大内容出现",[1172],{"type":31,"value":1173},"1. LCP 的本质：不是“首屏渲染”，而是“最大内容出现”",{"type":25,"tag":33,"props":1175,"children":1176},{},[1177],{"type":31,"value":1178},"浏览器会从候选元素里选一个“最大内容元素”作为 LCP 候选，常见类型包括：",{"type":25,"tag":613,"props":1180,"children":1181},{},[1182,1191,1202],{"type":25,"tag":431,"props":1183,"children":1184},{},[1185],{"type":25,"tag":82,"props":1186,"children":1188},{"className":1187},[],[1189],{"type":31,"value":1190},"img",{"type":25,"tag":431,"props":1192,"children":1193},{},[1194,1200],{"type":25,"tag":82,"props":1195,"children":1197},{"className":1196},[],[1198],{"type":31,"value":1199},"image",{"type":31,"value":1201}," 的背景图（某些情况下）",{"type":25,"tag":431,"props":1203,"children":1204},{},[1205,1207,1213],{"type":31,"value":1206},"大块文本（如 ",{"type":25,"tag":82,"props":1208,"children":1210},{"className":1209},[],[1211],{"type":31,"value":1212},"h1",{"type":31,"value":1214},"/正文块）",{"type":25,"tag":33,"props":1216,"children":1217},{},[1218],{"type":31,"value":1219},"LCP 的时间点是：这个最大元素被绘制到屏幕上的时间。",{"type":25,"tag":33,"props":1221,"children":1222},{},[1223],{"type":31,"value":1224},"关键：LCP 不是你以为的“所有内容都 ready”。它只关注“最大那个”。",{"type":25,"tag":1165,"props":1226,"children":1227},{},[],{"type":25,"tag":26,"props":1229,"children":1231},{"id":1230},"_2-先做识别你的-lcp-元素是谁",[1232],{"type":31,"value":1233},"2. 先做识别：你的 LCP 元素是谁？",{"type":25,"tag":33,"props":1235,"children":1236},{},[1237],{"type":31,"value":1238},"在 Chrome DevTools：",{"type":25,"tag":613,"props":1240,"children":1241},{},[1242,1247],{"type":25,"tag":431,"props":1243,"children":1244},{},[1245],{"type":31,"value":1246},"Performance 面板 → Web Vitals",{"type":25,"tag":431,"props":1248,"children":1249},{},[1250],{"type":31,"value":1251},"或 Lighthouse 报告里会告诉你 LCP 元素",{"type":25,"tag":33,"props":1253,"children":1254},{},[1255],{"type":31,"value":1256},"你要记录两件事：",{"type":25,"tag":613,"props":1258,"children":1259},{},[1260,1265],{"type":25,"tag":431,"props":1261,"children":1262},{},[1263],{"type":31,"value":1264},"LCP 元素类型（图片/文本）",{"type":25,"tag":431,"props":1266,"children":1267},{},[1268],{"type":31,"value":1269},"LCP 元素来源（HTML 直出、JS 渲染、背景图、第三方）",{"type":25,"tag":33,"props":1271,"children":1272},{},[1273],{"type":31,"value":1274},"因为两类 LCP 的优化路线完全不同：",{"type":25,"tag":613,"props":1276,"children":1277},{},[1278,1288],{"type":25,"tag":431,"props":1279,"children":1280},{},[1281,1286],{"type":25,"tag":57,"props":1282,"children":1283},{},[1284],{"type":31,"value":1285},"图片 LCP",{"type":31,"value":1287},"：网络 + 解码 + 优先级",{"type":25,"tag":431,"props":1289,"children":1290},{},[1291,1296],{"type":25,"tag":57,"props":1292,"children":1293},{},[1294],{"type":31,"value":1295},"文本 LCP",{"type":31,"value":1297},"：CSS/字体阻塞 + layout + 渲染",{"type":25,"tag":1165,"props":1299,"children":1300},{},[],{"type":25,"tag":26,"props":1302,"children":1304},{"id":1303},"_3-分解-lcp把总时间拆成可行动的部分",[1305],{"type":31,"value":1306},"3. 分解 LCP：把“总时间”拆成可行动的部分",{"type":25,"tag":33,"props":1308,"children":1309},{},[1310],{"type":31,"value":1311},"一个可用的分解模型：",{"type":25,"tag":33,"props":1313,"children":1314},{},[1315],{"type":31,"value":1316},"$$\nLCP \\approx TTFB + \\text{资源发现/调度} + \\text{下载} + \\text{解码/布局/绘制}\n$$",{"type":25,"tag":33,"props":1318,"children":1319},{},[1320],{"type":31,"value":1321},"你不需要完全精确，但必须能回答：",{"type":25,"tag":613,"props":1323,"children":1324},{},[1325,1330,1335,1340],{"type":25,"tag":431,"props":1326,"children":1327},{},[1328],{"type":31,"value":1329},"慢在服务器？（TTFB）",{"type":25,"tag":431,"props":1331,"children":1332},{},[1333],{"type":31,"value":1334},"慢在资源发现？（preload/优先级）",{"type":25,"tag":431,"props":1336,"children":1337},{},[1338],{"type":31,"value":1339},"慢在下载？（图片太大、带宽、CDN）",{"type":25,"tag":431,"props":1341,"children":1342},{},[1343],{"type":31,"value":1344},"慢在主线程？（长任务、渲染阻塞）",{"type":25,"tag":1165,"props":1346,"children":1347},{},[],{"type":25,"tag":26,"props":1349,"children":1351},{"id":1350},"_4-诊断流程生产可用版",[1352],{"type":31,"value":1353},"4. 诊断流程（生产可用版）",{"type":25,"tag":45,"props":1355,"children":1357},{"id":1356},"step-1看字段真实用户的-lcp-分布",[1358],{"type":31,"value":1359},"Step 1：看字段——真实用户的 LCP 分布",{"type":25,"tag":33,"props":1361,"children":1362},{},[1363],{"type":31,"value":1364},"如果你有 RUM：",{"type":25,"tag":613,"props":1366,"children":1367},{},[1368,1373],{"type":25,"tag":431,"props":1369,"children":1370},{},[1371],{"type":31,"value":1372},"p75 LCP",{"type":25,"tag":431,"props":1374,"children":1375},{},[1376],{"type":31,"value":1377},"按路由/地区/设备档位切片",{"type":25,"tag":33,"props":1379,"children":1380},{},[1381],{"type":31,"value":1382},"你会发现：",{"type":25,"tag":613,"props":1384,"children":1385},{},[1386,1391],{"type":25,"tag":431,"props":1387,"children":1388},{},[1389],{"type":31,"value":1390},"可能只有低端机慢",{"type":25,"tag":431,"props":1392,"children":1393},{},[1394],{"type":31,"value":1395},"或只有某地区慢（CDN/回源）",{"type":25,"tag":45,"props":1397,"children":1399},{"id":1398},"step-2看实验室复现-标记-lcp-元素",[1400],{"type":31,"value":1401},"Step 2：看实验室——复现 + 标记 LCP 元素",{"type":25,"tag":33,"props":1403,"children":1404},{},[1405],{"type":31,"value":1406},"用固定网络/CPU 限制：",{"type":25,"tag":613,"props":1408,"children":1409},{},[1410,1415],{"type":25,"tag":431,"props":1411,"children":1412},{},[1413],{"type":31,"value":1414},"Network: Fast 3G / Slow 4G",{"type":25,"tag":431,"props":1416,"children":1417},{},[1418],{"type":31,"value":1419},"CPU: 4x slowdown",{"type":25,"tag":45,"props":1421,"children":1423},{"id":1422},"step-3拆链路ttfb-资源-主线程",[1424],{"type":31,"value":1425},"Step 3：拆链路——TTFB / 资源 / 主线程",{"type":25,"tag":613,"props":1427,"children":1428},{},[1429,1434,1439],{"type":25,"tag":431,"props":1430,"children":1431},{},[1432],{"type":31,"value":1433},"TTFB 高：先查服务端、缓存、回源",{"type":25,"tag":431,"props":1435,"children":1436},{},[1437],{"type":31,"value":1438},"下载慢：查图片体积、格式、CDN、优先级",{"type":25,"tag":431,"props":1440,"children":1441},{},[1442],{"type":31,"value":1443},"主线程忙：查长任务、hydration、bundle",{"type":25,"tag":1165,"props":1445,"children":1446},{},[],{"type":25,"tag":26,"props":1448,"children":1450},{"id":1449},"_5-图片型-lcp优先级与体积是第一性",[1451],{"type":31,"value":1452},"5. 图片型 LCP：优先级与体积是第一性",{"type":25,"tag":45,"props":1454,"children":1456},{"id":1455},"_51-把-lcp-图片变小但不要牺牲清晰度",[1457],{"type":31,"value":1458},"5.1 把 LCP 图片“变小”但不要牺牲清晰度",{"type":25,"tag":33,"props":1460,"children":1461},{},[1462],{"type":31,"value":1463},"实践优先级：",{"type":25,"tag":427,"props":1465,"children":1466},{},[1467,1472,1477],{"type":25,"tag":431,"props":1468,"children":1469},{},[1470],{"type":31,"value":1471},"用现代格式：AVIF/WebP",{"type":25,"tag":431,"props":1473,"children":1474},{},[1475],{"type":31,"value":1476},"合理尺寸：不要把 2000px 的图缩到 400px 显示",{"type":25,"tag":431,"props":1478,"children":1479},{},[1480],{"type":31,"value":1481},"质量参数：基于视觉对比选一个阈值",{"type":25,"tag":45,"props":1483,"children":1485},{"id":1484},"_52-确保-lcp-图片不是懒加载",[1486],{"type":31,"value":1487},"5.2 确保 LCP 图片不是懒加载",{"type":25,"tag":33,"props":1489,"children":1490},{},[1491,1493,1499],{"type":31,"value":1492},"LCP 图片如果被 ",{"type":25,"tag":82,"props":1494,"children":1496},{"className":1495},[],[1497],{"type":31,"value":1498},"loading=\"lazy\"",{"type":31,"value":1500},"，通常会变慢。",{"type":25,"tag":613,"props":1502,"children":1503},{},[1504,1515],{"type":25,"tag":431,"props":1505,"children":1506},{},[1507,1509],{"type":31,"value":1508},"LCP 相关图片：",{"type":25,"tag":82,"props":1510,"children":1512},{"className":1511},[],[1513],{"type":31,"value":1514},"loading=\"eager\"",{"type":25,"tag":431,"props":1516,"children":1517},{},[1518],{"type":31,"value":1519},"或显式 preload",{"type":25,"tag":45,"props":1521,"children":1523},{"id":1522},"_53-明确资源优先级preload-fetchpriority",[1524],{"type":31,"value":1525},"5.3 明确资源优先级（preload / fetchpriority）",{"type":25,"tag":33,"props":1527,"children":1528},{},[1529],{"type":31,"value":1530},"对 LCP 图片：",{"type":25,"tag":77,"props":1532,"children":1535},{"className":1533,"code":1534,"language":659,"meta":7},[661],"\u003Clink rel=\"preload\" as=\"image\" href=\"/hero.avif\" />\n",[1536],{"type":25,"tag":82,"props":1537,"children":1538},{"__ignoreMap":7},[1539],{"type":31,"value":1534},{"type":25,"tag":33,"props":1541,"children":1542},{},[1543],{"type":31,"value":1544},"或（浏览器支持时）：",{"type":25,"tag":77,"props":1546,"children":1549},{"className":1547,"code":1548,"language":659,"meta":7},[661],"\u003Cimg src=\"/hero.avif\" fetchpriority=\"high\" />\n",[1550],{"type":25,"tag":82,"props":1551,"children":1552},{"__ignoreMap":7},[1553],{"type":31,"value":1548},{"type":25,"tag":33,"props":1555,"children":1556},{},[1557],{"type":31,"value":1558},"目标是：让浏览器更早发现它、更早调度它。",{"type":25,"tag":45,"props":1560,"children":1562},{"id":1561},"_54-cdn减少-rtt-与回源",[1563],{"type":31,"value":1564},"5.4 CDN：减少 RTT 与回源",{"type":25,"tag":613,"props":1566,"children":1567},{},[1568,1573,1578],{"type":25,"tag":431,"props":1569,"children":1570},{},[1571],{"type":31,"value":1572},"图片必须走 CDN",{"type":25,"tag":431,"props":1574,"children":1575},{},[1576],{"type":31,"value":1577},"开启压缩、HTTP/2/3",{"type":25,"tag":431,"props":1579,"children":1580},{},[1581],{"type":31,"value":1582},"确保 cache hit",{"type":25,"tag":1165,"props":1584,"children":1585},{},[],{"type":25,"tag":26,"props":1587,"children":1589},{"id":1588},"_6-文本型-lcpcss字体阻塞是常见杀手",[1590],{"type":31,"value":1591},"6. 文本型 LCP：CSS/字体阻塞是常见杀手",{"type":25,"tag":45,"props":1593,"children":1595},{"id":1594},"_61-关键-css-与阻塞",[1596],{"type":31,"value":1597},"6.1 关键 CSS 与阻塞",{"type":25,"tag":33,"props":1599,"children":1600},{},[1601],{"type":31,"value":1602},"如果你的主 CSS 很大且阻塞：",{"type":25,"tag":613,"props":1604,"children":1605},{},[1606,1611],{"type":25,"tag":431,"props":1607,"children":1608},{},[1609],{"type":31,"value":1610},"拆关键 CSS",{"type":25,"tag":431,"props":1612,"children":1613},{},[1614],{"type":31,"value":1615},"延后非关键 CSS",{"type":25,"tag":45,"props":1617,"children":1619},{"id":1618},"_62-字体foitfout-与-lcp",[1620],{"type":31,"value":1621},"6.2 字体：FOIT/FOUT 与 LCP",{"type":25,"tag":33,"props":1623,"children":1624},{},[1625],{"type":31,"value":1626},"大标题是文本 LCP 时，字体策略会直接影响 LCP。",{"type":25,"tag":33,"props":1628,"children":1629},{},[1630],{"type":31,"value":1631},"建议：",{"type":25,"tag":613,"props":1633,"children":1634},{},[1635,1644,1649],{"type":25,"tag":431,"props":1636,"children":1637},{},[1638],{"type":25,"tag":82,"props":1639,"children":1641},{"className":1640},[],[1642],{"type":31,"value":1643},"font-display: swap",{"type":25,"tag":431,"props":1645,"children":1646},{},[1647],{"type":31,"value":1648},"对关键字体文件 preload",{"type":25,"tag":431,"props":1650,"children":1651},{},[1652],{"type":31,"value":1653},"子集化（只保留需要的字形）",{"type":25,"tag":1165,"props":1655,"children":1656},{},[],{"type":25,"tag":26,"props":1658,"children":1660},{"id":1659},"_7-ssrcsr-与-hydration别让-js-抢走首屏",[1661],{"type":31,"value":1662},"7. SSR/CSR 与 Hydration：别让 JS 抢走首屏",{"type":25,"tag":33,"props":1664,"children":1665},{},[1666],{"type":31,"value":1667},"SSR 通常能改善 LCP，但并非必然。",{"type":25,"tag":33,"props":1669,"children":1670},{},[1671],{"type":31,"value":1672},"常见反例：",{"type":25,"tag":613,"props":1674,"children":1675},{},[1676,1681],{"type":25,"tag":431,"props":1677,"children":1678},{},[1679],{"type":31,"value":1680},"SSR 直出了 HTML",{"type":25,"tag":431,"props":1682,"children":1683},{},[1684],{"type":31,"value":1685},"但首屏仍要等一堆 JS 执行、样式计算、hydrate 才能稳定",{"type":25,"tag":33,"props":1687,"children":1688},{},[1689],{"type":31,"value":1690},"你需要关注：",{"type":25,"tag":613,"props":1692,"children":1693},{},[1694,1699,1704],{"type":25,"tag":431,"props":1695,"children":1696},{},[1697],{"type":31,"value":1698},"首屏 bundle 体积",{"type":25,"tag":431,"props":1700,"children":1701},{},[1702],{"type":31,"value":1703},"hydration 的长任务",{"type":25,"tag":431,"props":1705,"children":1706},{},[1707],{"type":31,"value":1708},"第三方脚本（埋点、广告）阻塞",{"type":25,"tag":33,"props":1710,"children":1711},{},[1712],{"type":31,"value":1713},"实践建议：",{"type":25,"tag":613,"props":1715,"children":1716},{},[1717,1722,1727],{"type":25,"tag":431,"props":1718,"children":1719},{},[1720],{"type":31,"value":1721},"首屏只 hydrate 必要组件",{"type":25,"tag":431,"props":1723,"children":1724},{},[1725],{"type":31,"value":1726},"大型交互组件延后",{"type":25,"tag":431,"props":1728,"children":1729},{},[1730],{"type":31,"value":1731},"第三方脚本延迟加载",{"type":25,"tag":1165,"props":1733,"children":1734},{},[],{"type":25,"tag":26,"props":1736,"children":1738},{"id":1737},"_8-资源调度preconnect-dns-prefetch",[1739],{"type":31,"value":1740},"8. 资源调度：preconnect / dns-prefetch",{"type":25,"tag":33,"props":1742,"children":1743},{},[1744],{"type":31,"value":1745},"如果 LCP 资源来自第三方域名：",{"type":25,"tag":77,"props":1747,"children":1750},{"className":1748,"code":1749,"language":659,"meta":7},[661],"\u003Clink rel=\"preconnect\" href=\"https://cdn.example.com\" />\n",[1751],{"type":25,"tag":82,"props":1752,"children":1753},{"__ignoreMap":7},[1754],{"type":31,"value":1749},{"type":25,"tag":33,"props":1756,"children":1757},{},[1758],{"type":31,"value":1759},"这能减少握手开销。",{"type":25,"tag":1165,"props":1761,"children":1762},{},[],{"type":25,"tag":26,"props":1764,"children":1766},{"id":1765},"_9-常见根因-对应策略速查表",[1767],{"type":31,"value":1768},"9. 常见根因 → 对应策略速查表",{"type":25,"tag":233,"props":1770,"children":1771},{},[1772,1793],{"type":25,"tag":237,"props":1773,"children":1774},{},[1775],{"type":25,"tag":241,"props":1776,"children":1777},{},[1778,1783,1788],{"type":25,"tag":245,"props":1779,"children":1780},{},[1781],{"type":31,"value":1782},"根因",{"type":25,"tag":245,"props":1784,"children":1785},{},[1786],{"type":31,"value":1787},"现象",{"type":25,"tag":245,"props":1789,"children":1790},{},[1791],{"type":31,"value":1792},"典型修复",{"type":25,"tag":256,"props":1794,"children":1795},{},[1796,1814,1832,1850,1868],{"type":25,"tag":241,"props":1797,"children":1798},{},[1799,1804,1809],{"type":25,"tag":263,"props":1800,"children":1801},{},[1802],{"type":31,"value":1803},"TTFB 高",{"type":25,"tag":263,"props":1805,"children":1806},{},[1807],{"type":31,"value":1808},"所有资源都晚开始",{"type":25,"tag":263,"props":1810,"children":1811},{},[1812],{"type":31,"value":1813},"服务端缓存、CDN、减少回源",{"type":25,"tag":241,"props":1815,"children":1816},{},[1817,1822,1827],{"type":25,"tag":263,"props":1818,"children":1819},{},[1820],{"type":31,"value":1821},"LCP 图片太大",{"type":25,"tag":263,"props":1823,"children":1824},{},[1825],{"type":31,"value":1826},"下载阶段耗时长",{"type":25,"tag":263,"props":1828,"children":1829},{},[1830],{"type":31,"value":1831},"AVIF/WebP、尺寸裁切、CDN",{"type":25,"tag":241,"props":1833,"children":1834},{},[1835,1840,1845],{"type":25,"tag":263,"props":1836,"children":1837},{},[1838],{"type":31,"value":1839},"LCP 图片优先级低",{"type":25,"tag":263,"props":1841,"children":1842},{},[1843],{"type":31,"value":1844},"LCP 资源很晚才发起",{"type":25,"tag":263,"props":1846,"children":1847},{},[1848],{"type":31,"value":1849},"preload/fetchpriority",{"type":25,"tag":241,"props":1851,"children":1852},{},[1853,1858,1863],{"type":25,"tag":263,"props":1854,"children":1855},{},[1856],{"type":31,"value":1857},"字体阻塞",{"type":25,"tag":263,"props":1859,"children":1860},{},[1861],{"type":31,"value":1862},"文本 LCP 晚出现",{"type":25,"tag":263,"props":1864,"children":1865},{},[1866],{"type":31,"value":1867},"font-display: swap + preload",{"type":25,"tag":241,"props":1869,"children":1870},{},[1871,1876,1881],{"type":25,"tag":263,"props":1872,"children":1873},{},[1874],{"type":31,"value":1875},"主线程长任务",{"type":25,"tag":263,"props":1877,"children":1878},{},[1879],{"type":31,"value":1880},"LCP 前 JS 很忙",{"type":25,"tag":263,"props":1882,"children":1883},{},[1884],{"type":31,"value":1885},"拆包、延后非关键组件/第三方",{"type":25,"tag":1165,"props":1887,"children":1888},{},[],{"type":25,"tag":26,"props":1890,"children":1892},{"id":1891},"_10-上线检查清单",[1893],{"type":31,"value":1894},"10. 上线检查清单",{"type":25,"tag":613,"props":1896,"children":1899},{"className":1897},[1898],"contains-task-list",[1900,1912,1921,1930,1939,1948],{"type":25,"tag":431,"props":1901,"children":1904},{"className":1902},[1903],"task-list-item",[1905,1910],{"type":25,"tag":1906,"props":1907,"children":1909},"input",{"disabled":19,"type":1908},"checkbox",[],{"type":31,"value":1911}," LCP 元素是否明确（图片/文本）",{"type":25,"tag":431,"props":1913,"children":1915},{"className":1914},[1903],[1916,1919],{"type":25,"tag":1906,"props":1917,"children":1918},{"disabled":19,"type":1908},[],{"type":31,"value":1920}," LCP 资源是否高优先级（preload/priority）",{"type":25,"tag":431,"props":1922,"children":1924},{"className":1923},[1903],[1925,1928],{"type":25,"tag":1906,"props":1926,"children":1927},{"disabled":19,"type":1908},[],{"type":31,"value":1929}," LCP 图片是否避免 lazy",{"type":25,"tag":431,"props":1931,"children":1933},{"className":1932},[1903],[1934,1937],{"type":25,"tag":1906,"props":1935,"children":1936},{"disabled":19,"type":1908},[],{"type":31,"value":1938}," 是否有 RUM 维度切片（设备/地区/版本）",{"type":25,"tag":431,"props":1940,"children":1942},{"className":1941},[1903],[1943,1946],{"type":25,"tag":1906,"props":1944,"children":1945},{"disabled":19,"type":1908},[],{"type":31,"value":1947}," TTFB 是否受控（缓存/回源）",{"type":25,"tag":431,"props":1949,"children":1951},{"className":1950},[1903],[1952,1955],{"type":25,"tag":1906,"props":1953,"children":1954},{"disabled":19,"type":1908},[],{"type":31,"value":1956}," 第三方脚本是否延后",{"type":25,"tag":1165,"props":1958,"children":1959},{},[],{"type":25,"tag":26,"props":1961,"children":1962},{"id":851},[1963],{"type":31,"value":851},{"type":25,"tag":33,"props":1965,"children":1966},{},[1967],{"type":31,"value":1968},"LCP 优化的核心是：",{"type":25,"tag":613,"props":1970,"children":1971},{},[1972,1977,1982],{"type":25,"tag":431,"props":1973,"children":1974},{},[1975],{"type":31,"value":1976},"先识别 LCP 元素",{"type":25,"tag":431,"props":1978,"children":1979},{},[1980],{"type":31,"value":1981},"再把 LCP 拆成链路各段",{"type":25,"tag":431,"props":1983,"children":1984},{},[1985],{"type":31,"value":1986},"针对性优化（资源优先级、体积、TTFB、主线程）",{"title":7,"searchDepth":1016,"depth":1016,"links":1988},[1989,1990,1991,1992,1993,1998,2004,2008,2009,2010,2011,2012],{"id":1085,"depth":1019,"text":1070},{"id":1170,"depth":1019,"text":1173},{"id":1230,"depth":1019,"text":1233},{"id":1303,"depth":1019,"text":1306},{"id":1350,"depth":1019,"text":1353,"children":1994},[1995,1996,1997],{"id":1356,"depth":1016,"text":1359},{"id":1398,"depth":1016,"text":1401},{"id":1422,"depth":1016,"text":1425},{"id":1449,"depth":1019,"text":1452,"children":1999},[2000,2001,2002,2003],{"id":1455,"depth":1016,"text":1458},{"id":1484,"depth":1016,"text":1487},{"id":1522,"depth":1016,"text":1525},{"id":1561,"depth":1016,"text":1564},{"id":1588,"depth":1019,"text":1591,"children":2005},[2006,2007],{"id":1594,"depth":1016,"text":1597},{"id":1618,"depth":1016,"text":1621},{"id":1659,"depth":1019,"text":1662},{"id":1737,"depth":1019,"text":1740},{"id":1765,"depth":1019,"text":1768},{"id":1891,"depth":1019,"text":1894},{"id":851,"depth":1019,"text":851},"content:topics:performance:lcp-optimization-theory-practice.md","topics/performance/lcp-optimization-theory-practice.md","topics/performance/lcp-optimization-theory-practice",{"_path":2017,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":2018,"description":2019,"date":1072,"topic":5,"author":11,"tags":2020,"image":2025,"featured":19,"readingTime":2026,"body":2027,"_type":1061,"_id":3342,"_source":1063,"_file":3343,"_stem":3344,"_extension":1066},"/topics/performance/rum-real-user-monitoring-design","RUM 真实用户监控方案设计","从指标体系、采样策略、上报链路到数据建模与告警，完整设计一套可落地的 RUM（Real User Monitoring）体系，解决“线上性能到底怎样”的问题。",[2021,2022,2023,1076,2024],"性能监控","RUM","可观测性","采样","/images/topics/performance/rum.jpg",22,{"type":22,"children":2028,"toc":3304},[2029,2034,2046,2064,2076,2114,2117,2123,2128,2137,2142,2175,2180,2183,2189,2195,2200,2228,2233,2251,2257,2262,2267,2293,2298,2306,2309,2315,2320,2326,2375,2380,2386,2391,2409,2415,2420,2433,2438,2451,2454,2460,2466,2471,2492,2497,2510,2516,2529,2534,2676,2681,2694,2697,2703,2723,2749,2755,2759,2777,2783,2814,2820,2825,2829,2855,2858,2864,2870,2875,2934,2939,2945,2950,2963,2968,2995,3001,3006,3011,3024,3029,3032,3038,3043,3048,3081,3086,3091,3104,3107,3113,3119,3124,3142,3148,3153,3166,3172,3177,3190,3193,3199,3222,3227,3230,3236,3241,3264,3267,3271,3276],{"type":25,"tag":26,"props":2030,"children":2032},{"id":2031},"rum-真实用户监控方案设计",[2033],{"type":31,"value":2018},{"type":25,"tag":33,"props":2035,"children":2036},{},[2037,2039,2044],{"type":31,"value":2038},"如果说 Lighthouse/Performance 面板告诉你“理论上能跑多快”，那么 ",{"type":25,"tag":57,"props":2040,"children":2041},{},[2042],{"type":31,"value":2043},"RUM（Real User Monitoring）",{"type":31,"value":2045}," 才能回答：",{"type":25,"tag":613,"props":2047,"children":2048},{},[2049,2054,2059],{"type":25,"tag":431,"props":2050,"children":2051},{},[2052],{"type":31,"value":2053},"真实用户到底慢在哪？",{"type":25,"tag":431,"props":2055,"children":2056},{},[2057],{"type":31,"value":2058},"慢是“某地区/某机型/某版本/某网络”的问题还是全局问题？",{"type":25,"tag":431,"props":2060,"children":2061},{},[2062],{"type":31,"value":2063},"优化上线后是否真的变好？有无回归？",{"type":25,"tag":33,"props":2065,"children":2066},{},[2067,2069,2074],{"type":31,"value":2068},"这篇文章不讲“把 SDK 丢进去就完事”，而是站在",{"type":25,"tag":57,"props":2070,"children":2071},{},[2072],{"type":31,"value":2073},"体系设计",{"type":31,"value":2075},"角度，从 0 到 1 设计一套能长期演进的 RUM：",{"type":25,"tag":613,"props":2077,"children":2078},{},[2079,2084,2089,2094,2099,2104,2109],{"type":25,"tag":431,"props":2080,"children":2081},{},[2082],{"type":31,"value":2083},"指标体系（Core Web Vitals + 业务指标）",{"type":25,"tag":431,"props":2085,"children":2086},{},[2087],{"type":31,"value":2088},"采样与成本控制",{"type":25,"tag":431,"props":2090,"children":2091},{},[2092],{"type":31,"value":2093},"上报协议与可靠性",{"type":25,"tag":431,"props":2095,"children":2096},{},[2097],{"type":31,"value":2098},"事件模型与数据仓库建模",{"type":25,"tag":431,"props":2100,"children":2101},{},[2102],{"type":31,"value":2103},"分析维度（分桶）与聚合",{"type":25,"tag":431,"props":2105,"children":2106},{},[2107],{"type":31,"value":2108},"告警与 SLO",{"type":25,"tag":431,"props":2110,"children":2111},{},[2112],{"type":31,"value":2113},"隐私与合规",{"type":25,"tag":1165,"props":2115,"children":2116},{},[],{"type":25,"tag":26,"props":2118,"children":2120},{"id":2119},"_1-先定目标rum-的产品定义",[2121],{"type":31,"value":2122},"1. 先定目标：RUM 的“产品定义”",{"type":25,"tag":33,"props":2124,"children":2125},{},[2126],{"type":31,"value":2127},"在做任何技术实现前，你必须把目标写成一句可验证的话：",{"type":25,"tag":2129,"props":2130,"children":2131},"blockquote",{},[2132],{"type":25,"tag":33,"props":2133,"children":2134},{},[2135],{"type":31,"value":2136},"我们要用 RUM 在 7 天内发现性能回归，并能定位到“哪类用户/哪条链路/哪个版本”导致 INP 恶化。",{"type":25,"tag":33,"props":2138,"children":2139},{},[2140],{"type":31,"value":2141},"RUM 的价值通常分三层：",{"type":25,"tag":427,"props":2143,"children":2144},{},[2145,2155,2165],{"type":25,"tag":431,"props":2146,"children":2147},{},[2148,2153],{"type":25,"tag":57,"props":2149,"children":2150},{},[2151],{"type":31,"value":2152},"可见性",{"type":31,"value":2154},"：上线后真实体验有数据",{"type":25,"tag":431,"props":2156,"children":2157},{},[2158,2163],{"type":25,"tag":57,"props":2159,"children":2160},{},[2161],{"type":31,"value":2162},"可定位",{"type":31,"value":2164},"：能切片（地区/设备/页面/版本）",{"type":25,"tag":431,"props":2166,"children":2167},{},[2168,2173],{"type":25,"tag":57,"props":2169,"children":2170},{},[2171],{"type":31,"value":2172},"可闭环",{"type":31,"value":2174},"：告警 → 归因 → 修复 → 复盘",{"type":25,"tag":33,"props":2176,"children":2177},{},[2178],{"type":31,"value":2179},"如果你只做第 1 层，它会退化成“报表”。",{"type":25,"tag":1165,"props":2181,"children":2182},{},[],{"type":25,"tag":26,"props":2184,"children":2186},{"id":2185},"_2-指标体系不要只盯-core-web-vitals",[2187],{"type":31,"value":2188},"2. 指标体系：不要只盯 Core Web Vitals",{"type":25,"tag":45,"props":2190,"children":2192},{"id":2191},"_21-必选core-web-vitals-补充指标",[2193],{"type":31,"value":2194},"2.1 必选：Core Web Vitals + 补充指标",{"type":25,"tag":33,"props":2196,"children":2197},{},[2198],{"type":31,"value":2199},"建议最小集合：",{"type":25,"tag":613,"props":2201,"children":2202},{},[2203,2208,2213,2218,2223],{"type":25,"tag":431,"props":2204,"children":2205},{},[2206],{"type":31,"value":2207},"LCP（最大内容绘制）",{"type":25,"tag":431,"props":2209,"children":2210},{},[2211],{"type":31,"value":2212},"INP（交互到下一次绘制）",{"type":25,"tag":431,"props":2214,"children":2215},{},[2216],{"type":31,"value":2217},"CLS（布局偏移）",{"type":25,"tag":431,"props":2219,"children":2220},{},[2221],{"type":31,"value":2222},"TTFB（服务端首字节）",{"type":25,"tag":431,"props":2224,"children":2225},{},[2226],{"type":31,"value":2227},"FCP（首屏内容绘制，辅助解释 LCP）",{"type":25,"tag":33,"props":2229,"children":2230},{},[2231],{"type":31,"value":2232},"但这还不够，你还需要“解释型指标”：",{"type":25,"tag":613,"props":2234,"children":2235},{},[2236,2241,2246],{"type":25,"tag":431,"props":2237,"children":2238},{},[2239],{"type":31,"value":2240},"Long Task（长任务）统计（数量/总时长/Top 贡献）",{"type":25,"tag":431,"props":2242,"children":2243},{},[2244],{"type":31,"value":2245},"Resource timing（关键资源耗时）",{"type":25,"tag":431,"props":2247,"children":2248},{},[2249],{"type":31,"value":2250},"JS 错误/资源错误（与性能回归强相关）",{"type":25,"tag":45,"props":2252,"children":2254},{"id":2253},"_22-业务指标把性能与转化绑定",[2255],{"type":31,"value":2256},"2.2 业务指标：把性能与转化绑定",{"type":25,"tag":33,"props":2258,"children":2259},{},[2260],{"type":31,"value":2261},"纯性能指标很容易变成“工程师自嗨”。",{"type":25,"tag":33,"props":2263,"children":2264},{},[2265],{"type":31,"value":2266},"建议定义 1~3 个业务级指标：",{"type":25,"tag":613,"props":2268,"children":2269},{},[2270,2275,2288],{"type":25,"tag":431,"props":2271,"children":2272},{},[2273],{"type":31,"value":2274},"首次有效交互时间（例如搜索可用、下单可点）",{"type":25,"tag":431,"props":2276,"children":2277},{},[2278,2280,2286],{"type":31,"value":2279},"首次关键接口完成（例如 ",{"type":25,"tag":82,"props":2281,"children":2283},{"className":2282},[],[2284],{"type":31,"value":2285},"/api/me",{"type":31,"value":2287}," 完成）",{"type":25,"tag":431,"props":2289,"children":2290},{},[2291],{"type":31,"value":2292},"转化漏斗关键点耗时（例如“加入购物车”到“支付成功”）",{"type":25,"tag":33,"props":2294,"children":2295},{},[2296],{"type":31,"value":2297},"这些指标让你能回答：",{"type":25,"tag":613,"props":2299,"children":2300},{},[2301],{"type":25,"tag":431,"props":2302,"children":2303},{},[2304],{"type":31,"value":2305},"“慢 200ms 对业务有没有影响？”",{"type":25,"tag":1165,"props":2307,"children":2308},{},[],{"type":25,"tag":26,"props":2310,"children":2312},{"id":2311},"_3-采样策略rum-成败的-50",[2313],{"type":31,"value":2314},"3. 采样策略：RUM 成败的 50%",{"type":25,"tag":33,"props":2316,"children":2317},{},[2318],{"type":31,"value":2319},"RUM 的难点不是“能不能采”，而是“采多少、怎么采、怎么省钱”。",{"type":25,"tag":45,"props":2321,"children":2323},{"id":2322},"_31-两种采样会话采样-vs-事件采样",[2324],{"type":31,"value":2325},"3.1 两种采样：会话采样 vs 事件采样",{"type":25,"tag":613,"props":2327,"children":2328},{},[2329,2352],{"type":25,"tag":431,"props":2330,"children":2331},{},[2332,2337,2339],{"type":25,"tag":57,"props":2333,"children":2334},{},[2335],{"type":31,"value":2336},"会话采样",{"type":31,"value":2338},"：进入站点就决定该会话是否采集全部指标",{"type":25,"tag":613,"props":2340,"children":2341},{},[2342,2347],{"type":25,"tag":431,"props":2343,"children":2344},{},[2345],{"type":31,"value":2346},"优点：链路完整、便于归因",{"type":25,"tag":431,"props":2348,"children":2349},{},[2350],{"type":31,"value":2351},"缺点：成本高",{"type":25,"tag":431,"props":2353,"children":2354},{},[2355,2360,2362],{"type":25,"tag":57,"props":2356,"children":2357},{},[2358],{"type":31,"value":2359},"事件采样",{"type":31,"value":2361},"：每种事件独立采样（例如性能 10%、错误 100%）",{"type":25,"tag":613,"props":2363,"children":2364},{},[2365,2370],{"type":25,"tag":431,"props":2366,"children":2367},{},[2368],{"type":31,"value":2369},"优点：更灵活",{"type":25,"tag":431,"props":2371,"children":2372},{},[2373],{"type":31,"value":2374},"缺点：同一会话数据不完整",{"type":25,"tag":33,"props":2376,"children":2377},{},[2378],{"type":31,"value":2379},"生产建议：两者结合。",{"type":25,"tag":45,"props":2381,"children":2383},{"id":2382},"_32-分层采样建议",[2384],{"type":31,"value":2385},"3.2 分层采样建议",{"type":25,"tag":33,"props":2387,"children":2388},{},[2389],{"type":31,"value":2390},"一个可用的默认配置：",{"type":25,"tag":613,"props":2392,"children":2393},{},[2394,2399,2404],{"type":25,"tag":431,"props":2395,"children":2396},{},[2397],{"type":31,"value":2398},"性能指标：10%（按会话）",{"type":25,"tag":431,"props":2400,"children":2401},{},[2402],{"type":31,"value":2403},"错误指标：100%（或至少 50%）",{"type":25,"tag":431,"props":2405,"children":2406},{},[2407],{"type":31,"value":2408},"关键交易链路：100%（只对“完成交易”的会话上报完整链路）",{"type":25,"tag":45,"props":2410,"children":2412},{"id":2411},"_33-动态采样用预算来管理",[2413],{"type":31,"value":2414},"3.3 动态采样：用“预算”来管理",{"type":25,"tag":33,"props":2416,"children":2417},{},[2418],{"type":31,"value":2419},"你可以给 RUM 设预算：",{"type":25,"tag":613,"props":2421,"children":2422},{},[2423,2428],{"type":25,"tag":431,"props":2424,"children":2425},{},[2426],{"type":31,"value":2427},"每日上报不超过 N 条",{"type":25,"tag":431,"props":2429,"children":2430},{},[2431],{"type":31,"value":2432},"每秒不超过 M 条",{"type":25,"tag":33,"props":2434,"children":2435},{},[2436],{"type":31,"value":2437},"当超预算时：",{"type":25,"tag":613,"props":2439,"children":2440},{},[2441,2446],{"type":25,"tag":431,"props":2442,"children":2443},{},[2444],{"type":31,"value":2445},"降低非关键事件采样率",{"type":25,"tag":431,"props":2447,"children":2448},{},[2449],{"type":31,"value":2450},"只保留异常事件（例如 LCP > 4s）",{"type":25,"tag":1165,"props":2452,"children":2453},{},[],{"type":25,"tag":26,"props":2455,"children":2457},{"id":2456},"_4-客户端采集指标怎么拿",[2458],{"type":31,"value":2459},"4. 客户端采集：指标怎么拿？",{"type":25,"tag":45,"props":2461,"children":2463},{"id":2462},"_41-web-vitals-指标",[2464],{"type":31,"value":2465},"4.1 Web Vitals 指标",{"type":25,"tag":33,"props":2467,"children":2468},{},[2469],{"type":31,"value":2470},"现代浏览器提供了可观测入口：",{"type":25,"tag":613,"props":2472,"children":2473},{},[2474,2483],{"type":25,"tag":431,"props":2475,"children":2476},{},[2477],{"type":25,"tag":82,"props":2478,"children":2480},{"className":2479},[],[2481],{"type":31,"value":2482},"PerformanceObserver",{"type":25,"tag":431,"props":2484,"children":2485},{},[2486],{"type":25,"tag":82,"props":2487,"children":2489},{"className":2488},[],[2490],{"type":31,"value":2491},"performance.getEntriesByType()",{"type":25,"tag":33,"props":2493,"children":2494},{},[2495],{"type":31,"value":2496},"你可以使用社区实现（例如 web-vitals 思路），但要明确：",{"type":25,"tag":613,"props":2498,"children":2499},{},[2500,2505],{"type":25,"tag":431,"props":2501,"children":2502},{},[2503],{"type":31,"value":2504},"指标口径要固定（同一页面、同一版本）",{"type":25,"tag":431,"props":2506,"children":2507},{},[2508],{"type":31,"value":2509},"不同浏览器差异要做兼容",{"type":25,"tag":45,"props":2511,"children":2513},{"id":2512},"_42-上下文context是-rum-的灵魂",[2514],{"type":31,"value":2515},"4.2 上下文（Context）是 RUM 的灵魂",{"type":25,"tag":33,"props":2517,"children":2518},{},[2519,2521,2527],{"type":31,"value":2520},"只上报 ",{"type":25,"tag":82,"props":2522,"children":2524},{"className":2523},[],[2525],{"type":31,"value":2526},"LCP=2500ms",{"type":31,"value":2528}," 没意义。",{"type":25,"tag":33,"props":2530,"children":2531},{},[2532],{"type":31,"value":2533},"你至少需要这些维度：",{"type":25,"tag":613,"props":2535,"children":2536},{},[2537,2563,2576,2601,2626,2651],{"type":25,"tag":431,"props":2538,"children":2539},{},[2540,2542,2548,2550,2556,2557],{"type":31,"value":2541},"页面：",{"type":25,"tag":82,"props":2543,"children":2545},{"className":2544},[],[2546],{"type":31,"value":2547},"path",{"type":31,"value":2549},", ",{"type":25,"tag":82,"props":2551,"children":2553},{"className":2552},[],[2554],{"type":31,"value":2555},"routeName",{"type":31,"value":2549},{"type":25,"tag":82,"props":2558,"children":2560},{"className":2559},[],[2561],{"type":31,"value":2562},"referrer",{"type":25,"tag":431,"props":2564,"children":2565},{},[2566,2568,2574],{"type":31,"value":2567},"用户：匿名 ",{"type":25,"tag":82,"props":2569,"children":2571},{"className":2570},[],[2572],{"type":31,"value":2573},"userIdHash",{"type":31,"value":2575},"（可选）",{"type":25,"tag":431,"props":2577,"children":2578},{},[2579,2581,2587,2588,2594,2595],{"type":31,"value":2580},"设备：",{"type":25,"tag":82,"props":2582,"children":2584},{"className":2583},[],[2585],{"type":31,"value":2586},"deviceMemory",{"type":31,"value":2549},{"type":25,"tag":82,"props":2589,"children":2591},{"className":2590},[],[2592],{"type":31,"value":2593},"hardwareConcurrency",{"type":31,"value":2549},{"type":25,"tag":82,"props":2596,"children":2598},{"className":2597},[],[2599],{"type":31,"value":2600},"viewport",{"type":25,"tag":431,"props":2602,"children":2603},{},[2604,2606,2612,2613,2619,2620],{"type":31,"value":2605},"网络：",{"type":25,"tag":82,"props":2607,"children":2609},{"className":2608},[],[2610],{"type":31,"value":2611},"effectiveType",{"type":31,"value":2549},{"type":25,"tag":82,"props":2614,"children":2616},{"className":2615},[],[2617],{"type":31,"value":2618},"rtt",{"type":31,"value":2549},{"type":25,"tag":82,"props":2621,"children":2623},{"className":2622},[],[2624],{"type":31,"value":2625},"downlink",{"type":25,"tag":431,"props":2627,"children":2628},{},[2629,2631,2637,2638,2644,2645],{"type":31,"value":2630},"版本：",{"type":25,"tag":82,"props":2632,"children":2634},{"className":2633},[],[2635],{"type":31,"value":2636},"appVersion",{"type":31,"value":2549},{"type":25,"tag":82,"props":2639,"children":2641},{"className":2640},[],[2642],{"type":31,"value":2643},"buildId",{"type":31,"value":2549},{"type":25,"tag":82,"props":2646,"children":2648},{"className":2647},[],[2649],{"type":31,"value":2650},"commitSha",{"type":25,"tag":431,"props":2652,"children":2653},{},[2654,2656,2662,2663,2669,2670],{"type":31,"value":2655},"环境：",{"type":25,"tag":82,"props":2657,"children":2659},{"className":2658},[],[2660],{"type":31,"value":2661},"prod/staging",{"type":31,"value":2549},{"type":25,"tag":82,"props":2664,"children":2666},{"className":2665},[],[2667],{"type":31,"value":2668},"region",{"type":31,"value":2549},{"type":25,"tag":82,"props":2671,"children":2673},{"className":2672},[],[2674],{"type":31,"value":2675},"cdnPop",{"type":25,"tag":33,"props":2677,"children":2678},{},[2679],{"type":31,"value":2680},"这些字段必须：",{"type":25,"tag":613,"props":2682,"children":2683},{},[2684,2689],{"type":25,"tag":431,"props":2685,"children":2686},{},[2687],{"type":31,"value":2688},"控制体积（短字段名/枚举）",{"type":25,"tag":431,"props":2690,"children":2691},{},[2692],{"type":31,"value":2693},"可被服务器校验（防伪造污染）",{"type":25,"tag":1165,"props":2695,"children":2696},{},[],{"type":25,"tag":26,"props":2698,"children":2700},{"id":2699},"_5-上报链路可靠性与性能不能两头都丢",[2701],{"type":31,"value":2702},"5. 上报链路：可靠性与性能不能两头都丢",{"type":25,"tag":45,"props":2704,"children":2706},{"id":2705},"_51-传输优先-sendbeacon降级到-fetchkeepalive",[2707,2709,2715,2717],{"type":31,"value":2708},"5.1 传输：优先 ",{"type":25,"tag":82,"props":2710,"children":2712},{"className":2711},[],[2713],{"type":31,"value":2714},"sendBeacon",{"type":31,"value":2716},"，降级到 ",{"type":25,"tag":82,"props":2718,"children":2720},{"className":2719},[],[2721],{"type":31,"value":2722},"fetch(keepalive)",{"type":25,"tag":613,"props":2724,"children":2725},{},[2726,2738],{"type":25,"tag":431,"props":2727,"children":2728},{},[2729,2731,2736],{"type":31,"value":2730},"页面卸载时 ",{"type":25,"tag":82,"props":2732,"children":2734},{"className":2733},[],[2735],{"type":31,"value":2714},{"type":31,"value":2737}," 更可靠",{"type":25,"tag":431,"props":2739,"children":2740},{},[2741,2743],{"type":31,"value":2742},"非卸载场景可用批量 ",{"type":25,"tag":82,"props":2744,"children":2746},{"className":2745},[],[2747],{"type":31,"value":2748},"fetch",{"type":25,"tag":45,"props":2750,"children":2752},{"id":2751},"_52-批量与压缩",[2753],{"type":31,"value":2754},"5.2 批量与压缩",{"type":25,"tag":33,"props":2756,"children":2757},{},[2758],{"type":31,"value":1631},{"type":25,"tag":613,"props":2760,"children":2761},{},[2762,2767,2772],{"type":25,"tag":431,"props":2763,"children":2764},{},[2765],{"type":31,"value":2766},"以 5~20 条为一个 batch",{"type":25,"tag":431,"props":2768,"children":2769},{},[2770],{"type":31,"value":2771},"gzip/br 压缩（服务器支持）",{"type":25,"tag":431,"props":2773,"children":2774},{},[2775],{"type":31,"value":2776},"限制 payload 大小（例如 \u003C 64KB）",{"type":25,"tag":45,"props":2778,"children":2780},{"id":2779},"_53-去重与重试",[2781],{"type":31,"value":2782},"5.3 去重与重试",{"type":25,"tag":613,"props":2784,"children":2785},{},[2786,2797,2809],{"type":25,"tag":431,"props":2787,"children":2788},{},[2789,2791],{"type":31,"value":2790},"给每条事件生成 ",{"type":25,"tag":82,"props":2792,"children":2794},{"className":2793},[],[2795],{"type":31,"value":2796},"eventId",{"type":25,"tag":431,"props":2798,"children":2799},{},[2800,2802,2807],{"type":31,"value":2801},"服务端按 ",{"type":25,"tag":82,"props":2803,"children":2805},{"className":2804},[],[2806],{"type":31,"value":2796},{"type":31,"value":2808}," 去重",{"type":25,"tag":431,"props":2810,"children":2811},{},[2812],{"type":31,"value":2813},"客户端失败重试次数有限（例如 2 次）",{"type":25,"tag":45,"props":2815,"children":2817},{"id":2816},"_54-采集对页面的影响",[2818],{"type":31,"value":2819},"5.4 采集对页面的影响",{"type":25,"tag":33,"props":2821,"children":2822},{},[2823],{"type":31,"value":2824},"RUM 本身不能成为性能负担。",{"type":25,"tag":33,"props":2826,"children":2827},{},[2828],{"type":31,"value":1713},{"type":25,"tag":613,"props":2830,"children":2831},{},[2832,2845,2850],{"type":25,"tag":431,"props":2833,"children":2834},{},[2835,2837,2843],{"type":31,"value":2836},"采集计算尽量放在 idle（",{"type":25,"tag":82,"props":2838,"children":2840},{"className":2839},[],[2841],{"type":31,"value":2842},"requestIdleCallback",{"type":31,"value":2844},"）",{"type":25,"tag":431,"props":2846,"children":2847},{},[2848],{"type":31,"value":2849},"上报放在后台、批量",{"type":25,"tag":431,"props":2851,"children":2852},{},[2853],{"type":31,"value":2854},"SDK 初始化延后（首屏后）",{"type":25,"tag":1165,"props":2856,"children":2857},{},[],{"type":25,"tag":26,"props":2859,"children":2861},{"id":2860},"_6-事件模型与数据建模决定你能不能分析",[2862],{"type":31,"value":2863},"6. 事件模型与数据建模：决定你能不能分析",{"type":25,"tag":45,"props":2865,"children":2867},{"id":2866},"_61-事件类型event-types",[2868],{"type":31,"value":2869},"6.1 事件类型（Event Types）",{"type":25,"tag":33,"props":2871,"children":2872},{},[2873],{"type":31,"value":2874},"建议至少定义：",{"type":25,"tag":613,"props":2876,"children":2877},{},[2878,2887,2896,2905,2914,2923],{"type":25,"tag":431,"props":2879,"children":2880},{},[2881],{"type":25,"tag":82,"props":2882,"children":2884},{"className":2883},[],[2885],{"type":31,"value":2886},"page_view",{"type":25,"tag":431,"props":2888,"children":2889},{},[2890],{"type":25,"tag":82,"props":2891,"children":2893},{"className":2892},[],[2894],{"type":31,"value":2895},"web_vitals",{"type":25,"tag":431,"props":2897,"children":2898},{},[2899],{"type":25,"tag":82,"props":2900,"children":2902},{"className":2901},[],[2903],{"type":31,"value":2904},"resource_timing",{"type":25,"tag":431,"props":2906,"children":2907},{},[2908],{"type":25,"tag":82,"props":2909,"children":2911},{"className":2910},[],[2912],{"type":31,"value":2913},"long_task",{"type":25,"tag":431,"props":2915,"children":2916},{},[2917],{"type":25,"tag":82,"props":2918,"children":2920},{"className":2919},[],[2921],{"type":31,"value":2922},"js_error",{"type":25,"tag":431,"props":2924,"children":2925},{},[2926,2932],{"type":25,"tag":82,"props":2927,"children":2929},{"className":2928},[],[2930],{"type":31,"value":2931},"api_timing",{"type":31,"value":2933},"（业务关键接口）",{"type":25,"tag":33,"props":2935,"children":2936},{},[2937],{"type":31,"value":2938},"每种事件都有“必填字段”和“可选字段”。",{"type":25,"tag":45,"props":2940,"children":2942},{"id":2941},"_62-存储建模宽表-明细表",[2943],{"type":31,"value":2944},"6.2 存储建模：宽表 + 明细表",{"type":25,"tag":33,"props":2946,"children":2947},{},[2948],{"type":31,"value":2949},"常见两种设计：",{"type":25,"tag":613,"props":2951,"children":2952},{},[2953,2958],{"type":25,"tag":431,"props":2954,"children":2955},{},[2956],{"type":31,"value":2957},"宽表（便于查询）：把常用字段打平",{"type":25,"tag":431,"props":2959,"children":2960},{},[2961],{"type":31,"value":2962},"明细表（便于追踪）：存完整 payload（可选）",{"type":25,"tag":33,"props":2964,"children":2965},{},[2966],{"type":31,"value":2967},"一个可落地的折中：",{"type":25,"tag":613,"props":2969,"children":2970},{},[2971,2983],{"type":25,"tag":431,"props":2972,"children":2973},{},[2974,2976,2981],{"type":31,"value":2975},"以 ",{"type":25,"tag":82,"props":2977,"children":2979},{"className":2978},[],[2980],{"type":31,"value":2895},{"type":31,"value":2982}," 为核心宽表（用于大盘/SLO）",{"type":25,"tag":431,"props":2984,"children":2985},{},[2986,2987,2993],{"type":31,"value":2975},{"type":25,"tag":82,"props":2988,"children":2990},{"className":2989},[],[2991],{"type":31,"value":2992},"session_trace",{"type":31,"value":2994}," 为明细表（只对采样会话存）",{"type":25,"tag":45,"props":2996,"children":2998},{"id":2997},"_63-聚合口径p75p90p95p99",[2999],{"type":31,"value":3000},"6.3 聚合口径：p75/p90/p95/p99",{"type":25,"tag":33,"props":3002,"children":3003},{},[3004],{"type":31,"value":3005},"RUM 的统计不要只用平均值。",{"type":25,"tag":33,"props":3007,"children":3008},{},[3009],{"type":31,"value":3010},"推荐：",{"type":25,"tag":613,"props":3012,"children":3013},{},[3014,3019],{"type":25,"tag":431,"props":3015,"children":3016},{},[3017],{"type":31,"value":3018},"p75：更贴近“多数用户体验”",{"type":25,"tag":431,"props":3020,"children":3021},{},[3022],{"type":31,"value":3023},"p95/p99：定位极端慢问题",{"type":25,"tag":33,"props":3025,"children":3026},{},[3027],{"type":31,"value":3028},"对于 Web Vitals，Google 口径常用 p75。",{"type":25,"tag":1165,"props":3030,"children":3031},{},[],{"type":25,"tag":26,"props":3033,"children":3035},{"id":3034},"_7-分析维度怎么做到可定位",[3036],{"type":31,"value":3037},"7. 分析维度：怎么做到“可定位”？",{"type":25,"tag":33,"props":3039,"children":3040},{},[3041],{"type":31,"value":3042},"可定位的关键在于“维度设计”。",{"type":25,"tag":33,"props":3044,"children":3045},{},[3046],{"type":31,"value":3047},"建议固定一套常用切片：",{"type":25,"tag":613,"props":3049,"children":3050},{},[3051,3056,3061,3066,3071,3076],{"type":25,"tag":431,"props":3052,"children":3053},{},[3054],{"type":31,"value":3055},"页面（路由）",{"type":25,"tag":431,"props":3057,"children":3058},{},[3059],{"type":31,"value":3060},"地区/运营商",{"type":25,"tag":431,"props":3062,"children":3063},{},[3064],{"type":31,"value":3065},"设备档位（内存/CPU 核数分桶）",{"type":25,"tag":431,"props":3067,"children":3068},{},[3069],{"type":31,"value":3070},"网络（4g/3g/slow-4g）",{"type":25,"tag":431,"props":3072,"children":3073},{},[3074],{"type":31,"value":3075},"版本（最近 10 个 buildId）",{"type":25,"tag":431,"props":3077,"children":3078},{},[3079],{"type":31,"value":3080},"入口来源（referrer/channel）",{"type":25,"tag":33,"props":3082,"children":3083},{},[3084],{"type":31,"value":3085},"注意：维度越多，成本越高。",{"type":25,"tag":33,"props":3087,"children":3088},{},[3089],{"type":31,"value":3090},"实践做法：",{"type":25,"tag":613,"props":3092,"children":3093},{},[3094,3099],{"type":25,"tag":431,"props":3095,"children":3096},{},[3097],{"type":31,"value":3098},"维度字段做枚举/分桶",{"type":25,"tag":431,"props":3100,"children":3101},{},[3102],{"type":31,"value":3103},"对长尾维度做 Top N",{"type":25,"tag":1165,"props":3105,"children":3106},{},[],{"type":25,"tag":26,"props":3108,"children":3110},{"id":3109},"_8-告警与-slo让-rum-成为系统",[3111],{"type":31,"value":3112},"8. 告警与 SLO：让 RUM 成为“系统”",{"type":25,"tag":45,"props":3114,"children":3116},{"id":3115},"_81-slo-的定义",[3117],{"type":31,"value":3118},"8.1 SLO 的定义",{"type":25,"tag":33,"props":3120,"children":3121},{},[3122],{"type":31,"value":3123},"示例：",{"type":25,"tag":613,"props":3125,"children":3126},{},[3127,3132,3137],{"type":25,"tag":431,"props":3128,"children":3129},{},[3130],{"type":31,"value":3131},"过去 1 天内，p75 LCP \u003C 2500ms",{"type":25,"tag":431,"props":3133,"children":3134},{},[3135],{"type":31,"value":3136},"过去 1 天内，p75 INP \u003C 200ms",{"type":25,"tag":431,"props":3138,"children":3139},{},[3140],{"type":31,"value":3141},"过去 1 天内，CLS p75 \u003C 0.1",{"type":25,"tag":45,"props":3143,"children":3145},{"id":3144},"_82-告警规则",[3146],{"type":31,"value":3147},"8.2 告警规则",{"type":25,"tag":33,"props":3149,"children":3150},{},[3151],{"type":31,"value":3152},"建议用“双阈值”防抖：",{"type":25,"tag":613,"props":3154,"children":3155},{},[3156,3161],{"type":25,"tag":431,"props":3157,"children":3158},{},[3159],{"type":31,"value":3160},"5 分钟窗口连续超阈值",{"type":25,"tag":431,"props":3162,"children":3163},{},[3164],{"type":31,"value":3165},"且样本量 > 最小值（例如 300）",{"type":25,"tag":45,"props":3167,"children":3169},{"id":3168},"_83-回归检测",[3170],{"type":31,"value":3171},"8.3 回归检测",{"type":25,"tag":33,"props":3173,"children":3174},{},[3175],{"type":31,"value":3176},"把版本作为维度：",{"type":25,"tag":613,"props":3178,"children":3179},{},[3180,3185],{"type":25,"tag":431,"props":3181,"children":3182},{},[3183],{"type":31,"value":3184},"新版本的 p75 INP 相比上版本恶化 > 15%",{"type":25,"tag":431,"props":3186,"children":3187},{},[3188],{"type":31,"value":3189},"触发告警并附带“top 页面 / top 设备 / top 地区”",{"type":25,"tag":1165,"props":3191,"children":3192},{},[],{"type":25,"tag":26,"props":3194,"children":3196},{"id":3195},"_9-隐私与合规你必须提前做的约束",[3197],{"type":31,"value":3198},"9. 隐私与合规：你必须提前做的约束",{"type":25,"tag":613,"props":3200,"children":3201},{},[3202,3207,3212,3217],{"type":25,"tag":431,"props":3203,"children":3204},{},[3205],{"type":31,"value":3206},"禁止上报 PII（手机号、邮箱、身份证等）",{"type":25,"tag":431,"props":3208,"children":3209},{},[3210],{"type":31,"value":3211},"URL 中 query/fragment 需要脱敏",{"type":25,"tag":431,"props":3213,"children":3214},{},[3215],{"type":31,"value":3216},"事件 payload 做字段白名单",{"type":25,"tag":431,"props":3218,"children":3219},{},[3220],{"type":31,"value":3221},"允许用户 opt-out（尤其是欧盟地区）",{"type":25,"tag":33,"props":3223,"children":3224},{},[3225],{"type":31,"value":3226},"如果产品面向多地区，建议把合规当成“需求”，不是“上线前检查”。",{"type":25,"tag":1165,"props":3228,"children":3229},{},[],{"type":25,"tag":26,"props":3231,"children":3233},{"id":3232},"_10-最小可用方案mvp建议",[3234],{"type":31,"value":3235},"10. 最小可用方案（MVP）建议",{"type":25,"tag":33,"props":3237,"children":3238},{},[3239],{"type":31,"value":3240},"如果你要在 1~2 周内把 RUM 跑起来：",{"type":25,"tag":427,"props":3242,"children":3243},{},[3244,3249,3254,3259],{"type":25,"tag":431,"props":3245,"children":3246},{},[3247],{"type":31,"value":3248},"先采：page_view + web_vitals + js_error",{"type":25,"tag":431,"props":3250,"children":3251},{},[3252],{"type":31,"value":3253},"先做：按路由维度的大盘（p75）",{"type":25,"tag":431,"props":3255,"children":3256},{},[3257],{"type":31,"value":3258},"再做：版本对比（回归检测）",{"type":25,"tag":431,"props":3260,"children":3261},{},[3262],{"type":31,"value":3263},"最后做：会话 trace（定位长尾）",{"type":25,"tag":1165,"props":3265,"children":3266},{},[],{"type":25,"tag":26,"props":3268,"children":3269},{"id":851},[3270],{"type":31,"value":851},{"type":25,"tag":33,"props":3272,"children":3273},{},[3274],{"type":31,"value":3275},"RUM 的关键不是 SDK，而是：",{"type":25,"tag":613,"props":3277,"children":3278},{},[3279,3284,3289,3294,3299],{"type":25,"tag":431,"props":3280,"children":3281},{},[3282],{"type":31,"value":3283},"指标体系与业务目标绑定",{"type":25,"tag":431,"props":3285,"children":3286},{},[3287],{"type":31,"value":3288},"采样与预算控制成本",{"type":25,"tag":431,"props":3290,"children":3291},{},[3292],{"type":31,"value":3293},"上报可靠且不影响性能",{"type":25,"tag":431,"props":3295,"children":3296},{},[3297],{"type":31,"value":3298},"数据建模支持切片与聚合",{"type":25,"tag":431,"props":3300,"children":3301},{},[3302],{"type":31,"value":3303},"告警/SLO 能闭环",{"title":7,"searchDepth":1016,"depth":1016,"links":3305},[3306,3307,3308,3312,3317,3321,3328,3333,3334,3339,3340,3341],{"id":2031,"depth":1019,"text":2018},{"id":2119,"depth":1019,"text":2122},{"id":2185,"depth":1019,"text":2188,"children":3309},[3310,3311],{"id":2191,"depth":1016,"text":2194},{"id":2253,"depth":1016,"text":2256},{"id":2311,"depth":1019,"text":2314,"children":3313},[3314,3315,3316],{"id":2322,"depth":1016,"text":2325},{"id":2382,"depth":1016,"text":2385},{"id":2411,"depth":1016,"text":2414},{"id":2456,"depth":1019,"text":2459,"children":3318},[3319,3320],{"id":2462,"depth":1016,"text":2465},{"id":2512,"depth":1016,"text":2515},{"id":2699,"depth":1019,"text":2702,"children":3322},[3323,3325,3326,3327],{"id":2705,"depth":1016,"text":3324},"5.1 传输：优先 sendBeacon，降级到 fetch(keepalive)",{"id":2751,"depth":1016,"text":2754},{"id":2779,"depth":1016,"text":2782},{"id":2816,"depth":1016,"text":2819},{"id":2860,"depth":1019,"text":2863,"children":3329},[3330,3331,3332],{"id":2866,"depth":1016,"text":2869},{"id":2941,"depth":1016,"text":2944},{"id":2997,"depth":1016,"text":3000},{"id":3034,"depth":1019,"text":3037},{"id":3109,"depth":1019,"text":3112,"children":3335},[3336,3337,3338],{"id":3115,"depth":1016,"text":3118},{"id":3144,"depth":1016,"text":3147},{"id":3168,"depth":1016,"text":3171},{"id":3195,"depth":1019,"text":3198},{"id":3232,"depth":1019,"text":3235},{"id":851,"depth":1019,"text":851},"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":3346,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":3347,"description":3348,"date":3349,"topic":5,"author":11,"tags":3350,"image":3354,"featured":19,"readingTime":3355,"body":3356,"_type":1061,"_id":4271,"_source":1063,"_file":4272,"_stem":4273,"_extension":1066},"/topics/performance/core-web-vitals-2026-guide","Core Web Vitals 2026 新标准解读：INP 时代的性能优化策略","全面解读 2026 年 Core Web Vitals 的重大变化，深入分析 INP 取代 FID 的技术背景、测量方法与优化策略，帮助开发者适应新的性能评估体系。","2026-01-15",[1076,3351,1074,3352,3353],"INP","Web 性能","Google 排名","/images/topics/core-web-vitals-2026.jpg",15,{"type":22,"children":3357,"toc":4230},[3358,3364,3370,3382,3388,3396,3469,3477,3485,3491,3639,3645,3651,3663,3672,3680,3698,3704,3709,3718,3724,3729,3737,3743,3749,3758,3764,3775,3781,3790,3796,3802,3807,3867,3876,3882,3892,3897,3906,3912,3917,3926,3932,3941,3947,3956,3962,3971,3977,3983,3992,3998,4007,4012,4018,4023,4031,4039,4057,4062,4071,4075,4080,4085,4144,4149,4172,4177],{"type":25,"tag":26,"props":3359,"children":3361},{"id":3360},"core-web-vitals-2026-新标准解读",[3362],{"type":31,"value":3363},"Core Web Vitals 2026 新标准解读",{"type":25,"tag":26,"props":3365,"children":3367},{"id":3366},"_2026-年的重大变化inp-正式取代-fid",[3368],{"type":31,"value":3369},"2026 年的重大变化：INP 正式取代 FID",{"type":25,"tag":33,"props":3371,"children":3372},{},[3373,3375,3380],{"type":31,"value":3374},"2024 年 3 月，Google 正式宣布 ",{"type":25,"tag":57,"props":3376,"children":3377},{},[3378],{"type":31,"value":3379},"INP（Interaction to Next Paint）",{"type":31,"value":3381}," 取代 FID（First Input Delay）成为 Core Web Vitals 的核心指标。经过两年的过渡期，2026 年 INP 已完全成为搜索排名的重要因素。",{"type":25,"tag":45,"props":3383,"children":3385},{"id":3384},"为什么要替换-fid",[3386],{"type":31,"value":3387},"为什么要替换 FID？",{"type":25,"tag":33,"props":3389,"children":3390},{},[3391],{"type":25,"tag":57,"props":3392,"children":3393},{},[3394],{"type":31,"value":3395},"FID 的局限性：",{"type":25,"tag":233,"props":3397,"children":3398},{},[3399,3414],{"type":25,"tag":237,"props":3400,"children":3401},{},[3402],{"type":25,"tag":241,"props":3403,"children":3404},{},[3405,3410],{"type":25,"tag":245,"props":3406,"children":3407},{},[3408],{"type":31,"value":3409},"问题",{"type":25,"tag":245,"props":3411,"children":3412},{},[3413],{"type":31,"value":877},{"type":25,"tag":256,"props":3415,"children":3416},{},[3417,3430,3443,3456],{"type":25,"tag":241,"props":3418,"children":3419},{},[3420,3425],{"type":25,"tag":263,"props":3421,"children":3422},{},[3423],{"type":31,"value":3424},"只测量首次交互",{"type":25,"tag":263,"props":3426,"children":3427},{},[3428],{"type":31,"value":3429},"忽略后续所有交互的延迟",{"type":25,"tag":241,"props":3431,"children":3432},{},[3433,3438],{"type":25,"tag":263,"props":3434,"children":3435},{},[3436],{"type":31,"value":3437},"只测量输入延迟",{"type":25,"tag":263,"props":3439,"children":3440},{},[3441],{"type":31,"value":3442},"不包含事件处理和渲染时间",{"type":25,"tag":241,"props":3444,"children":3445},{},[3446,3451],{"type":25,"tag":263,"props":3447,"children":3448},{},[3449],{"type":31,"value":3450},"样本偏差",{"type":25,"tag":263,"props":3452,"children":3453},{},[3454],{"type":31,"value":3455},"某些用户可能永远不触发交互",{"type":25,"tag":241,"props":3457,"children":3458},{},[3459,3464],{"type":25,"tag":263,"props":3460,"children":3461},{},[3462],{"type":31,"value":3463},"无法反映真实体验",{"type":25,"tag":263,"props":3465,"children":3466},{},[3467],{"type":31,"value":3468},"首次交互可能很快，但后续很慢",{"type":25,"tag":33,"props":3470,"children":3471},{},[3472],{"type":25,"tag":57,"props":3473,"children":3474},{},[3475],{"type":31,"value":3476},"INP 的优势：",{"type":25,"tag":77,"props":3478,"children":3480},{"code":3479},"FID 测量范围：\n┌──────────────────────────────────────────────────┐\n│ 用户点击 → 浏览器开始处理 │ FID 结束 │\n│ ▼ ▼ │ │\n│ [===========] │ │\n│ 只测这一段 │ │\n└──────────────────────────────────────────────────┘\n\nINP 测量范围：\n┌──────────────────────────────────────────────────┐\n│ 用户点击 → 处理事件 → 渲染完成 │ INP 结束 │\n│ ▼ ▼ ▼ │ │\n│ [================================] │\n│ 完整的交互响应时间 │\n└──────────────────────────────────────────────────┘\n",[3481],{"type":25,"tag":82,"props":3482,"children":3483},{"__ignoreMap":7},[3484],{"type":31,"value":3479},{"type":25,"tag":45,"props":3486,"children":3488},{"id":3487},"_2026-年-core-web-vitals-完整指标体系",[3489],{"type":31,"value":3490},"2026 年 Core Web Vitals 完整指标体系",{"type":25,"tag":233,"props":3492,"children":3493},{},[3494,3530],{"type":25,"tag":237,"props":3495,"children":3496},{},[3497],{"type":25,"tag":241,"props":3498,"children":3499},{},[3500,3505,3510,3515,3520,3525],{"type":25,"tag":245,"props":3501,"children":3502},{},[3503],{"type":31,"value":3504},"指标",{"type":25,"tag":245,"props":3506,"children":3507},{},[3508],{"type":31,"value":3509},"全称",{"type":25,"tag":245,"props":3511,"children":3512},{},[3513],{"type":31,"value":3514},"测量内容",{"type":25,"tag":245,"props":3516,"children":3517},{},[3518],{"type":31,"value":3519},"良好阈值",{"type":25,"tag":245,"props":3521,"children":3522},{},[3523],{"type":31,"value":3524},"需改进",{"type":25,"tag":245,"props":3526,"children":3527},{},[3528],{"type":31,"value":3529},"差",{"type":25,"tag":256,"props":3531,"children":3532},{},[3533,3568,3603],{"type":25,"tag":241,"props":3534,"children":3535},{},[3536,3543,3548,3553,3558,3563],{"type":25,"tag":263,"props":3537,"children":3538},{},[3539],{"type":25,"tag":57,"props":3540,"children":3541},{},[3542],{"type":31,"value":1075},{"type":25,"tag":263,"props":3544,"children":3545},{},[3546],{"type":31,"value":3547},"Largest Contentful Paint",{"type":25,"tag":263,"props":3549,"children":3550},{},[3551],{"type":31,"value":3552},"最大内容绘制时间",{"type":25,"tag":263,"props":3554,"children":3555},{},[3556],{"type":31,"value":3557},"≤ 2.5s",{"type":25,"tag":263,"props":3559,"children":3560},{},[3561],{"type":31,"value":3562},"≤ 4s",{"type":25,"tag":263,"props":3564,"children":3565},{},[3566],{"type":31,"value":3567},"> 4s",{"type":25,"tag":241,"props":3569,"children":3570},{},[3571,3578,3583,3588,3593,3598],{"type":25,"tag":263,"props":3572,"children":3573},{},[3574],{"type":25,"tag":57,"props":3575,"children":3576},{},[3577],{"type":31,"value":3351},{"type":25,"tag":263,"props":3579,"children":3580},{},[3581],{"type":31,"value":3582},"Interaction to Next Paint",{"type":25,"tag":263,"props":3584,"children":3585},{},[3586],{"type":31,"value":3587},"交互到下一次绘制",{"type":25,"tag":263,"props":3589,"children":3590},{},[3591],{"type":31,"value":3592},"≤ 200ms",{"type":25,"tag":263,"props":3594,"children":3595},{},[3596],{"type":31,"value":3597},"≤ 500ms",{"type":25,"tag":263,"props":3599,"children":3600},{},[3601],{"type":31,"value":3602},"> 500ms",{"type":25,"tag":241,"props":3604,"children":3605},{},[3606,3614,3619,3624,3629,3634],{"type":25,"tag":263,"props":3607,"children":3608},{},[3609],{"type":25,"tag":57,"props":3610,"children":3611},{},[3612],{"type":31,"value":3613},"CLS",{"type":25,"tag":263,"props":3615,"children":3616},{},[3617],{"type":31,"value":3618},"Cumulative Layout Shift",{"type":25,"tag":263,"props":3620,"children":3621},{},[3622],{"type":31,"value":3623},"累积布局偏移",{"type":25,"tag":263,"props":3625,"children":3626},{},[3627],{"type":31,"value":3628},"≤ 0.1",{"type":25,"tag":263,"props":3630,"children":3631},{},[3632],{"type":31,"value":3633},"≤ 0.25",{"type":25,"tag":263,"props":3635,"children":3636},{},[3637],{"type":31,"value":3638},"> 0.25",{"type":25,"tag":26,"props":3640,"children":3642},{"id":3641},"inp-深度解析",[3643],{"type":31,"value":3644},"INP 深度解析",{"type":25,"tag":45,"props":3646,"children":3648},{"id":3647},"inp-的计算方式",[3649],{"type":31,"value":3650},"INP 的计算方式",{"type":25,"tag":33,"props":3652,"children":3653},{},[3654,3656,3661],{"type":31,"value":3655},"INP 并非所有交互延迟的平均值，而是采用",{"type":25,"tag":57,"props":3657,"children":3658},{},[3659],{"type":31,"value":3660},"高百分位值",{"type":31,"value":3662},"策略：",{"type":25,"tag":77,"props":3664,"children":3667},{"code":3665,"language":110,"meta":7,"className":3666},"// 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",[112],[3668],{"type":25,"tag":82,"props":3669,"children":3670},{"__ignoreMap":7},[3671],{"type":31,"value":3665},{"type":25,"tag":33,"props":3673,"children":3674},{},[3675],{"type":25,"tag":57,"props":3676,"children":3677},{},[3678],{"type":31,"value":3679},"为什么选择高百分位而非平均值？",{"type":25,"tag":613,"props":3681,"children":3682},{},[3683,3688,3693],{"type":25,"tag":431,"props":3684,"children":3685},{},[3686],{"type":31,"value":3687},"平均值会被大量快速交互\"稀释\"",{"type":25,"tag":431,"props":3689,"children":3690},{},[3691],{"type":31,"value":3692},"用户对慢交互的感知更强烈",{"type":25,"tag":431,"props":3694,"children":3695},{},[3696],{"type":31,"value":3697},"高百分位更能反映\"最坏情况\"体验",{"type":25,"tag":45,"props":3699,"children":3701},{"id":3700},"什么算作一次交互",[3702],{"type":31,"value":3703},"什么算作一次交互？",{"type":25,"tag":33,"props":3705,"children":3706},{},[3707],{"type":31,"value":3708},"INP 追踪以下类型的交互：",{"type":25,"tag":77,"props":3710,"children":3713},{"code":3711,"language":110,"meta":7,"className":3712},"// 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",[112],[3714],{"type":25,"tag":82,"props":3715,"children":3716},{"__ignoreMap":7},[3717],{"type":31,"value":3711},{"type":25,"tag":45,"props":3719,"children":3721},{"id":3720},"inp-的三个阶段",[3722],{"type":31,"value":3723},"INP 的三个阶段",{"type":25,"tag":33,"props":3725,"children":3726},{},[3727],{"type":31,"value":3728},"一次完整的交互由三个阶段组成：",{"type":25,"tag":77,"props":3730,"children":3732},{"code":3731},"┌─────────────────────────────────────────────────────────────┐\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",[3733],{"type":25,"tag":82,"props":3734,"children":3735},{"__ignoreMap":7},[3736],{"type":31,"value":3731},{"type":25,"tag":26,"props":3738,"children":3740},{"id":3739},"测量-core-web-vitals",[3741],{"type":31,"value":3742},"测量 Core Web Vitals",{"type":25,"tag":45,"props":3744,"children":3746},{"id":3745},"使用-web-vitals-库",[3747],{"type":31,"value":3748},"使用 web-vitals 库",{"type":25,"tag":77,"props":3750,"children":3753},{"code":3751,"language":110,"meta":7,"className":3752},"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",[112],[3754],{"type":25,"tag":82,"props":3755,"children":3756},{"__ignoreMap":7},[3757],{"type":31,"value":3751},{"type":25,"tag":45,"props":3759,"children":3761},{"id":3760},"在-vuenuxt-中集成",[3762],{"type":31,"value":3763},"在 Vue/Nuxt 中集成",{"type":25,"tag":77,"props":3765,"children":3770},{"code":3766,"language":3767,"meta":7,"className":3768},"// 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",[3769],"language-typescript",[3771],{"type":25,"tag":82,"props":3772,"children":3773},{"__ignoreMap":7},[3774],{"type":31,"value":3766},{"type":25,"tag":45,"props":3776,"children":3778},{"id":3777},"在-nextjs-中集成",[3779],{"type":31,"value":3780},"在 Next.js 中集成",{"type":25,"tag":77,"props":3782,"children":3785},{"code":3783,"language":3767,"meta":7,"className":3784},"// 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",[3769],[3786],{"type":25,"tag":82,"props":3787,"children":3788},{"__ignoreMap":7},[3789],{"type":31,"value":3783},{"type":25,"tag":26,"props":3791,"children":3793},{"id":3792},"lcp-优化策略-2026",[3794],{"type":31,"value":3795},"LCP 优化策略 2026",{"type":25,"tag":45,"props":3797,"children":3799},{"id":3798},"lcp-元素识别",[3800],{"type":31,"value":3801},"LCP 元素识别",{"type":25,"tag":33,"props":3803,"children":3804},{},[3805],{"type":31,"value":3806},"LCP 候选元素类型：",{"type":25,"tag":613,"props":3808,"children":3809},{},[3810,3821,3839,3849,3862],{"type":25,"tag":431,"props":3811,"children":3812},{},[3813,3819],{"type":25,"tag":82,"props":3814,"children":3816},{"className":3815},[],[3817],{"type":31,"value":3818},"\u003Cimg>",{"type":31,"value":3820}," 元素",{"type":25,"tag":431,"props":3822,"children":3823},{},[3824,3830,3832,3838],{"type":25,"tag":82,"props":3825,"children":3827},{"className":3826},[],[3828],{"type":31,"value":3829},"\u003Csvg>",{"type":31,"value":3831}," 内的 ",{"type":25,"tag":82,"props":3833,"children":3835},{"className":3834},[],[3836],{"type":31,"value":3837},"\u003Cimage>",{"type":31,"value":3820},{"type":25,"tag":431,"props":3840,"children":3841},{},[3842,3847],{"type":25,"tag":82,"props":3843,"children":3845},{"className":3844},[],[3846],{"type":31,"value":349},{"type":31,"value":3848}," 元素的封面图",{"type":25,"tag":431,"props":3850,"children":3851},{},[3852,3854,3860],{"type":31,"value":3853},"通过 ",{"type":25,"tag":82,"props":3855,"children":3857},{"className":3856},[],[3858],{"type":31,"value":3859},"background-image",{"type":31,"value":3861}," 加载图片的元素",{"type":25,"tag":431,"props":3863,"children":3864},{},[3865],{"type":31,"value":3866},"包含文本节点的块级元素",{"type":25,"tag":77,"props":3868,"children":3871},{"code":3869,"language":110,"meta":7,"className":3870},"// 获取 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",[112],[3872],{"type":25,"tag":82,"props":3873,"children":3874},{"__ignoreMap":7},[3875],{"type":31,"value":3869},{"type":25,"tag":45,"props":3877,"children":3879},{"id":3878},"_2026-年-lcp-优化清单",[3880],{"type":31,"value":3881},"2026 年 LCP 优化清单",{"type":25,"tag":77,"props":3883,"children":3887},{"code":3884,"language":1061,"meta":7,"className":3885},"## 资源发现优化\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",[3886],"language-markdown",[3888],{"type":25,"tag":82,"props":3889,"children":3890},{"__ignoreMap":7},[3891],{"type":31,"value":3884},{"type":25,"tag":45,"props":3893,"children":3895},{"id":3894},"资源优先级提示",[3896],{"type":31,"value":3894},{"type":25,"tag":77,"props":3898,"children":3901},{"code":3899,"language":659,"meta":7,"className":3900},"\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",[661],[3902],{"type":25,"tag":82,"props":3903,"children":3904},{"__ignoreMap":7},[3905],{"type":31,"value":3899},{"type":25,"tag":26,"props":3907,"children":3909},{"id":3908},"inp-优化策略-2026",[3910],{"type":31,"value":3911},"INP 优化策略 2026",{"type":25,"tag":45,"props":3913,"children":3915},{"id":3914},"识别慢交互",[3916],{"type":31,"value":3914},{"type":25,"tag":77,"props":3918,"children":3921},{"code":3919,"language":110,"meta":7,"className":3920},"// 使用 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",[112],[3922],{"type":25,"tag":82,"props":3923,"children":3924},{"__ignoreMap":7},[3925],{"type":31,"value":3919},{"type":25,"tag":45,"props":3927,"children":3929},{"id":3928},"优化输入延迟input-delay",[3930],{"type":31,"value":3931},"优化输入延迟（Input Delay）",{"type":25,"tag":77,"props":3933,"children":3936},{"code":3934,"language":110,"meta":7,"className":3935},"// ❌ 长任务阻塞主线程\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",[112],[3937],{"type":25,"tag":82,"props":3938,"children":3939},{"__ignoreMap":7},[3940],{"type":31,"value":3934},{"type":25,"tag":45,"props":3942,"children":3944},{"id":3943},"优化处理时间processing-time",[3945],{"type":31,"value":3946},"优化处理时间（Processing Time）",{"type":25,"tag":77,"props":3948,"children":3951},{"code":3949,"language":110,"meta":7,"className":3950},"// ❌ 事件处理中包含大量同步操作\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",[112],[3952],{"type":25,"tag":82,"props":3953,"children":3954},{"__ignoreMap":7},[3955],{"type":31,"value":3949},{"type":25,"tag":45,"props":3957,"children":3959},{"id":3958},"优化呈现延迟presentation-delay",[3960],{"type":31,"value":3961},"优化呈现延迟（Presentation Delay）",{"type":25,"tag":77,"props":3963,"children":3966},{"code":3964,"language":110,"meta":7,"className":3965},"// ❌ 触发强制同步布局\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",[112],[3967],{"type":25,"tag":82,"props":3968,"children":3969},{"__ignoreMap":7},[3970],{"type":31,"value":3964},{"type":25,"tag":26,"props":3972,"children":3974},{"id":3973},"cls-优化策略-2026",[3975],{"type":31,"value":3976},"CLS 优化策略 2026",{"type":25,"tag":45,"props":3978,"children":3980},{"id":3979},"cls-来源分析",[3981],{"type":31,"value":3982},"CLS 来源分析",{"type":25,"tag":77,"props":3984,"children":3987},{"code":3985,"language":110,"meta":7,"className":3986},"// 监控并分析 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",[112],[3988],{"type":25,"tag":82,"props":3989,"children":3990},{"__ignoreMap":7},[3991],{"type":31,"value":3985},{"type":25,"tag":45,"props":3993,"children":3995},{"id":3994},"_2026-年-cls-优化清单",[3996],{"type":31,"value":3997},"2026 年 CLS 优化清单",{"type":25,"tag":77,"props":3999,"children":4002},{"code":4000,"language":659,"meta":7,"className":4001},"\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",[661],[4003],{"type":25,"tag":82,"props":4004,"children":4005},{"__ignoreMap":7},[4006],{"type":31,"value":4000},{"type":25,"tag":26,"props":4008,"children":4010},{"id":4009},"搜索排名影响与应对策略",[4011],{"type":31,"value":4009},{"type":25,"tag":45,"props":4013,"children":4015},{"id":4014},"core-web-vitals-在排名中的权重",[4016],{"type":31,"value":4017},"Core Web Vitals 在排名中的权重",{"type":25,"tag":33,"props":4019,"children":4020},{},[4021],{"type":31,"value":4022},"根据 Google 官方说明和实际观察：",{"type":25,"tag":77,"props":4024,"children":4026},{"code":4025},"排名因素权重（估算）：\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",[4027],{"type":25,"tag":82,"props":4028,"children":4029},{"__ignoreMap":7},[4030],{"type":31,"value":4025},{"type":25,"tag":33,"props":4032,"children":4033},{},[4034],{"type":25,"tag":57,"props":4035,"children":4036},{},[4037],{"type":31,"value":4038},"重要提示：",{"type":25,"tag":613,"props":4040,"children":4041},{},[4042,4047,4052],{"type":25,"tag":431,"props":4043,"children":4044},{},[4045],{"type":31,"value":4046},"Core Web Vitals 是\"入围资格\"而非\"排名加分\"",{"type":25,"tag":431,"props":4048,"children":4049},{},[4050],{"type":31,"value":4051},"当内容质量相近时，性能优势更明显",{"type":25,"tag":431,"props":4053,"children":4054},{},[4055],{"type":31,"value":4056},"差的 Core Web Vitals 可能导致排名下降",{"type":25,"tag":45,"props":4058,"children":4060},{"id":4059},"监控与预警系统",[4061],{"type":31,"value":4059},{"type":25,"tag":77,"props":4063,"children":4066},{"code":4064,"language":3767,"meta":7,"className":4065},"// 建立 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",[3769],[4067],{"type":25,"tag":82,"props":4068,"children":4069},{"__ignoreMap":7},[4070],{"type":31,"value":4064},{"type":25,"tag":26,"props":4072,"children":4073},{"id":851},[4074],{"type":31,"value":851},{"type":25,"tag":33,"props":4076,"children":4077},{},[4078],{"type":31,"value":4079},"2026 年的 Core Web Vitals 以 INP 为核心，标志着性能评估从\"首次加载\"向\"全程交互\"的转变。",{"type":25,"tag":45,"props":4081,"children":4083},{"id":4082},"关键要点回顾",[4084],{"type":31,"value":4082},{"type":25,"tag":613,"props":4086,"children":4087},{},[4088,4100,4111,4122,4133],{"type":25,"tag":431,"props":4089,"children":4090},{},[4091,4093,4098],{"type":31,"value":4092},"✅ ",{"type":25,"tag":57,"props":4094,"children":4095},{},[4096],{"type":31,"value":4097},"INP 取代 FID",{"type":31,"value":4099},"：测量完整交互响应时间",{"type":25,"tag":431,"props":4101,"children":4102},{},[4103,4104,4109],{"type":31,"value":4092},{"type":25,"tag":57,"props":4105,"children":4106},{},[4107],{"type":31,"value":4108},"三大指标协同",{"type":31,"value":4110},"：LCP（加载）+ INP（交互）+ CLS（稳定）",{"type":25,"tag":431,"props":4112,"children":4113},{},[4114,4115,4120],{"type":31,"value":4092},{"type":25,"tag":57,"props":4116,"children":4117},{},[4118],{"type":31,"value":4119},"优化优先级",{"type":31,"value":4121},"：先保证 INP，再优化 LCP 和 CLS",{"type":25,"tag":431,"props":4123,"children":4124},{},[4125,4126,4131],{"type":31,"value":4092},{"type":25,"tag":57,"props":4127,"children":4128},{},[4129],{"type":31,"value":4130},"持续监控",{"type":31,"value":4132},"：建立实时监控和预警机制",{"type":25,"tag":431,"props":4134,"children":4135},{},[4136,4137,4142],{"type":31,"value":4092},{"type":25,"tag":57,"props":4138,"children":4139},{},[4140],{"type":31,"value":4141},"渐进优化",{"type":31,"value":4143},"：从高流量页面开始，逐步覆盖全站",{"type":25,"tag":45,"props":4145,"children":4147},{"id":4146},"立即行动",[4148],{"type":31,"value":4146},{"type":25,"tag":427,"props":4150,"children":4151},{},[4152,4157,4162,4167],{"type":25,"tag":431,"props":4153,"children":4154},{},[4155],{"type":31,"value":4156},"使用 web-vitals 库集成性能监控",{"type":25,"tag":431,"props":4158,"children":4159},{},[4160],{"type":31,"value":4161},"在 Chrome DevTools 中检查慢交互",{"type":25,"tag":431,"props":4163,"children":4164},{},[4165],{"type":31,"value":4166},"重点优化 INP > 200ms 的交互",{"type":25,"tag":431,"props":4168,"children":4169},{},[4170],{"type":31,"value":4171},"建立周期性的性能审计流程",{"type":25,"tag":26,"props":4173,"children":4175},{"id":4174},"相关资源",[4176],{"type":31,"value":4174},{"type":25,"tag":613,"props":4178,"children":4179},{},[4180,4190,4200,4210,4220],{"type":25,"tag":431,"props":4181,"children":4182},{},[4183],{"type":25,"tag":985,"props":4184,"children":4187},{"href":4185,"rel":4186},"https://web.dev/vitals/",[989],[4188],{"type":31,"value":4189},"web.dev - Core Web Vitals",{"type":25,"tag":431,"props":4191,"children":4192},{},[4193],{"type":25,"tag":985,"props":4194,"children":4197},{"href":4195,"rel":4196},"https://developer.chrome.com/docs/devtools/performance/",[989],[4198],{"type":31,"value":4199},"Chrome DevTools - 性能分析",{"type":25,"tag":431,"props":4201,"children":4202},{},[4203],{"type":25,"tag":985,"props":4204,"children":4207},{"href":4205,"rel":4206},"https://github.com/GoogleChrome/web-vitals",[989],[4208],{"type":31,"value":4209},"web-vitals 库",{"type":25,"tag":431,"props":4211,"children":4212},{},[4213],{"type":25,"tag":985,"props":4214,"children":4217},{"href":4215,"rel":4216},"https://pagespeed.web.dev/",[989],[4218],{"type":31,"value":4219},"PageSpeed Insights",{"type":25,"tag":431,"props":4221,"children":4222},{},[4223],{"type":25,"tag":985,"props":4224,"children":4227},{"href":4225,"rel":4226},"https://search.google.com/search-console/",[989],[4228],{"type":31,"value":4229},"Search Console Core Web Vitals 报告",{"title":7,"searchDepth":1016,"depth":1016,"links":4231},[4232,4233,4237,4242,4247,4252,4258,4262,4266,4270],{"id":3360,"depth":1019,"text":3363},{"id":3366,"depth":1019,"text":3369,"children":4234},[4235,4236],{"id":3384,"depth":1016,"text":3387},{"id":3487,"depth":1016,"text":3490},{"id":3641,"depth":1019,"text":3644,"children":4238},[4239,4240,4241],{"id":3647,"depth":1016,"text":3650},{"id":3700,"depth":1016,"text":3703},{"id":3720,"depth":1016,"text":3723},{"id":3739,"depth":1019,"text":3742,"children":4243},[4244,4245,4246],{"id":3745,"depth":1016,"text":3748},{"id":3760,"depth":1016,"text":3763},{"id":3777,"depth":1016,"text":3780},{"id":3792,"depth":1019,"text":3795,"children":4248},[4249,4250,4251],{"id":3798,"depth":1016,"text":3801},{"id":3878,"depth":1016,"text":3881},{"id":3894,"depth":1016,"text":3894},{"id":3908,"depth":1019,"text":3911,"children":4253},[4254,4255,4256,4257],{"id":3914,"depth":1016,"text":3914},{"id":3928,"depth":1016,"text":3931},{"id":3943,"depth":1016,"text":3946},{"id":3958,"depth":1016,"text":3961},{"id":3973,"depth":1019,"text":3976,"children":4259},[4260,4261],{"id":3979,"depth":1016,"text":3982},{"id":3994,"depth":1016,"text":3997},{"id":4009,"depth":1019,"text":4009,"children":4263},[4264,4265],{"id":4014,"depth":1016,"text":4017},{"id":4059,"depth":1016,"text":4059},{"id":851,"depth":1019,"text":851,"children":4267},[4268,4269],{"id":4082,"depth":1016,"text":4082},{"id":4146,"depth":1016,"text":4146},{"id":4174,"depth":1019,"text":4174},"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":4275,"image":18,"featured":19,"readingTime":20,"body":4276,"_type":1061,"_id":1062,"_source":1063,"_file":1064,"_stem":1065,"_extension":1066},[13,14,15,16,17],{"type":22,"children":4277,"toc":5076},[4278,4282,4286,4290,4294,4308,4312,4319,4323,4327,4331,4335,4343,4347,4351,4359,4363,4367,4374,4378,4382,4390,4394,4398,4406,4410,4414,4422,4426,4430,4434,4588,4592,4596,4611,4619,4623,4627,4647,4654,4658,4666,4675,4679,4683,4692,4700,4704,4719,4723,4731,4735,4743,4747,4762,4770,4774,4778,4782,4790,4794,4798,4802,4810,4814,4822,4826,4847,4851,4855,4863,4867,4875,4879,4887,4891,4895,4899,4906,4910,4925,4929,4937,4941,4945,5035,5044,5048],{"type":25,"tag":26,"props":4279,"children":4280},{"id":28},[4281],{"type":31,"value":8},{"type":25,"tag":33,"props":4283,"children":4284},{},[4285],{"type":31,"value":37},{"type":25,"tag":26,"props":4287,"children":4288},{"id":40},[4289],{"type":31,"value":43},{"type":25,"tag":45,"props":4291,"children":4292},{"id":47},[4293],{"type":31,"value":50},{"type":25,"tag":33,"props":4295,"children":4296},{},[4297,4298,4302,4303,4307],{"type":31,"value":55},{"type":25,"tag":57,"props":4299,"children":4300},{},[4301],{"type":31,"value":61},{"type":31,"value":63},{"type":25,"tag":57,"props":4304,"children":4305},{},[4306],{"type":31,"value":68},{"type":31,"value":70},{"type":25,"tag":33,"props":4309,"children":4310},{},[4311],{"type":31,"value":75},{"type":25,"tag":77,"props":4313,"children":4314},{"code":79},[4315],{"type":25,"tag":82,"props":4316,"children":4317},{"__ignoreMap":7},[4318],{"type":31,"value":79},{"type":25,"tag":26,"props":4320,"children":4321},{"id":88},[4322],{"type":31,"value":88},{"type":25,"tag":33,"props":4324,"children":4325},{},[4326],{"type":31,"value":95},{"type":25,"tag":45,"props":4328,"children":4329},{"id":98},[4330],{"type":31,"value":101},{"type":25,"tag":33,"props":4332,"children":4333},{},[4334],{"type":31,"value":106},{"type":25,"tag":77,"props":4336,"children":4338},{"code":109,"language":110,"meta":7,"className":4337},[112],[4339],{"type":25,"tag":82,"props":4340,"children":4341},{"__ignoreMap":7},[4342],{"type":31,"value":109},{"type":25,"tag":45,"props":4344,"children":4345},{"id":120},[4346],{"type":31,"value":123},{"type":25,"tag":33,"props":4348,"children":4349},{},[4350],{"type":31,"value":128},{"type":25,"tag":77,"props":4352,"children":4354},{"code":131,"language":110,"meta":7,"className":4353},[112],[4355],{"type":25,"tag":82,"props":4356,"children":4357},{"__ignoreMap":7},[4358],{"type":31,"value":131},{"type":25,"tag":45,"props":4360,"children":4361},{"id":140},[4362],{"type":31,"value":143},{"type":25,"tag":33,"props":4364,"children":4365},{},[4366],{"type":31,"value":148},{"type":25,"tag":77,"props":4368,"children":4369},{"code":151},[4370],{"type":25,"tag":82,"props":4371,"children":4372},{"__ignoreMap":7},[4373],{"type":31,"value":151},{"type":25,"tag":45,"props":4375,"children":4376},{"id":159},[4377],{"type":31,"value":162},{"type":25,"tag":33,"props":4379,"children":4380},{},[4381],{"type":31,"value":167},{"type":25,"tag":77,"props":4383,"children":4385},{"code":170,"language":110,"meta":7,"className":4384},[112],[4386],{"type":25,"tag":82,"props":4387,"children":4388},{"__ignoreMap":7},[4389],{"type":31,"value":170},{"type":25,"tag":45,"props":4391,"children":4392},{"id":179},[4393],{"type":31,"value":182},{"type":25,"tag":33,"props":4395,"children":4396},{},[4397],{"type":31,"value":187},{"type":25,"tag":77,"props":4399,"children":4401},{"code":190,"language":110,"meta":7,"className":4400},[112],[4402],{"type":25,"tag":82,"props":4403,"children":4404},{"__ignoreMap":7},[4405],{"type":31,"value":190},{"type":25,"tag":45,"props":4407,"children":4408},{"id":199},[4409],{"type":31,"value":202},{"type":25,"tag":33,"props":4411,"children":4412},{},[4413],{"type":31,"value":207},{"type":25,"tag":77,"props":4415,"children":4417},{"code":210,"language":110,"meta":7,"className":4416},[112],[4418],{"type":25,"tag":82,"props":4419,"children":4420},{"__ignoreMap":7},[4421],{"type":31,"value":210},{"type":25,"tag":26,"props":4423,"children":4424},{"id":219},[4425],{"type":31,"value":219},{"type":25,"tag":33,"props":4427,"children":4428},{},[4429],{"type":31,"value":226},{"type":25,"tag":45,"props":4431,"children":4432},{"id":229},[4433],{"type":31,"value":229},{"type":25,"tag":233,"props":4435,"children":4436},{},[4437,4451],{"type":25,"tag":237,"props":4438,"children":4439},{},[4440],{"type":25,"tag":241,"props":4441,"children":4442},{},[4443,4447],{"type":25,"tag":245,"props":4444,"children":4445},{},[4446],{"type":31,"value":249},{"type":25,"tag":245,"props":4448,"children":4449},{},[4450],{"type":31,"value":254},{"type":25,"tag":256,"props":4452,"children":4453},{},[4454,4475,4494,4516,4531,4546,4561,4577],{"type":25,"tag":241,"props":4455,"children":4456},{},[4457,4461],{"type":25,"tag":263,"props":4458,"children":4459},{},[4460],{"type":31,"value":267},{"type":25,"tag":263,"props":4462,"children":4463},{},[4464,4469,4470],{"type":25,"tag":82,"props":4465,"children":4467},{"className":4466},[],[4468],{"type":31,"value":276},{"type":31,"value":278},{"type":25,"tag":82,"props":4471,"children":4473},{"className":4472},[],[4474],{"type":31,"value":284},{"type":25,"tag":241,"props":4476,"children":4477},{},[4478,4486],{"type":25,"tag":263,"props":4479,"children":4480},{},[4481],{"type":25,"tag":82,"props":4482,"children":4484},{"className":4483},[],[4485],{"type":31,"value":296},{"type":25,"tag":263,"props":4487,"children":4488},{},[4489],{"type":25,"tag":82,"props":4490,"children":4492},{"className":4491},[],[4493],{"type":31,"value":305},{"type":25,"tag":241,"props":4495,"children":4496},{},[4497,4506],{"type":25,"tag":263,"props":4498,"children":4499},{},[4500,4505],{"type":25,"tag":82,"props":4501,"children":4503},{"className":4502},[],[4504],{"type":31,"value":317},{"type":31,"value":319},{"type":25,"tag":263,"props":4507,"children":4508},{},[4509,4510,4515],{"type":31,"value":324},{"type":25,"tag":82,"props":4511,"children":4513},{"className":4512},[],[4514],{"type":31,"value":330},{"type":31,"value":332},{"type":25,"tag":241,"props":4517,"children":4518},{},[4519,4523],{"type":25,"tag":263,"props":4520,"children":4521},{},[4522],{"type":31,"value":340},{"type":25,"tag":263,"props":4524,"children":4525},{},[4526],{"type":25,"tag":82,"props":4527,"children":4529},{"className":4528},[],[4530],{"type":31,"value":349},{"type":25,"tag":241,"props":4532,"children":4533},{},[4534,4538],{"type":25,"tag":263,"props":4535,"children":4536},{},[4537],{"type":31,"value":357},{"type":25,"tag":263,"props":4539,"children":4540},{},[4541],{"type":25,"tag":82,"props":4542,"children":4544},{"className":4543},[],[4545],{"type":31,"value":366},{"type":25,"tag":241,"props":4547,"children":4548},{},[4549,4553],{"type":25,"tag":263,"props":4550,"children":4551},{},[4552],{"type":31,"value":374},{"type":25,"tag":263,"props":4554,"children":4555},{},[4556],{"type":25,"tag":82,"props":4557,"children":4559},{"className":4558},[],[4560],{"type":31,"value":383},{"type":25,"tag":241,"props":4562,"children":4563},{},[4564,4568],{"type":25,"tag":263,"props":4565,"children":4566},{},[4567],{"type":31,"value":391},{"type":25,"tag":263,"props":4569,"children":4570},{},[4571,4576],{"type":25,"tag":82,"props":4572,"children":4574},{"className":4573},[],[4575],{"type":31,"value":400},{"type":31,"value":402},{"type":25,"tag":241,"props":4578,"children":4579},{},[4580,4584],{"type":25,"tag":263,"props":4581,"children":4582},{},[4583],{"type":31,"value":410},{"type":25,"tag":263,"props":4585,"children":4586},{},[4587],{"type":31,"value":415},{"type":25,"tag":45,"props":4589,"children":4590},{"id":418},[4591],{"type":31,"value":418},{"type":25,"tag":33,"props":4593,"children":4594},{},[4595],{"type":31,"value":425},{"type":25,"tag":427,"props":4597,"children":4598},{},[4599,4603,4607],{"type":25,"tag":431,"props":4600,"children":4601},{},[4602],{"type":31,"value":435},{"type":25,"tag":431,"props":4604,"children":4605},{},[4606],{"type":31,"value":440},{"type":25,"tag":431,"props":4608,"children":4609},{},[4610],{"type":31,"value":445},{"type":25,"tag":77,"props":4612,"children":4614},{"code":448,"language":110,"meta":7,"className":4613},[112],[4615],{"type":25,"tag":82,"props":4616,"children":4617},{"__ignoreMap":7},[4618],{"type":31,"value":448},{"type":25,"tag":26,"props":4620,"children":4621},{"id":457},[4622],{"type":31,"value":460},{"type":25,"tag":45,"props":4624,"children":4625},{"id":463},[4626],{"type":31,"value":463},{"type":25,"tag":33,"props":4628,"children":4629},{},[4630,4635,4636,4641,4642,4646],{"type":25,"tag":82,"props":4631,"children":4633},{"className":4632},[],[4634],{"type":31,"value":330},{"type":31,"value":475},{"type":25,"tag":82,"props":4637,"children":4639},{"className":4638},[],[4640],{"type":31,"value":317},{"type":31,"value":482},{"type":25,"tag":57,"props":4643,"children":4644},{},[4645],{"type":31,"value":487},{"type":31,"value":489},{"type":25,"tag":77,"props":4648,"children":4649},{"code":492},[4650],{"type":25,"tag":82,"props":4651,"children":4652},{"__ignoreMap":7},[4653],{"type":31,"value":492},{"type":25,"tag":45,"props":4655,"children":4656},{"id":500},[4657],{"type":31,"value":500},{"type":25,"tag":77,"props":4659,"children":4661},{"code":505,"language":506,"meta":7,"className":4660},[508],[4662],{"type":25,"tag":82,"props":4663,"children":4664},{"__ignoreMap":7},[4665],{"type":31,"value":505},{"type":25,"tag":33,"props":4667,"children":4668},{},[4669,4670,4674],{"type":31,"value":518},{"type":25,"tag":57,"props":4671,"children":4672},{},[4673],{"type":31,"value":523},{"type":31,"value":525},{"type":25,"tag":26,"props":4676,"children":4677},{"id":528},[4678],{"type":31,"value":531},{"type":25,"tag":45,"props":4680,"children":4681},{"id":534},[4682],{"type":31,"value":534},{"type":25,"tag":33,"props":4684,"children":4685},{},[4686,4691],{"type":25,"tag":82,"props":4687,"children":4689},{"className":4688},[],[4690],{"type":31,"value":296},{"type":31,"value":546},{"type":25,"tag":77,"props":4693,"children":4695},{"code":549,"language":506,"meta":7,"className":4694},[508],[4696],{"type":25,"tag":82,"props":4697,"children":4698},{"__ignoreMap":7},[4699],{"type":31,"value":549},{"type":25,"tag":33,"props":4701,"children":4702},{},[4703],{"type":31,"value":560},{"type":25,"tag":427,"props":4705,"children":4706},{},[4707,4711,4715],{"type":25,"tag":431,"props":4708,"children":4709},{},[4710],{"type":31,"value":568},{"type":25,"tag":431,"props":4712,"children":4713},{},[4714],{"type":31,"value":573},{"type":25,"tag":431,"props":4716,"children":4717},{},[4718],{"type":31,"value":578},{"type":25,"tag":45,"props":4720,"children":4721},{"id":581},[4722],{"type":31,"value":581},{"type":25,"tag":77,"props":4724,"children":4726},{"code":586,"language":506,"meta":7,"className":4725},[508],[4727],{"type":25,"tag":82,"props":4728,"children":4729},{"__ignoreMap":7},[4730],{"type":31,"value":586},{"type":25,"tag":45,"props":4732,"children":4733},{"id":595},[4734],{"type":31,"value":595},{"type":25,"tag":77,"props":4736,"children":4738},{"code":600,"language":506,"meta":7,"className":4737},[508],[4739],{"type":25,"tag":82,"props":4740,"children":4741},{"__ignoreMap":7},[4742],{"type":31,"value":600},{"type":25,"tag":33,"props":4744,"children":4745},{},[4746],{"type":31,"value":611},{"type":25,"tag":613,"props":4748,"children":4749},{},[4750,4754,4758],{"type":25,"tag":431,"props":4751,"children":4752},{},[4753],{"type":31,"value":620},{"type":25,"tag":431,"props":4755,"children":4756},{},[4757],{"type":31,"value":625},{"type":25,"tag":431,"props":4759,"children":4760},{},[4761],{"type":31,"value":630},{"type":25,"tag":33,"props":4763,"children":4764},{},[4765,4769],{"type":25,"tag":57,"props":4766,"children":4767},{},[4768],{"type":31,"value":638},{"type":31,"value":640},{"type":25,"tag":26,"props":4771,"children":4772},{"id":643},[4773],{"type":31,"value":643},{"type":25,"tag":45,"props":4775,"children":4776},{"id":648},[4777],{"type":31,"value":648},{"type":25,"tag":33,"props":4779,"children":4780},{},[4781],{"type":31,"value":655},{"type":25,"tag":77,"props":4783,"children":4785},{"code":658,"language":659,"meta":7,"className":4784},[661],[4786],{"type":25,"tag":82,"props":4787,"children":4788},{"__ignoreMap":7},[4789],{"type":31,"value":658},{"type":25,"tag":33,"props":4791,"children":4792},{},[4793],{"type":31,"value":671},{"type":25,"tag":45,"props":4795,"children":4796},{"id":674},[4797],{"type":31,"value":674},{"type":25,"tag":33,"props":4799,"children":4800},{},[4801],{"type":31,"value":681},{"type":25,"tag":77,"props":4803,"children":4805},{"code":684,"language":506,"meta":7,"className":4804},[508],[4806],{"type":25,"tag":82,"props":4807,"children":4808},{"__ignoreMap":7},[4809],{"type":31,"value":684},{"type":25,"tag":45,"props":4811,"children":4812},{"id":693},[4813],{"type":31,"value":693},{"type":25,"tag":77,"props":4815,"children":4817},{"code":698,"language":110,"meta":7,"className":4816},[112],[4818],{"type":25,"tag":82,"props":4819,"children":4820},{"__ignoreMap":7},[4821],{"type":31,"value":698},{"type":25,"tag":33,"props":4823,"children":4824},{},[4825],{"type":31,"value":709},{"type":25,"tag":427,"props":4827,"children":4828},{},[4829,4833,4837],{"type":25,"tag":431,"props":4830,"children":4831},{},[4832],{"type":31,"value":717},{"type":25,"tag":431,"props":4834,"children":4835},{},[4836],{"type":31,"value":722},{"type":25,"tag":431,"props":4838,"children":4839},{},[4840,4841,4846],{"type":31,"value":727},{"type":25,"tag":82,"props":4842,"children":4844},{"className":4843},[],[4845],{"type":31,"value":733},{"type":31,"value":735},{"type":25,"tag":26,"props":4848,"children":4849},{"id":738},[4850],{"type":31,"value":741},{"type":25,"tag":45,"props":4852,"children":4853},{"id":744},[4854],{"type":31,"value":747},{"type":25,"tag":77,"props":4856,"children":4858},{"code":750,"language":506,"meta":7,"className":4857},[508],[4859],{"type":25,"tag":82,"props":4860,"children":4861},{"__ignoreMap":7},[4862],{"type":31,"value":750},{"type":25,"tag":45,"props":4864,"children":4865},{"id":759},[4866],{"type":31,"value":762},{"type":25,"tag":77,"props":4868,"children":4870},{"code":765,"language":110,"meta":7,"className":4869},[112],[4871],{"type":25,"tag":82,"props":4872,"children":4873},{"__ignoreMap":7},[4874],{"type":31,"value":765},{"type":25,"tag":45,"props":4876,"children":4877},{"id":774},[4878],{"type":31,"value":777},{"type":25,"tag":77,"props":4880,"children":4882},{"code":780,"language":110,"meta":7,"className":4881},[112],[4883],{"type":25,"tag":82,"props":4884,"children":4885},{"__ignoreMap":7},[4886],{"type":31,"value":780},{"type":25,"tag":26,"props":4888,"children":4889},{"id":789},[4890],{"type":31,"value":789},{"type":25,"tag":45,"props":4892,"children":4893},{"id":794},[4894],{"type":31,"value":797},{"type":25,"tag":33,"props":4896,"children":4897},{},[4898],{"type":31,"value":802},{"type":25,"tag":77,"props":4900,"children":4901},{"code":805},[4902],{"type":25,"tag":82,"props":4903,"children":4904},{"__ignoreMap":7},[4905],{"type":31,"value":805},{"type":25,"tag":45,"props":4907,"children":4908},{"id":813},[4909],{"type":31,"value":816},{"type":25,"tag":427,"props":4911,"children":4912},{},[4913,4917,4921],{"type":25,"tag":431,"props":4914,"children":4915},{},[4916],{"type":31,"value":824},{"type":25,"tag":431,"props":4918,"children":4919},{},[4920],{"type":31,"value":829},{"type":25,"tag":431,"props":4922,"children":4923},{},[4924],{"type":31,"value":834},{"type":25,"tag":45,"props":4926,"children":4927},{"id":837},[4928],{"type":31,"value":837},{"type":25,"tag":77,"props":4930,"children":4932},{"code":842,"language":110,"meta":7,"className":4931},[112],[4933],{"type":25,"tag":82,"props":4934,"children":4935},{"__ignoreMap":7},[4936],{"type":31,"value":842},{"type":25,"tag":26,"props":4938,"children":4939},{"id":851},[4940],{"type":31,"value":851},{"type":25,"tag":33,"props":4942,"children":4943},{},[4944],{"type":31,"value":858},{"type":25,"tag":233,"props":4946,"children":4947},{},[4948,4962],{"type":25,"tag":237,"props":4949,"children":4950},{},[4951],{"type":25,"tag":241,"props":4952,"children":4953},{},[4954,4958],{"type":25,"tag":245,"props":4955,"children":4956},{},[4957],{"type":31,"value":872},{"type":25,"tag":245,"props":4959,"children":4960},{},[4961],{"type":31,"value":877},{"type":25,"tag":256,"props":4963,"children":4964},{},[4965,4979,4993,5007,5021],{"type":25,"tag":241,"props":4966,"children":4967},{},[4968,4975],{"type":25,"tag":263,"props":4969,"children":4970},{},[4971],{"type":25,"tag":57,"props":4972,"children":4973},{},[4974],{"type":31,"value":891},{"type":25,"tag":263,"props":4976,"children":4977},{},[4978],{"type":31,"value":896},{"type":25,"tag":241,"props":4980,"children":4981},{},[4982,4989],{"type":25,"tag":263,"props":4983,"children":4984},{},[4985],{"type":25,"tag":57,"props":4986,"children":4987},{},[4988],{"type":31,"value":907},{"type":25,"tag":263,"props":4990,"children":4991},{},[4992],{"type":31,"value":912},{"type":25,"tag":241,"props":4994,"children":4995},{},[4996,5003],{"type":25,"tag":263,"props":4997,"children":4998},{},[4999],{"type":25,"tag":57,"props":5000,"children":5001},{},[5002],{"type":31,"value":923},{"type":25,"tag":263,"props":5004,"children":5005},{},[5006],{"type":31,"value":928},{"type":25,"tag":241,"props":5008,"children":5009},{},[5010,5017],{"type":25,"tag":263,"props":5011,"children":5012},{},[5013],{"type":25,"tag":57,"props":5014,"children":5015},{},[5016],{"type":31,"value":939},{"type":25,"tag":263,"props":5018,"children":5019},{},[5020],{"type":31,"value":944},{"type":25,"tag":241,"props":5022,"children":5023},{},[5024,5031],{"type":25,"tag":263,"props":5025,"children":5026},{},[5027],{"type":25,"tag":57,"props":5028,"children":5029},{},[5030],{"type":31,"value":955},{"type":25,"tag":263,"props":5032,"children":5033},{},[5034],{"type":31,"value":960},{"type":25,"tag":33,"props":5036,"children":5037},{},[5038,5039,5043],{"type":31,"value":965},{"type":25,"tag":57,"props":5040,"children":5041},{},[5042],{"type":31,"value":970},{"type":31,"value":972},{"type":25,"tag":26,"props":5045,"children":5046},{"id":975},[5047],{"type":31,"value":975},{"type":25,"tag":613,"props":5049,"children":5050},{},[5051,5059,5068],{"type":25,"tag":431,"props":5052,"children":5053},{},[5054],{"type":25,"tag":985,"props":5055,"children":5057},{"href":987,"rel":5056},[989],[5058],{"type":31,"value":992},{"type":25,"tag":431,"props":5060,"children":5061},{},[5062,5067],{"type":25,"tag":985,"props":5063,"children":5065},{"href":998,"rel":5064},[989],[5066],{"type":31,"value":1002},{"type":31,"value":1004},{"type":25,"tag":431,"props":5069,"children":5070},{},[5071],{"type":25,"tag":985,"props":5072,"children":5074},{"href":1010,"rel":5073},[989],[5075],{"type":31,"value":1014},{"title":7,"searchDepth":1016,"depth":1016,"links":5077},[5078,5079,5082,5090,5094,5098,5103,5108,5113,5118,5119],{"id":28,"depth":1019,"text":8},{"id":40,"depth":1019,"text":43,"children":5080},[5081],{"id":47,"depth":1016,"text":50},{"id":88,"depth":1019,"text":88,"children":5083},[5084,5085,5086,5087,5088,5089],{"id":98,"depth":1016,"text":101},{"id":120,"depth":1016,"text":123},{"id":140,"depth":1016,"text":143},{"id":159,"depth":1016,"text":162},{"id":179,"depth":1016,"text":182},{"id":199,"depth":1016,"text":202},{"id":219,"depth":1019,"text":219,"children":5091},[5092,5093],{"id":229,"depth":1016,"text":229},{"id":418,"depth":1016,"text":418},{"id":457,"depth":1019,"text":460,"children":5095},[5096,5097],{"id":463,"depth":1016,"text":463},{"id":500,"depth":1016,"text":500},{"id":528,"depth":1019,"text":531,"children":5099},[5100,5101,5102],{"id":534,"depth":1016,"text":534},{"id":581,"depth":1016,"text":581},{"id":595,"depth":1016,"text":595},{"id":643,"depth":1019,"text":643,"children":5104},[5105,5106,5107],{"id":648,"depth":1016,"text":648},{"id":674,"depth":1016,"text":674},{"id":693,"depth":1016,"text":693},{"id":738,"depth":1019,"text":741,"children":5109},[5110,5111,5112],{"id":744,"depth":1016,"text":747},{"id":759,"depth":1016,"text":762},{"id":774,"depth":1016,"text":777},{"id":789,"depth":1019,"text":789,"children":5114},[5115,5116,5117],{"id":794,"depth":1016,"text":797},{"id":813,"depth":1016,"text":816},{"id":837,"depth":1016,"text":837},{"id":851,"depth":1019,"text":851},{"id":975,"depth":1019,"text":975},1778574600376]