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