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