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