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