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