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