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