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