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