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