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