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