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