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