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