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