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