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