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