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