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