[{"data":1,"prerenderedAt":7937},["ShallowReactive",2],{"article-/topics/performance/ecommerce-loading-optimization-case":3,"related-performance":2577,"content-query-29YxKYi20G":5776},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"topic":5,"author":11,"tags":12,"image":17,"featured":18,"readingTime":19,"body":20,"_type":2571,"_id":2572,"_source":2573,"_file":2574,"_stem":2575,"_extension":2576},"/topics/performance/ecommerce-loading-optimization-case","performance",false,"","电商网站秒级加载优化实战 - 从 8 秒到 1.5 秒的完整优化历程","通过一个真实电商网站案例，详细讲解性能优化的完整过程。从问题诊断、瓶颈分析到逐步优化，最终将首屏加载从 8 秒降至 1.5 秒，转化率提升 35%。","2025-12-24","HTMLPAGE 团队",[13,14,15,16],"性能优化","实战案例","首屏加载","Core Web Vitals","/images/topics/performance-case-study.jpg",true,18,{"type":21,"children":22,"toc":2537},"root",[23,31,36,42,48,53,58,63,256,265,270,315,320,325,348,358,363,368,373,378,386,404,412,425,433,451,459,477,482,487,495,500,523,533,541,546,569,577,582,605,613,618,636,644,662,667,672,835,840,846,851,859,864,875,885,893,898,907,916,924,929,940,949,957,962,973,983,1082,1088,1093,1101,1106,1115,1123,1128,1137,1145,1226,1235,1244,1252,1257,1266,1275,1370,1376,1381,1389,1394,1403,1408,1417,1425,1430,1435,1449,1458,1463,1472,1480,1489,1498,1594,1600,1605,1613,1618,1627,1632,1682,1690,1695,1704,1713,1809,1815,1820,1828,1837,1845,1854,1859,1864,1869,2060,2065,2070,2157,2167,2172,2177,2220,2225,2230,2238,2243,2286,2291,2422,2427,2439,2482,2487,2492],{"type":24,"tag":25,"props":26,"children":28},"element","h2",{"id":27},"电商网站秒级加载优化实战",[29],{"type":30,"value":27},"text",{"type":24,"tag":25,"props":32,"children":34},{"id":33},"项目背景",[35],{"type":30,"value":33},{"type":24,"tag":37,"props":38,"children":40},"h3",{"id":39},"客户情况",[41],{"type":30,"value":39},{"type":24,"tag":43,"props":44,"children":45},"p",{},[46],{"type":30,"value":47},"某中型电商网站，日均 PV 约 50 万，主要经营电子数码产品。网站使用 Vue 2 + Nuxt 2 构建，后端为 Node.js + MongoDB 的架构。",{"type":24,"tag":43,"props":49,"children":50},{},[51],{"type":30,"value":52},"2024 年初，客户反馈网站\"越来越慢\"，用户投诉增多，移动端跳出率持续上升。经过初步测试，我们发现问题确实严重。",{"type":24,"tag":37,"props":54,"children":56},{"id":55},"初始状态",[57],{"type":30,"value":55},{"type":24,"tag":43,"props":59,"children":60},{},[61],{"type":30,"value":62},"在优化前，我们对网站进行了全面测试，结果令人担忧：",{"type":24,"tag":64,"props":65,"children":66},"table",{},[67,96],{"type":24,"tag":68,"props":69,"children":70},"thead",{},[71],{"type":24,"tag":72,"props":73,"children":74},"tr",{},[75,81,86,91],{"type":24,"tag":76,"props":77,"children":78},"th",{},[79],{"type":30,"value":80},"指标",{"type":24,"tag":76,"props":82,"children":83},{},[84],{"type":30,"value":85},"测试结果",{"type":24,"tag":76,"props":87,"children":88},{},[89],{"type":30,"value":90},"目标值",{"type":24,"tag":76,"props":92,"children":93},{},[94],{"type":30,"value":95},"状态",{"type":24,"tag":97,"props":98,"children":99},"tbody",{},[100,124,146,168,190,212,234],{"type":24,"tag":72,"props":101,"children":102},{},[103,109,114,119],{"type":24,"tag":104,"props":105,"children":106},"td",{},[107],{"type":30,"value":108},"首屏加载时间 (FCP)",{"type":24,"tag":104,"props":110,"children":111},{},[112],{"type":30,"value":113},"4.2 秒",{"type":24,"tag":104,"props":115,"children":116},{},[117],{"type":30,"value":118},"\u003C 1.8 秒",{"type":24,"tag":104,"props":120,"children":121},{},[122],{"type":30,"value":123},"🔴 严重",{"type":24,"tag":72,"props":125,"children":126},{},[127,132,137,142],{"type":24,"tag":104,"props":128,"children":129},{},[130],{"type":30,"value":131},"最大内容绘制 (LCP)",{"type":24,"tag":104,"props":133,"children":134},{},[135],{"type":30,"value":136},"8.1 秒",{"type":24,"tag":104,"props":138,"children":139},{},[140],{"type":30,"value":141},"\u003C 2.5 秒",{"type":24,"tag":104,"props":143,"children":144},{},[145],{"type":30,"value":123},{"type":24,"tag":72,"props":147,"children":148},{},[149,154,159,164],{"type":24,"tag":104,"props":150,"children":151},{},[152],{"type":30,"value":153},"累积布局偏移 (CLS)",{"type":24,"tag":104,"props":155,"children":156},{},[157],{"type":30,"value":158},"0.35",{"type":24,"tag":104,"props":160,"children":161},{},[162],{"type":30,"value":163},"\u003C 0.1",{"type":24,"tag":104,"props":165,"children":166},{},[167],{"type":30,"value":123},{"type":24,"tag":72,"props":169,"children":170},{},[171,176,181,186],{"type":24,"tag":104,"props":172,"children":173},{},[174],{"type":30,"value":175},"首次输入延迟 (FID)",{"type":24,"tag":104,"props":177,"children":178},{},[179],{"type":30,"value":180},"280ms",{"type":24,"tag":104,"props":182,"children":183},{},[184],{"type":30,"value":185},"\u003C 100ms",{"type":24,"tag":104,"props":187,"children":188},{},[189],{"type":30,"value":123},{"type":24,"tag":72,"props":191,"children":192},{},[193,198,203,208],{"type":24,"tag":104,"props":194,"children":195},{},[196],{"type":30,"value":197},"完全加载时间",{"type":24,"tag":104,"props":199,"children":200},{},[201],{"type":30,"value":202},"12.6 秒",{"type":24,"tag":104,"props":204,"children":205},{},[206],{"type":30,"value":207},"\u003C 5 秒",{"type":24,"tag":104,"props":209,"children":210},{},[211],{"type":30,"value":123},{"type":24,"tag":72,"props":213,"children":214},{},[215,220,225,230],{"type":24,"tag":104,"props":216,"children":217},{},[218],{"type":30,"value":219},"页面总大小",{"type":24,"tag":104,"props":221,"children":222},{},[223],{"type":30,"value":224},"8.2 MB",{"type":24,"tag":104,"props":226,"children":227},{},[228],{"type":30,"value":229},"\u003C 2 MB",{"type":24,"tag":104,"props":231,"children":232},{},[233],{"type":30,"value":123},{"type":24,"tag":72,"props":235,"children":236},{},[237,242,247,252],{"type":24,"tag":104,"props":238,"children":239},{},[240],{"type":30,"value":241},"请求数量",{"type":24,"tag":104,"props":243,"children":244},{},[245],{"type":30,"value":246},"186 个",{"type":24,"tag":104,"props":248,"children":249},{},[250],{"type":30,"value":251},"\u003C 50 个",{"type":24,"tag":104,"props":253,"children":254},{},[255],{"type":30,"value":123},{"type":24,"tag":43,"props":257,"children":258},{},[259],{"type":24,"tag":260,"props":261,"children":262},"strong",{},[263],{"type":30,"value":264},"Lighthouse 评分：Performance 23/100",{"type":24,"tag":43,"props":266,"children":267},{},[268],{"type":30,"value":269},"这些数据意味着什么？",{"type":24,"tag":271,"props":272,"children":273},"ul",{},[274,285,295,305],{"type":24,"tag":275,"props":276,"children":277},"li",{},[278,283],{"type":24,"tag":260,"props":279,"children":280},{},[281],{"type":30,"value":282},"用户体验极差",{"type":30,"value":284},"：8 秒的 LCP 意味着用户要等待 8 秒才能看到主要内容，大多数人会在这之前离开",{"type":24,"tag":275,"props":286,"children":287},{},[288,293],{"type":24,"tag":260,"props":289,"children":290},{},[291],{"type":30,"value":292},"搜索排名受损",{"type":30,"value":294},"：Core Web Vitals 是 Google 排名因素，这样的表现会严重影响 SEO",{"type":24,"tag":275,"props":296,"children":297},{},[298,303],{"type":24,"tag":260,"props":299,"children":300},{},[301],{"type":30,"value":302},"转化率低下",{"type":30,"value":304},"：每增加 1 秒加载时间，转化率下降约 7%",{"type":24,"tag":275,"props":306,"children":307},{},[308,313],{"type":24,"tag":260,"props":309,"children":310},{},[311],{"type":30,"value":312},"服务器压力大",{"type":30,"value":314},"：186 个请求意味着服务器负担重，成本高",{"type":24,"tag":37,"props":316,"children":318},{"id":317},"业务影响",[319],{"type":30,"value":317},{"type":24,"tag":43,"props":321,"children":322},{},[323],{"type":30,"value":324},"通过分析历史数据，我们发现：",{"type":24,"tag":271,"props":326,"children":327},{},[328,333,338,343],{"type":24,"tag":275,"props":329,"children":330},{},[331],{"type":30,"value":332},"过去 6 个月，移动端跳出率从 45% 上升到 68%",{"type":24,"tag":275,"props":334,"children":335},{},[336],{"type":30,"value":337},"购物车放弃率达到 78%",{"type":24,"tag":275,"props":339,"children":340},{},[341],{"type":30,"value":342},"用户平均停留时间下降 40%",{"type":24,"tag":275,"props":344,"children":345},{},[346],{"type":30,"value":347},"自然搜索流量下降 25%",{"type":24,"tag":43,"props":349,"children":350},{},[351,356],{"type":24,"tag":260,"props":352,"children":353},{},[354],{"type":30,"value":355},"估算损失",{"type":30,"value":357},"：以日均 50 万 PV、2% 转化率、客单价 500 元计算，如果能将跳出率降低 10%，每月可增加约 150 万元收入。",{"type":24,"tag":25,"props":359,"children":361},{"id":360},"问题诊断",[362],{"type":30,"value":360},{"type":24,"tag":43,"props":364,"children":365},{},[366],{"type":30,"value":367},"在开始优化前，我们需要找出问题的根源。盲目优化往往事倍功半，正确的诊断是成功的一半。",{"type":24,"tag":37,"props":369,"children":371},{"id":370},"诊断工具与方法",[372],{"type":30,"value":370},{"type":24,"tag":43,"props":374,"children":375},{},[376],{"type":30,"value":377},"我们使用了以下工具进行全面诊断：",{"type":24,"tag":43,"props":379,"children":380},{},[381],{"type":24,"tag":260,"props":382,"children":383},{},[384],{"type":30,"value":385},"1. Chrome DevTools",{"type":24,"tag":271,"props":387,"children":388},{},[389,394,399],{"type":24,"tag":275,"props":390,"children":391},{},[392],{"type":30,"value":393},"Network 面板：分析资源加载瀑布图",{"type":24,"tag":275,"props":395,"children":396},{},[397],{"type":30,"value":398},"Performance 面板：分析运行时性能",{"type":24,"tag":275,"props":400,"children":401},{},[402],{"type":30,"value":403},"Coverage 面板：分析代码利用率",{"type":24,"tag":43,"props":405,"children":406},{},[407],{"type":24,"tag":260,"props":408,"children":409},{},[410],{"type":30,"value":411},"2. Lighthouse",{"type":24,"tag":271,"props":413,"children":414},{},[415,420],{"type":24,"tag":275,"props":416,"children":417},{},[418],{"type":30,"value":419},"自动化性能审计",{"type":24,"tag":275,"props":421,"children":422},{},[423],{"type":30,"value":424},"具体优化建议",{"type":24,"tag":43,"props":426,"children":427},{},[428],{"type":24,"tag":260,"props":429,"children":430},{},[431],{"type":30,"value":432},"3. WebPageTest",{"type":24,"tag":271,"props":434,"children":435},{},[436,441,446],{"type":24,"tag":275,"props":437,"children":438},{},[439],{"type":30,"value":440},"多地点测试",{"type":24,"tag":275,"props":442,"children":443},{},[444],{"type":30,"value":445},"详细的瀑布图分析",{"type":24,"tag":275,"props":447,"children":448},{},[449],{"type":30,"value":450},"视频对比功能",{"type":24,"tag":43,"props":452,"children":453},{},[454],{"type":24,"tag":260,"props":455,"children":456},{},[457],{"type":30,"value":458},"4. Real User Monitoring (RUM)",{"type":24,"tag":271,"props":460,"children":461},{},[462,467,472],{"type":24,"tag":275,"props":463,"children":464},{},[465],{"type":30,"value":466},"真实用户数据",{"type":24,"tag":275,"props":468,"children":469},{},[470],{"type":30,"value":471},"地理分布分析",{"type":24,"tag":275,"props":473,"children":474},{},[475],{"type":30,"value":476},"设备分布分析",{"type":24,"tag":37,"props":478,"children":480},{"id":479},"瓶颈分析",[481],{"type":30,"value":479},{"type":24,"tag":43,"props":483,"children":484},{},[485],{"type":30,"value":486},"经过详细分析，我们发现以下主要问题：",{"type":24,"tag":43,"props":488,"children":489},{},[490],{"type":24,"tag":260,"props":491,"children":492},{},[493],{"type":30,"value":494},"问题一：巨大的 JavaScript Bundle",{"type":24,"tag":43,"props":496,"children":497},{},[498],{"type":30,"value":499},"主 Bundle 大小达到 2.8 MB（未压缩），包含了：",{"type":24,"tag":271,"props":501,"children":502},{},[503,508,513,518],{"type":24,"tag":275,"props":504,"children":505},{},[506],{"type":30,"value":507},"整个 lodash 库（仅使用了 3 个函数）",{"type":24,"tag":275,"props":509,"children":510},{},[511],{"type":30,"value":512},"完整的 moment.js（仅用于日期格式化）",{"type":24,"tag":275,"props":514,"children":515},{},[516],{"type":30,"value":517},"多个未使用的第三方组件库",{"type":24,"tag":275,"props":519,"children":520},{},[521],{"type":30,"value":522},"所有路由组件打包在一起",{"type":24,"tag":524,"props":525,"children":527},"pre",{"code":526},"bundle 分析结果：\n├── vendor.js: 1.8 MB\n│ ├── lodash: 530 KB\n│ ├── moment + locales: 480 KB\n│ ├── element-ui (full): 420 KB\n│ └── echarts (full): 370 KB\n├── app.js: 680 KB\n└── 其他 chunks: 320 KB\n",[528],{"type":24,"tag":529,"props":530,"children":531},"code",{"__ignoreMap":7},[532],{"type":30,"value":526},{"type":24,"tag":43,"props":534,"children":535},{},[536],{"type":24,"tag":260,"props":537,"children":538},{},[539],{"type":30,"value":540},"问题二：未优化的图片资源",{"type":24,"tag":43,"props":542,"children":543},{},[544],{"type":30,"value":545},"首页加载了 45 张产品图片，总计 4.2 MB：",{"type":24,"tag":271,"props":547,"children":548},{},[549,554,559,564],{"type":24,"tag":275,"props":550,"children":551},{},[552],{"type":30,"value":553},"图片格式：全部是 PNG/JPG，没有使用 WebP",{"type":24,"tag":275,"props":555,"children":556},{},[557],{"type":30,"value":558},"图片尺寸：原始尺寸上传，没有根据显示尺寸压缩",{"type":24,"tag":275,"props":560,"children":561},{},[562],{"type":30,"value":563},"加载方式：同时加载所有图片，没有懒加载",{"type":24,"tag":275,"props":565,"children":566},{},[567],{"type":30,"value":568},"CDN 使用：部分图片没有走 CDN",{"type":24,"tag":43,"props":570,"children":571},{},[572],{"type":24,"tag":260,"props":573,"children":574},{},[575],{"type":30,"value":576},"问题三：阻塞渲染的资源",{"type":24,"tag":43,"props":578,"children":579},{},[580],{"type":30,"value":581},"检查发现大量阻塞渲染的资源：",{"type":24,"tag":271,"props":583,"children":584},{},[585,590,595,600],{"type":24,"tag":275,"props":586,"children":587},{},[588],{"type":30,"value":589},"16 个第三方 CSS 文件",{"type":24,"tag":275,"props":591,"children":592},{},[593],{"type":30,"value":594},"8 个同步加载的 JS 文件",{"type":24,"tag":275,"props":596,"children":597},{},[598],{"type":30,"value":599},"多个 Google 字体文件",{"type":24,"tag":275,"props":601,"children":602},{},[603],{"type":30,"value":604},"未优化的图标字体（完整的 Font Awesome）",{"type":24,"tag":43,"props":606,"children":607},{},[608],{"type":24,"tag":260,"props":609,"children":610},{},[611],{"type":30,"value":612},"问题四：服务端性能问题",{"type":24,"tag":43,"props":614,"children":615},{},[616],{"type":30,"value":617},"API 响应时间分析：",{"type":24,"tag":271,"props":619,"children":620},{},[621,626,631],{"type":24,"tag":275,"props":622,"children":623},{},[624],{"type":30,"value":625},"首页数据接口：平均 1.2 秒",{"type":24,"tag":275,"props":627,"children":628},{},[629],{"type":30,"value":630},"产品列表接口：平均 800ms",{"type":24,"tag":275,"props":632,"children":633},{},[634],{"type":30,"value":635},"数据库查询未优化，缺乏索引",{"type":24,"tag":43,"props":637,"children":638},{},[639],{"type":24,"tag":260,"props":640,"children":641},{},[642],{"type":30,"value":643},"问题五：缺乏缓存策略",{"type":24,"tag":271,"props":645,"children":646},{},[647,652,657],{"type":24,"tag":275,"props":648,"children":649},{},[650],{"type":30,"value":651},"静态资源没有设置长期缓存",{"type":24,"tag":275,"props":653,"children":654},{},[655],{"type":30,"value":656},"API 响应没有缓存",{"type":24,"tag":275,"props":658,"children":659},{},[660],{"type":30,"value":661},"服务端渲染没有缓存",{"type":24,"tag":37,"props":663,"children":665},{"id":664},"优先级排序",[666],{"type":30,"value":664},{"type":24,"tag":43,"props":668,"children":669},{},[670],{"type":30,"value":671},"基于影响程度和实施难度，我们制定了优化优先级：",{"type":24,"tag":64,"props":673,"children":674},{},[675,701],{"type":24,"tag":68,"props":676,"children":677},{},[678],{"type":24,"tag":72,"props":679,"children":680},{},[681,686,691,696],{"type":24,"tag":76,"props":682,"children":683},{},[684],{"type":30,"value":685},"优化项",{"type":24,"tag":76,"props":687,"children":688},{},[689],{"type":30,"value":690},"预期收益",{"type":24,"tag":76,"props":692,"children":693},{},[694],{"type":30,"value":695},"实施难度",{"type":24,"tag":76,"props":697,"children":698},{},[699],{"type":30,"value":700},"优先级",{"type":24,"tag":97,"props":702,"children":703},{},[704,727,749,770,792,813],{"type":24,"tag":72,"props":705,"children":706},{},[707,712,717,722],{"type":24,"tag":104,"props":708,"children":709},{},[710],{"type":30,"value":711},"图片优化",{"type":24,"tag":104,"props":713,"children":714},{},[715],{"type":30,"value":716},"减少 3+ MB",{"type":24,"tag":104,"props":718,"children":719},{},[720],{"type":30,"value":721},"低",{"type":24,"tag":104,"props":723,"children":724},{},[725],{"type":30,"value":726},"P0",{"type":24,"tag":72,"props":728,"children":729},{},[730,735,740,745],{"type":24,"tag":104,"props":731,"children":732},{},[733],{"type":30,"value":734},"JS Bundle 拆分",{"type":24,"tag":104,"props":736,"children":737},{},[738],{"type":30,"value":739},"减少首屏 JS 60%",{"type":24,"tag":104,"props":741,"children":742},{},[743],{"type":30,"value":744},"中",{"type":24,"tag":104,"props":746,"children":747},{},[748],{"type":30,"value":726},{"type":24,"tag":72,"props":750,"children":751},{},[752,757,762,766],{"type":24,"tag":104,"props":753,"children":754},{},[755],{"type":30,"value":756},"懒加载实现",{"type":24,"tag":104,"props":758,"children":759},{},[760],{"type":30,"value":761},"减少初始请求 50%",{"type":24,"tag":104,"props":763,"children":764},{},[765],{"type":30,"value":721},{"type":24,"tag":104,"props":767,"children":768},{},[769],{"type":30,"value":726},{"type":24,"tag":72,"props":771,"children":772},{},[773,778,783,787],{"type":24,"tag":104,"props":774,"children":775},{},[776],{"type":30,"value":777},"关键 CSS 提取",{"type":24,"tag":104,"props":779,"children":780},{},[781],{"type":30,"value":782},"FCP 提升 1s+",{"type":24,"tag":104,"props":784,"children":785},{},[786],{"type":30,"value":744},{"type":24,"tag":104,"props":788,"children":789},{},[790],{"type":30,"value":791},"P1",{"type":24,"tag":72,"props":793,"children":794},{},[795,800,805,809],{"type":24,"tag":104,"props":796,"children":797},{},[798],{"type":30,"value":799},"API 优化",{"type":24,"tag":104,"props":801,"children":802},{},[803],{"type":30,"value":804},"响应时间 -50%",{"type":24,"tag":104,"props":806,"children":807},{},[808],{"type":30,"value":744},{"type":24,"tag":104,"props":810,"children":811},{},[812],{"type":30,"value":791},{"type":24,"tag":72,"props":814,"children":815},{},[816,821,826,830],{"type":24,"tag":104,"props":817,"children":818},{},[819],{"type":30,"value":820},"缓存策略",{"type":24,"tag":104,"props":822,"children":823},{},[824],{"type":30,"value":825},"重复访问加速",{"type":24,"tag":104,"props":827,"children":828},{},[829],{"type":30,"value":721},{"type":24,"tag":104,"props":831,"children":832},{},[833],{"type":30,"value":834},"P2",{"type":24,"tag":25,"props":836,"children":838},{"id":837},"优化实施",[839],{"type":30,"value":837},{"type":24,"tag":37,"props":841,"children":843},{"id":842},"第一阶段图片优化效果最显著",[844],{"type":30,"value":845},"第一阶段：图片优化（效果最显著）",{"type":24,"tag":43,"props":847,"children":848},{},[849],{"type":30,"value":850},"图片优化通常是性价比最高的优化方向，我们从这里开始。",{"type":24,"tag":43,"props":852,"children":853},{},[854],{"type":24,"tag":260,"props":855,"children":856},{},[857],{"type":30,"value":858},"步骤 1：图片格式转换",{"type":24,"tag":43,"props":860,"children":861},{},[862],{"type":30,"value":863},"将所有图片转换为 WebP 格式，同时保留 JPG 作为降级方案：",{"type":24,"tag":524,"props":865,"children":870},{"code":866,"language":867,"meta":7,"className":868},"\u003C!-- 使用 picture 元素实现格式回退 -->\n\u003Cpicture>\n \u003Csource srcset=\"/images/product.webp\" type=\"image/webp\">\n \u003Csource srcset=\"/images/product.jpg\" type=\"image/jpeg\">\n \u003Cimg src=\"/images/product.jpg\" alt=\"产品图片\">\n\u003C/picture>\n","html",[869],"language-html",[871],{"type":24,"tag":529,"props":872,"children":873},{"__ignoreMap":7},[874],{"type":30,"value":866},{"type":24,"tag":43,"props":876,"children":877},{},[878,883],{"type":24,"tag":260,"props":879,"children":880},{},[881],{"type":30,"value":882},"效果",{"type":30,"value":884},"：图片体积平均减少 45%",{"type":24,"tag":43,"props":886,"children":887},{},[888],{"type":24,"tag":260,"props":889,"children":890},{},[891],{"type":30,"value":892},"步骤 2：响应式图片",{"type":24,"tag":43,"props":894,"children":895},{},[896],{"type":30,"value":897},"根据设备屏幕提供不同尺寸的图片：",{"type":24,"tag":524,"props":899,"children":902},{"code":900,"language":867,"meta":7,"className":901},"\u003Cimg \n srcset=\"\n /images/product-400.webp 400w,\n /images/product-800.webp 800w,\n /images/product-1200.webp 1200w\n \"\n sizes=\"(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px\"\n src=\"/images/product-800.webp\"\n alt=\"产品图片\"\n>\n",[869],[903],{"type":24,"tag":529,"props":904,"children":905},{"__ignoreMap":7},[906],{"type":30,"value":900},{"type":24,"tag":43,"props":908,"children":909},{},[910,914],{"type":24,"tag":260,"props":911,"children":912},{},[913],{"type":30,"value":882},{"type":30,"value":915},"：移动端图片加载量减少 60%",{"type":24,"tag":43,"props":917,"children":918},{},[919],{"type":24,"tag":260,"props":920,"children":921},{},[922],{"type":30,"value":923},"步骤 3：图片懒加载",{"type":24,"tag":43,"props":925,"children":926},{},[927],{"type":30,"value":928},"只加载视口内的图片，其他图片延迟加载：",{"type":24,"tag":524,"props":930,"children":935},{"code":931,"language":932,"meta":7,"className":933},"// 使用 Intersection Observer 实现懒加载\nconst imageObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target\n img.src = img.dataset.src\n if (img.dataset.srcset) {\n img.srcset = img.dataset.srcset\n }\n imageObserver.unobserve(img)\n }\n })\n}, {\n rootMargin: '200px' // 提前 200px 开始加载\n})\n\ndocument.querySelectorAll('img[data-src]').forEach(img => {\n imageObserver.observe(img)\n})\n","javascript",[934],"language-javascript",[936],{"type":24,"tag":529,"props":937,"children":938},{"__ignoreMap":7},[939],{"type":30,"value":931},{"type":24,"tag":43,"props":941,"children":942},{},[943,947],{"type":24,"tag":260,"props":944,"children":945},{},[946],{"type":30,"value":882},{"type":30,"value":948},"：首屏图片请求从 45 个减少到 8 个",{"type":24,"tag":43,"props":950,"children":951},{},[952],{"type":24,"tag":260,"props":953,"children":954},{},[955],{"type":30,"value":956},"步骤 4：配置 CDN 和缓存",{"type":24,"tag":43,"props":958,"children":959},{},[960],{"type":30,"value":961},"确保所有图片通过 CDN 分发，并设置合理的缓存：",{"type":24,"tag":524,"props":963,"children":968},{"code":964,"language":965,"meta":7,"className":966},"# Nginx 配置\nlocation ~* \\.(jpg|jpeg|png|gif|webp|svg)$ {\n expires 1y;\n add_header Cache-Control \"public, immutable\";\n add_header Vary \"Accept-Encoding\";\n}\n","nginx",[967],"language-nginx",[969],{"type":24,"tag":529,"props":970,"children":971},{"__ignoreMap":7},[972],{"type":30,"value":964},{"type":24,"tag":43,"props":974,"children":975},{},[976,981],{"type":24,"tag":260,"props":977,"children":978},{},[979],{"type":30,"value":980},"图片优化阶段成果",{"type":30,"value":982},"：",{"type":24,"tag":64,"props":984,"children":985},{},[986,1011],{"type":24,"tag":68,"props":987,"children":988},{},[989],{"type":24,"tag":72,"props":990,"children":991},{},[992,996,1001,1006],{"type":24,"tag":76,"props":993,"children":994},{},[995],{"type":30,"value":80},{"type":24,"tag":76,"props":997,"children":998},{},[999],{"type":30,"value":1000},"优化前",{"type":24,"tag":76,"props":1002,"children":1003},{},[1004],{"type":30,"value":1005},"优化后",{"type":24,"tag":76,"props":1007,"children":1008},{},[1009],{"type":30,"value":1010},"改善",{"type":24,"tag":97,"props":1012,"children":1013},{},[1014,1037,1060],{"type":24,"tag":72,"props":1015,"children":1016},{},[1017,1022,1027,1032],{"type":24,"tag":104,"props":1018,"children":1019},{},[1020],{"type":30,"value":1021},"图片总大小",{"type":24,"tag":104,"props":1023,"children":1024},{},[1025],{"type":30,"value":1026},"4.2 MB",{"type":24,"tag":104,"props":1028,"children":1029},{},[1030],{"type":30,"value":1031},"890 KB",{"type":24,"tag":104,"props":1033,"children":1034},{},[1035],{"type":30,"value":1036},"-79%",{"type":24,"tag":72,"props":1038,"children":1039},{},[1040,1045,1050,1055],{"type":24,"tag":104,"props":1041,"children":1042},{},[1043],{"type":30,"value":1044},"首屏图片请求",{"type":24,"tag":104,"props":1046,"children":1047},{},[1048],{"type":30,"value":1049},"45 个",{"type":24,"tag":104,"props":1051,"children":1052},{},[1053],{"type":30,"value":1054},"8 个",{"type":24,"tag":104,"props":1056,"children":1057},{},[1058],{"type":30,"value":1059},"-82%",{"type":24,"tag":72,"props":1061,"children":1062},{},[1063,1068,1072,1077],{"type":24,"tag":104,"props":1064,"children":1065},{},[1066],{"type":30,"value":1067},"LCP",{"type":24,"tag":104,"props":1069,"children":1070},{},[1071],{"type":30,"value":136},{"type":24,"tag":104,"props":1073,"children":1074},{},[1075],{"type":30,"value":1076},"5.2 秒",{"type":24,"tag":104,"props":1078,"children":1079},{},[1080],{"type":30,"value":1081},"-36%",{"type":24,"tag":37,"props":1083,"children":1085},{"id":1084},"第二阶段javascript-优化",[1086],{"type":30,"value":1087},"第二阶段：JavaScript 优化",{"type":24,"tag":43,"props":1089,"children":1090},{},[1091],{"type":30,"value":1092},"JS Bundle 是第二大性能瓶颈，需要系统性优化。",{"type":24,"tag":43,"props":1094,"children":1095},{},[1096],{"type":24,"tag":260,"props":1097,"children":1098},{},[1099],{"type":30,"value":1100},"步骤 1：代码分割",{"type":24,"tag":43,"props":1102,"children":1103},{},[1104],{"type":30,"value":1105},"将单一的大 Bundle 拆分为多个小 chunks：",{"type":24,"tag":524,"props":1107,"children":1110},{"code":1108,"language":932,"meta":7,"className":1109},"// nuxt.config.js - 配置代码分割\nexport default {\n build: {\n optimization: {\n splitChunks: {\n chunks: 'all',\n maxSize: 244 * 1024, // 最大 244KB\n cacheGroups: {\n // 分离 Vue 相关\n vue: {\n test: /[\\\\/]node_modules[\\\\/](vue|vuex|vue-router)[\\\\/]/,\n name: 'vue-vendor',\n priority: 20\n },\n // 分离 UI 组件库\n ui: {\n test: /[\\\\/]node_modules[\\\\/](element-ui)[\\\\/]/,\n name: 'ui-vendor',\n priority: 15\n },\n // 其他第三方库\n vendor: {\n test: /[\\\\/]node_modules[\\\\/]/,\n name: 'vendor',\n priority: 10\n }\n }\n }\n }\n }\n}\n",[934],[1111],{"type":24,"tag":529,"props":1112,"children":1113},{"__ignoreMap":7},[1114],{"type":30,"value":1108},{"type":24,"tag":43,"props":1116,"children":1117},{},[1118],{"type":24,"tag":260,"props":1119,"children":1120},{},[1121],{"type":30,"value":1122},"步骤 2：路由懒加载",{"type":24,"tag":43,"props":1124,"children":1125},{},[1126],{"type":30,"value":1127},"每个路由组件独立打包，按需加载：",{"type":24,"tag":524,"props":1129,"children":1132},{"code":1130,"language":932,"meta":7,"className":1131},"// router/index.js\nconst routes = [\n {\n path: '/',\n component: () => import(/* webpackChunkName: \"home\" */ '@/pages/Home.vue')\n },\n {\n path: '/product/:id',\n component: () => import(/* webpackChunkName: \"product\" */ '@/pages/Product.vue')\n },\n {\n path: '/cart',\n component: () => import(/* webpackChunkName: \"cart\" */ '@/pages/Cart.vue')\n }\n // ...更多路由\n]\n",[934],[1133],{"type":24,"tag":529,"props":1134,"children":1135},{"__ignoreMap":7},[1136],{"type":30,"value":1130},{"type":24,"tag":43,"props":1138,"children":1139},{},[1140],{"type":24,"tag":260,"props":1141,"children":1142},{},[1143],{"type":30,"value":1144},"步骤 3：替换重量级库",{"type":24,"tag":64,"props":1146,"children":1147},{},[1148,1169],{"type":24,"tag":68,"props":1149,"children":1150},{},[1151],{"type":24,"tag":72,"props":1152,"children":1153},{},[1154,1159,1164],{"type":24,"tag":76,"props":1155,"children":1156},{},[1157],{"type":30,"value":1158},"原库",{"type":24,"tag":76,"props":1160,"children":1161},{},[1162],{"type":30,"value":1163},"替代方案",{"type":24,"tag":76,"props":1165,"children":1166},{},[1167],{"type":30,"value":1168},"大小变化",{"type":24,"tag":97,"props":1170,"children":1171},{},[1172,1190,1208],{"type":24,"tag":72,"props":1173,"children":1174},{},[1175,1180,1185],{"type":24,"tag":104,"props":1176,"children":1177},{},[1178],{"type":30,"value":1179},"lodash (全量)",{"type":24,"tag":104,"props":1181,"children":1182},{},[1183],{"type":30,"value":1184},"lodash-es (按需)",{"type":24,"tag":104,"props":1186,"children":1187},{},[1188],{"type":30,"value":1189},"530KB → 12KB",{"type":24,"tag":72,"props":1191,"children":1192},{},[1193,1198,1203],{"type":24,"tag":104,"props":1194,"children":1195},{},[1196],{"type":30,"value":1197},"moment.js",{"type":24,"tag":104,"props":1199,"children":1200},{},[1201],{"type":30,"value":1202},"dayjs",{"type":24,"tag":104,"props":1204,"children":1205},{},[1206],{"type":30,"value":1207},"480KB → 2KB",{"type":24,"tag":72,"props":1209,"children":1210},{},[1211,1216,1221],{"type":24,"tag":104,"props":1212,"children":1213},{},[1214],{"type":30,"value":1215},"element-ui (全量)",{"type":24,"tag":104,"props":1217,"children":1218},{},[1219],{"type":30,"value":1220},"按需引入",{"type":24,"tag":104,"props":1222,"children":1223},{},[1224],{"type":30,"value":1225},"420KB → 85KB",{"type":24,"tag":524,"props":1227,"children":1230},{"code":1228,"language":932,"meta":7,"className":1229},"// 按需引入 Element UI\nimport { Button, Input, Table, Pagination } from 'element-ui'\n\nVue.use(Button)\nVue.use(Input)\nVue.use(Table)\nVue.use(Pagination)\n",[934],[1231],{"type":24,"tag":529,"props":1232,"children":1233},{"__ignoreMap":7},[1234],{"type":30,"value":1228},{"type":24,"tag":524,"props":1236,"children":1239},{"code":1237,"language":932,"meta":7,"className":1238},"// 使用 dayjs 替代 moment\nimport dayjs from 'dayjs'\nimport relativeTime from 'dayjs/plugin/relativeTime'\nimport 'dayjs/locale/zh-cn'\n\ndayjs.extend(relativeTime)\ndayjs.locale('zh-cn')\n",[934],[1240],{"type":24,"tag":529,"props":1241,"children":1242},{"__ignoreMap":7},[1243],{"type":30,"value":1237},{"type":24,"tag":43,"props":1245,"children":1246},{},[1247],{"type":24,"tag":260,"props":1248,"children":1249},{},[1250],{"type":30,"value":1251},"步骤 4：Tree Shaking 优化",{"type":24,"tag":43,"props":1253,"children":1254},{},[1255],{"type":30,"value":1256},"确保 webpack 可以正确进行 Tree Shaking：",{"type":24,"tag":524,"props":1258,"children":1261},{"code":1259,"language":932,"meta":7,"className":1260},"// package.json\n{\n \"sideEffects\": [\n \"*.css\",\n \"*.scss\"\n ]\n}\n\n// babel.config.js\nmodule.exports = {\n presets: [\n ['@babel/preset-env', { \n modules: false // 保持 ES 模块格式，启用 tree shaking\n }]\n ]\n}\n",[934],[1262],{"type":24,"tag":529,"props":1263,"children":1264},{"__ignoreMap":7},[1265],{"type":30,"value":1259},{"type":24,"tag":43,"props":1267,"children":1268},{},[1269,1274],{"type":24,"tag":260,"props":1270,"children":1271},{},[1272],{"type":30,"value":1273},"JavaScript 优化阶段成果",{"type":30,"value":982},{"type":24,"tag":64,"props":1276,"children":1277},{},[1278,1300],{"type":24,"tag":68,"props":1279,"children":1280},{},[1281],{"type":24,"tag":72,"props":1282,"children":1283},{},[1284,1288,1292,1296],{"type":24,"tag":76,"props":1285,"children":1286},{},[1287],{"type":30,"value":80},{"type":24,"tag":76,"props":1289,"children":1290},{},[1291],{"type":30,"value":1000},{"type":24,"tag":76,"props":1293,"children":1294},{},[1295],{"type":30,"value":1005},{"type":24,"tag":76,"props":1297,"children":1298},{},[1299],{"type":30,"value":1010},{"type":24,"tag":97,"props":1301,"children":1302},{},[1303,1326,1348],{"type":24,"tag":72,"props":1304,"children":1305},{},[1306,1311,1316,1321],{"type":24,"tag":104,"props":1307,"children":1308},{},[1309],{"type":30,"value":1310},"JS 总大小",{"type":24,"tag":104,"props":1312,"children":1313},{},[1314],{"type":30,"value":1315},"2.8 MB",{"type":24,"tag":104,"props":1317,"children":1318},{},[1319],{"type":30,"value":1320},"680 KB",{"type":24,"tag":104,"props":1322,"children":1323},{},[1324],{"type":30,"value":1325},"-76%",{"type":24,"tag":72,"props":1327,"children":1328},{},[1329,1334,1338,1343],{"type":24,"tag":104,"props":1330,"children":1331},{},[1332],{"type":30,"value":1333},"首屏 JS",{"type":24,"tag":104,"props":1335,"children":1336},{},[1337],{"type":30,"value":1315},{"type":24,"tag":104,"props":1339,"children":1340},{},[1341],{"type":30,"value":1342},"180 KB",{"type":24,"tag":104,"props":1344,"children":1345},{},[1346],{"type":30,"value":1347},"-94%",{"type":24,"tag":72,"props":1349,"children":1350},{},[1351,1356,1361,1366],{"type":24,"tag":104,"props":1352,"children":1353},{},[1354],{"type":30,"value":1355},"解析时间",{"type":24,"tag":104,"props":1357,"children":1358},{},[1359],{"type":30,"value":1360},"1.8 秒",{"type":24,"tag":104,"props":1362,"children":1363},{},[1364],{"type":30,"value":1365},"320ms",{"type":24,"tag":104,"props":1367,"children":1368},{},[1369],{"type":30,"value":1059},{"type":24,"tag":37,"props":1371,"children":1373},{"id":1372},"第三阶段关键渲染路径优化",[1374],{"type":30,"value":1375},"第三阶段：关键渲染路径优化",{"type":24,"tag":43,"props":1377,"children":1378},{},[1379],{"type":30,"value":1380},"消除阻塞渲染的资源，让页面更快地开始渲染。",{"type":24,"tag":43,"props":1382,"children":1383},{},[1384],{"type":24,"tag":260,"props":1385,"children":1386},{},[1387],{"type":30,"value":1388},"步骤 1：关键 CSS 内联",{"type":24,"tag":43,"props":1390,"children":1391},{},[1392],{"type":30,"value":1393},"提取首屏需要的关键 CSS，内联到 HTML 中：",{"type":24,"tag":524,"props":1395,"children":1398},{"code":1396,"language":932,"meta":7,"className":1397},"// nuxt.config.js - 使用 critters 提取关键 CSS\nexport default {\n buildModules: [\n ['@nuxtjs/critters', {\n preload: 'swap',\n fonts: true\n }]\n ]\n}\n",[934],[1399],{"type":24,"tag":529,"props":1400,"children":1401},{"__ignoreMap":7},[1402],{"type":30,"value":1396},{"type":24,"tag":43,"props":1404,"children":1405},{},[1406],{"type":30,"value":1407},"结果示例：",{"type":24,"tag":524,"props":1409,"children":1412},{"code":1410,"language":867,"meta":7,"className":1411},"\u003Chead>\n \u003C!-- 关键 CSS 内联 -->\n \u003Cstyle>\n /* 首屏关键样式 */\n .header { /* ... */ }\n .hero { /* ... */ }\n .product-grid { /* ... */ }\n \u003C/style>\n \n \u003C!-- 非关键 CSS 异步加载 -->\n \u003Clink rel=\"preload\" href=\"/css/full.css\" as=\"style\" onload=\"this.onload=null;this.rel='stylesheet'\">\n \u003Cnoscript>\u003Clink rel=\"stylesheet\" href=\"/css/full.css\">\u003C/noscript>\n\u003C/head>\n",[869],[1413],{"type":24,"tag":529,"props":1414,"children":1415},{"__ignoreMap":7},[1416],{"type":30,"value":1410},{"type":24,"tag":43,"props":1418,"children":1419},{},[1420],{"type":24,"tag":260,"props":1421,"children":1422},{},[1423],{"type":30,"value":1424},"步骤 2：字体优化",{"type":24,"tag":43,"props":1426,"children":1427},{},[1428],{"type":30,"value":1429},"问题：完整的 Font Awesome（1.2 MB）只用了 20 个图标",{"type":24,"tag":43,"props":1431,"children":1432},{},[1433],{"type":30,"value":1434},"解决方案：",{"type":24,"tag":1436,"props":1437,"children":1438},"ol",{},[1439,1444],{"type":24,"tag":275,"props":1440,"children":1441},{},[1442],{"type":30,"value":1443},"使用 SVG 图标替代图标字体",{"type":24,"tag":275,"props":1445,"children":1446},{},[1447],{"type":30,"value":1448},"或使用 Font Awesome 的子集化工具",{"type":24,"tag":524,"props":1450,"children":1453},{"code":1451,"language":932,"meta":7,"className":1452},"// 使用 SVG 图标组件\n// components/icons/CartIcon.vue\n\u003Ctemplate>\n \u003Csvg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n \u003Cpath d=\"M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2z...\"/>\n \u003C/svg>\n\u003C/template>\n",[934],[1454],{"type":24,"tag":529,"props":1455,"children":1456},{"__ignoreMap":7},[1457],{"type":30,"value":1451},{"type":24,"tag":43,"props":1459,"children":1460},{},[1461],{"type":30,"value":1462},"对于必须使用的 Web 字体：",{"type":24,"tag":524,"props":1464,"children":1467},{"code":1465,"language":867,"meta":7,"className":1466},"\u003C!-- 预加载关键字体 -->\n\u003Clink rel=\"preload\" href=\"/fonts/main.woff2\" as=\"font\" type=\"font/woff2\" crossorigin>\n\n\u003C!-- 使用 font-display: swap -->\n\u003Cstyle>\n @font-face {\n font-family: 'MainFont';\n src: url('/fonts/main.woff2') format('woff2');\n font-display: swap;\n }\n\u003C/style>\n",[869],[1468],{"type":24,"tag":529,"props":1469,"children":1470},{"__ignoreMap":7},[1471],{"type":30,"value":1465},{"type":24,"tag":43,"props":1473,"children":1474},{},[1475],{"type":24,"tag":260,"props":1476,"children":1477},{},[1478],{"type":30,"value":1479},"步骤 3：预连接关键资源",{"type":24,"tag":524,"props":1481,"children":1484},{"code":1482,"language":867,"meta":7,"className":1483},"\u003Chead>\n \u003C!-- 预连接到 CDN -->\n \u003Clink rel=\"preconnect\" href=\"https://cdn.example.com\">\n \n \u003C!-- 预连接到 API 服务器 -->\n \u003Clink rel=\"preconnect\" href=\"https://api.example.com\">\n \n \u003C!-- DNS 预解析 -->\n \u003Clink rel=\"dns-prefetch\" href=\"https://analytics.google.com\">\n\u003C/head>\n",[869],[1485],{"type":24,"tag":529,"props":1486,"children":1487},{"__ignoreMap":7},[1488],{"type":30,"value":1482},{"type":24,"tag":43,"props":1490,"children":1491},{},[1492,1497],{"type":24,"tag":260,"props":1493,"children":1494},{},[1495],{"type":30,"value":1496},"关键渲染路径优化成果",{"type":30,"value":982},{"type":24,"tag":64,"props":1499,"children":1500},{},[1501,1523],{"type":24,"tag":68,"props":1502,"children":1503},{},[1504],{"type":24,"tag":72,"props":1505,"children":1506},{},[1507,1511,1515,1519],{"type":24,"tag":76,"props":1508,"children":1509},{},[1510],{"type":30,"value":80},{"type":24,"tag":76,"props":1512,"children":1513},{},[1514],{"type":30,"value":1000},{"type":24,"tag":76,"props":1516,"children":1517},{},[1518],{"type":30,"value":1005},{"type":24,"tag":76,"props":1520,"children":1521},{},[1522],{"type":30,"value":1010},{"type":24,"tag":97,"props":1524,"children":1525},{},[1526,1548,1571],{"type":24,"tag":72,"props":1527,"children":1528},{},[1529,1534,1538,1543],{"type":24,"tag":104,"props":1530,"children":1531},{},[1532],{"type":30,"value":1533},"FCP",{"type":24,"tag":104,"props":1535,"children":1536},{},[1537],{"type":30,"value":113},{"type":24,"tag":104,"props":1539,"children":1540},{},[1541],{"type":30,"value":1542},"1.2 秒",{"type":24,"tag":104,"props":1544,"children":1545},{},[1546],{"type":30,"value":1547},"-71%",{"type":24,"tag":72,"props":1549,"children":1550},{},[1551,1556,1561,1566],{"type":24,"tag":104,"props":1552,"children":1553},{},[1554],{"type":30,"value":1555},"渲染阻塞资源",{"type":24,"tag":104,"props":1557,"children":1558},{},[1559],{"type":30,"value":1560},"24 个",{"type":24,"tag":104,"props":1562,"children":1563},{},[1564],{"type":30,"value":1565},"3 个",{"type":24,"tag":104,"props":1567,"children":1568},{},[1569],{"type":30,"value":1570},"-87%",{"type":24,"tag":72,"props":1572,"children":1573},{},[1574,1579,1584,1589],{"type":24,"tag":104,"props":1575,"children":1576},{},[1577],{"type":30,"value":1578},"关键 CSS 大小",{"type":24,"tag":104,"props":1580,"children":1581},{},[1582],{"type":30,"value":1583},"420 KB",{"type":24,"tag":104,"props":1585,"children":1586},{},[1587],{"type":30,"value":1588},"15 KB",{"type":24,"tag":104,"props":1590,"children":1591},{},[1592],{"type":30,"value":1593},"-96%",{"type":24,"tag":37,"props":1595,"children":1597},{"id":1596},"第四阶段服务端优化",[1598],{"type":30,"value":1599},"第四阶段：服务端优化",{"type":24,"tag":43,"props":1601,"children":1602},{},[1603],{"type":30,"value":1604},"前端优化接近极限后，需要关注服务端性能。",{"type":24,"tag":43,"props":1606,"children":1607},{},[1608],{"type":24,"tag":260,"props":1609,"children":1610},{},[1611],{"type":30,"value":1612},"步骤 1：API 响应优化",{"type":24,"tag":43,"props":1614,"children":1615},{},[1616],{"type":30,"value":1617},"首页数据接口从 1.2 秒降到 200ms：",{"type":24,"tag":524,"props":1619,"children":1622},{"code":1620,"language":932,"meta":7,"className":1621},"// 优化前：多次数据库查询\nasync function getHomeData() {\n const banners = await Banner.find() // 200ms\n const categories = await Category.find() // 150ms\n const hotProducts = await Product.find({ hot: true }).limit(10) // 400ms\n const newProducts = await Product.find().sort({ createdAt: -1 }).limit(10) // 450ms\n \n return { banners, categories, hotProducts, newProducts }\n}\n\n// 优化后：并行查询 + 索引 + 缓存\nasync function getHomeData() {\n // 尝试从缓存获取\n const cached = await redis.get('home:data')\n if (cached) return JSON.parse(cached)\n \n // 并行执行查询\n const [banners, categories, hotProducts, newProducts] = await Promise.all([\n Banner.find().lean(),\n Category.find().lean(),\n Product.find({ hot: true }).select('name price image').limit(10).lean(),\n Product.find().select('name price image').sort({ createdAt: -1 }).limit(10).lean()\n ])\n \n const data = { banners, categories, hotProducts, newProducts }\n \n // 缓存 5 分钟\n await redis.setex('home:data', 300, JSON.stringify(data))\n \n return data\n}\n",[934],[1623],{"type":24,"tag":529,"props":1624,"children":1625},{"__ignoreMap":7},[1626],{"type":30,"value":1620},{"type":24,"tag":43,"props":1628,"children":1629},{},[1630],{"type":30,"value":1631},"关键优化点：",{"type":24,"tag":271,"props":1633,"children":1634},{},[1635,1648,1653,1665,1677],{"type":24,"tag":275,"props":1636,"children":1637},{},[1638,1640,1646],{"type":30,"value":1639},"使用 ",{"type":24,"tag":529,"props":1641,"children":1643},{"className":1642},[],[1644],{"type":30,"value":1645},"Promise.all",{"type":30,"value":1647}," 并行查询",{"type":24,"tag":275,"props":1649,"children":1650},{},[1651],{"type":30,"value":1652},"添加数据库索引",{"type":24,"tag":275,"props":1654,"children":1655},{},[1656,1657,1663],{"type":30,"value":1639},{"type":24,"tag":529,"props":1658,"children":1660},{"className":1659},[],[1661],{"type":30,"value":1662},"select",{"type":30,"value":1664}," 只查询需要的字段",{"type":24,"tag":275,"props":1666,"children":1667},{},[1668,1669,1675],{"type":30,"value":1639},{"type":24,"tag":529,"props":1670,"children":1672},{"className":1671},[],[1673],{"type":30,"value":1674},"lean()",{"type":30,"value":1676}," 返回纯 JSON，减少内存占用",{"type":24,"tag":275,"props":1678,"children":1679},{},[1680],{"type":30,"value":1681},"添加 Redis 缓存",{"type":24,"tag":43,"props":1683,"children":1684},{},[1685],{"type":24,"tag":260,"props":1686,"children":1687},{},[1688],{"type":30,"value":1689},"步骤 2：服务端渲染缓存",{"type":24,"tag":43,"props":1691,"children":1692},{},[1693],{"type":30,"value":1694},"对于不经常变化的页面，缓存 SSR 结果：",{"type":24,"tag":524,"props":1696,"children":1699},{"code":1697,"language":932,"meta":7,"className":1698},"// server/middleware/cache.js\nconst LRU = require('lru-cache')\n\nconst pageCache = new LRU({\n max: 100,\n maxAge: 1000 * 60 * 5 // 5 分钟\n})\n\nexport default function (req, res, next) {\n const cacheable = ['/'].includes(req.url)\n \n if (!cacheable) return next()\n \n const cached = pageCache.get(req.url)\n if (cached) {\n return res.send(cached)\n }\n \n // 修改 res.send 以捕获响应\n const originalSend = res.send.bind(res)\n res.send = (body) => {\n pageCache.set(req.url, body)\n originalSend(body)\n }\n \n next()\n}\n",[934],[1700],{"type":24,"tag":529,"props":1701,"children":1702},{"__ignoreMap":7},[1703],{"type":30,"value":1697},{"type":24,"tag":43,"props":1705,"children":1706},{},[1707,1712],{"type":24,"tag":260,"props":1708,"children":1709},{},[1710],{"type":30,"value":1711},"服务端优化成果",{"type":30,"value":982},{"type":24,"tag":64,"props":1714,"children":1715},{},[1716,1738],{"type":24,"tag":68,"props":1717,"children":1718},{},[1719],{"type":24,"tag":72,"props":1720,"children":1721},{},[1722,1726,1730,1734],{"type":24,"tag":76,"props":1723,"children":1724},{},[1725],{"type":30,"value":80},{"type":24,"tag":76,"props":1727,"children":1728},{},[1729],{"type":30,"value":1000},{"type":24,"tag":76,"props":1731,"children":1732},{},[1733],{"type":30,"value":1005},{"type":24,"tag":76,"props":1735,"children":1736},{},[1737],{"type":30,"value":1010},{"type":24,"tag":97,"props":1739,"children":1740},{},[1741,1763,1786],{"type":24,"tag":72,"props":1742,"children":1743},{},[1744,1749,1753,1758],{"type":24,"tag":104,"props":1745,"children":1746},{},[1747],{"type":30,"value":1748},"首页 API 响应",{"type":24,"tag":104,"props":1750,"children":1751},{},[1752],{"type":30,"value":1542},{"type":24,"tag":104,"props":1754,"children":1755},{},[1756],{"type":30,"value":1757},"200ms",{"type":24,"tag":104,"props":1759,"children":1760},{},[1761],{"type":30,"value":1762},"-83%",{"type":24,"tag":72,"props":1764,"children":1765},{},[1766,1771,1776,1781],{"type":24,"tag":104,"props":1767,"children":1768},{},[1769],{"type":30,"value":1770},"SSR 时间",{"type":24,"tag":104,"props":1772,"children":1773},{},[1774],{"type":30,"value":1775},"800ms",{"type":24,"tag":104,"props":1777,"children":1778},{},[1779],{"type":30,"value":1780},"150ms",{"type":24,"tag":104,"props":1782,"children":1783},{},[1784],{"type":30,"value":1785},"-81%",{"type":24,"tag":72,"props":1787,"children":1788},{},[1789,1794,1799,1804],{"type":24,"tag":104,"props":1790,"children":1791},{},[1792],{"type":30,"value":1793},"服务器 CPU 使用率",{"type":24,"tag":104,"props":1795,"children":1796},{},[1797],{"type":30,"value":1798},"75%",{"type":24,"tag":104,"props":1800,"children":1801},{},[1802],{"type":30,"value":1803},"35%",{"type":24,"tag":104,"props":1805,"children":1806},{},[1807],{"type":30,"value":1808},"-53%",{"type":24,"tag":37,"props":1810,"children":1812},{"id":1811},"第五阶段缓存策略完善",[1813],{"type":30,"value":1814},"第五阶段：缓存策略完善",{"type":24,"tag":43,"props":1816,"children":1817},{},[1818],{"type":30,"value":1819},"让重复访问的用户获得更好的体验。",{"type":24,"tag":43,"props":1821,"children":1822},{},[1823],{"type":24,"tag":260,"props":1824,"children":1825},{},[1826],{"type":30,"value":1827},"HTTP 缓存配置",{"type":24,"tag":524,"props":1829,"children":1832},{"code":1830,"language":965,"meta":7,"className":1831},"# 静态资源长期缓存\nlocation ~* \\.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {\n expires 1y;\n add_header Cache-Control \"public, immutable\";\n}\n\n# HTML 文件短期缓存\nlocation ~* \\.html$ {\n expires 1h;\n add_header Cache-Control \"public, must-revalidate\";\n}\n\n# API 响应缓存\nlocation /api/ {\n add_header Cache-Control \"private, max-age=60\";\n}\n",[967],[1833],{"type":24,"tag":529,"props":1834,"children":1835},{"__ignoreMap":7},[1836],{"type":30,"value":1830},{"type":24,"tag":43,"props":1838,"children":1839},{},[1840],{"type":24,"tag":260,"props":1841,"children":1842},{},[1843],{"type":30,"value":1844},"Service Worker 缓存",{"type":24,"tag":524,"props":1846,"children":1849},{"code":1847,"language":932,"meta":7,"className":1848},"// service-worker.js\nconst CACHE_NAME = 'ecommerce-v1'\nconst STATIC_ASSETS = [\n '/',\n '/css/critical.css',\n '/js/app.js',\n '/images/logo.svg'\n]\n\n// 安装时缓存静态资源\nself.addEventListener('install', event => {\n event.waitUntil(\n caches.open(CACHE_NAME)\n .then(cache => cache.addAll(STATIC_ASSETS))\n )\n})\n\n// 请求时优先使用缓存\nself.addEventListener('fetch', event => {\n event.respondWith(\n caches.match(event.request)\n .then(response => response || fetch(event.request))\n )\n})\n",[934],[1850],{"type":24,"tag":529,"props":1851,"children":1852},{"__ignoreMap":7},[1853],{"type":30,"value":1847},{"type":24,"tag":25,"props":1855,"children":1857},{"id":1856},"最终成果",[1858],{"type":30,"value":1856},{"type":24,"tag":43,"props":1860,"children":1861},{},[1862],{"type":30,"value":1863},"经过 6 周的优化，网站性能有了质的飞跃：",{"type":24,"tag":37,"props":1865,"children":1867},{"id":1866},"性能指标对比",[1868],{"type":30,"value":1866},{"type":24,"tag":64,"props":1870,"children":1871},{},[1872,1895],{"type":24,"tag":68,"props":1873,"children":1874},{},[1875],{"type":24,"tag":72,"props":1876,"children":1877},{},[1878,1882,1886,1890],{"type":24,"tag":76,"props":1879,"children":1880},{},[1881],{"type":30,"value":80},{"type":24,"tag":76,"props":1883,"children":1884},{},[1885],{"type":30,"value":1000},{"type":24,"tag":76,"props":1887,"children":1888},{},[1889],{"type":30,"value":1005},{"type":24,"tag":76,"props":1891,"children":1892},{},[1893],{"type":30,"value":1894},"改善幅度",{"type":24,"tag":97,"props":1896,"children":1897},{},[1898,1918,1938,1960,1982,2004,2025],{"type":24,"tag":72,"props":1899,"children":1900},{},[1901,1905,1909,1914],{"type":24,"tag":104,"props":1902,"children":1903},{},[1904],{"type":30,"value":1067},{"type":24,"tag":104,"props":1906,"children":1907},{},[1908],{"type":30,"value":136},{"type":24,"tag":104,"props":1910,"children":1911},{},[1912],{"type":30,"value":1913},"1.4 秒",{"type":24,"tag":104,"props":1915,"children":1916},{},[1917],{"type":30,"value":1762},{"type":24,"tag":72,"props":1919,"children":1920},{},[1921,1925,1929,1934],{"type":24,"tag":104,"props":1922,"children":1923},{},[1924],{"type":30,"value":1533},{"type":24,"tag":104,"props":1926,"children":1927},{},[1928],{"type":30,"value":113},{"type":24,"tag":104,"props":1930,"children":1931},{},[1932],{"type":30,"value":1933},"0.9 秒",{"type":24,"tag":104,"props":1935,"children":1936},{},[1937],{"type":30,"value":1036},{"type":24,"tag":72,"props":1939,"children":1940},{},[1941,1946,1950,1955],{"type":24,"tag":104,"props":1942,"children":1943},{},[1944],{"type":30,"value":1945},"CLS",{"type":24,"tag":104,"props":1947,"children":1948},{},[1949],{"type":30,"value":158},{"type":24,"tag":104,"props":1951,"children":1952},{},[1953],{"type":30,"value":1954},"0.05",{"type":24,"tag":104,"props":1956,"children":1957},{},[1958],{"type":30,"value":1959},"-86%",{"type":24,"tag":72,"props":1961,"children":1962},{},[1963,1968,1972,1977],{"type":24,"tag":104,"props":1964,"children":1965},{},[1966],{"type":30,"value":1967},"FID",{"type":24,"tag":104,"props":1969,"children":1970},{},[1971],{"type":30,"value":180},{"type":24,"tag":104,"props":1973,"children":1974},{},[1975],{"type":30,"value":1976},"45ms",{"type":24,"tag":104,"props":1978,"children":1979},{},[1980],{"type":30,"value":1981},"-84%",{"type":24,"tag":72,"props":1983,"children":1984},{},[1985,1990,1994,1999],{"type":24,"tag":104,"props":1986,"children":1987},{},[1988],{"type":30,"value":1989},"页面大小",{"type":24,"tag":104,"props":1991,"children":1992},{},[1993],{"type":30,"value":224},{"type":24,"tag":104,"props":1995,"children":1996},{},[1997],{"type":30,"value":1998},"1.2 MB",{"type":24,"tag":104,"props":2000,"children":2001},{},[2002],{"type":30,"value":2003},"-85%",{"type":24,"tag":72,"props":2005,"children":2006},{},[2007,2011,2015,2020],{"type":24,"tag":104,"props":2008,"children":2009},{},[2010],{"type":30,"value":241},{"type":24,"tag":104,"props":2012,"children":2013},{},[2014],{"type":30,"value":246},{"type":24,"tag":104,"props":2016,"children":2017},{},[2018],{"type":30,"value":2019},"38 个",{"type":24,"tag":104,"props":2021,"children":2022},{},[2023],{"type":30,"value":2024},"-80%",{"type":24,"tag":72,"props":2026,"children":2027},{},[2028,2036,2044,2052],{"type":24,"tag":104,"props":2029,"children":2030},{},[2031],{"type":24,"tag":260,"props":2032,"children":2033},{},[2034],{"type":30,"value":2035},"Lighthouse 分数",{"type":24,"tag":104,"props":2037,"children":2038},{},[2039],{"type":24,"tag":260,"props":2040,"children":2041},{},[2042],{"type":30,"value":2043},"23",{"type":24,"tag":104,"props":2045,"children":2046},{},[2047],{"type":24,"tag":260,"props":2048,"children":2049},{},[2050],{"type":30,"value":2051},"92",{"type":24,"tag":104,"props":2053,"children":2054},{},[2055],{"type":24,"tag":260,"props":2056,"children":2057},{},[2058],{"type":30,"value":2059},"+300%",{"type":24,"tag":37,"props":2061,"children":2063},{"id":2062},"业务指标提升",[2064],{"type":30,"value":2062},{"type":24,"tag":43,"props":2066,"children":2067},{},[2068],{"type":30,"value":2069},"优化上线后一个月的数据变化：",{"type":24,"tag":64,"props":2071,"children":2072},{},[2073,2089],{"type":24,"tag":68,"props":2074,"children":2075},{},[2076],{"type":24,"tag":72,"props":2077,"children":2078},{},[2079,2084],{"type":24,"tag":76,"props":2080,"children":2081},{},[2082],{"type":30,"value":2083},"业务指标",{"type":24,"tag":76,"props":2085,"children":2086},{},[2087],{"type":30,"value":2088},"变化",{"type":24,"tag":97,"props":2090,"children":2091},{},[2092,2105,2118,2131,2144],{"type":24,"tag":72,"props":2093,"children":2094},{},[2095,2100],{"type":24,"tag":104,"props":2096,"children":2097},{},[2098],{"type":30,"value":2099},"移动端跳出率",{"type":24,"tag":104,"props":2101,"children":2102},{},[2103],{"type":30,"value":2104},"从 68% 降至 42% (-38%)",{"type":24,"tag":72,"props":2106,"children":2107},{},[2108,2113],{"type":24,"tag":104,"props":2109,"children":2110},{},[2111],{"type":30,"value":2112},"页面停留时间",{"type":24,"tag":104,"props":2114,"children":2115},{},[2116],{"type":30,"value":2117},"增加 65%",{"type":24,"tag":72,"props":2119,"children":2120},{},[2121,2126],{"type":24,"tag":104,"props":2122,"children":2123},{},[2124],{"type":30,"value":2125},"购物车转化率",{"type":24,"tag":104,"props":2127,"children":2128},{},[2129],{"type":30,"value":2130},"提升 35%",{"type":24,"tag":72,"props":2132,"children":2133},{},[2134,2139],{"type":24,"tag":104,"props":2135,"children":2136},{},[2137],{"type":30,"value":2138},"自然搜索流量",{"type":24,"tag":104,"props":2140,"children":2141},{},[2142],{"type":30,"value":2143},"增加 28%",{"type":24,"tag":72,"props":2145,"children":2146},{},[2147,2152],{"type":24,"tag":104,"props":2148,"children":2149},{},[2150],{"type":30,"value":2151},"服务器成本",{"type":24,"tag":104,"props":2153,"children":2154},{},[2155],{"type":30,"value":2156},"降低 40%",{"type":24,"tag":43,"props":2158,"children":2159},{},[2160,2165],{"type":24,"tag":260,"props":2161,"children":2162},{},[2163],{"type":30,"value":2164},"投资回报",{"type":30,"value":2166},"：优化项目投入约 15 万元，上线后第一个月带来的额外收入超过 200 万元。",{"type":24,"tag":25,"props":2168,"children":2170},{"id":2169},"经验总结",[2171],{"type":30,"value":2169},{"type":24,"tag":37,"props":2173,"children":2175},{"id":2174},"优化原则",[2176],{"type":30,"value":2174},{"type":24,"tag":1436,"props":2178,"children":2179},{},[2180,2190,2200,2210],{"type":24,"tag":275,"props":2181,"children":2182},{},[2183,2188],{"type":24,"tag":260,"props":2184,"children":2185},{},[2186],{"type":30,"value":2187},"测量先于优化",{"type":30,"value":2189},"：不要凭感觉优化，用数据说话",{"type":24,"tag":275,"props":2191,"children":2192},{},[2193,2198],{"type":24,"tag":260,"props":2194,"children":2195},{},[2196],{"type":30,"value":2197},"关注关键路径",{"type":30,"value":2199},"：80% 的效果来自 20% 的优化",{"type":24,"tag":275,"props":2201,"children":2202},{},[2203,2208],{"type":24,"tag":260,"props":2204,"children":2205},{},[2206],{"type":30,"value":2207},"渐进式改进",{"type":30,"value":2209},"：分阶段实施，每阶段验证效果",{"type":24,"tag":275,"props":2211,"children":2212},{},[2213,2218],{"type":24,"tag":260,"props":2214,"children":2215},{},[2216],{"type":30,"value":2217},"监控持续化",{"type":30,"value":2219},"：建立性能监控，防止回退",{"type":24,"tag":37,"props":2221,"children":2223},{"id":2222},"优化优先级建议",[2224],{"type":30,"value":2222},{"type":24,"tag":43,"props":2226,"children":2227},{},[2228],{"type":30,"value":2229},"基于本次项目经验，推荐以下优化顺序：",{"type":24,"tag":524,"props":2231,"children":2233},{"code":2232},"第一优先级（投入小，收益大）\n├── 图片格式优化（WebP）\n├── 图片懒加载\n├── 关键 CSS 内联\n└── 资源压缩（Gzip/Brotli）\n\n第二优先级（投入中，收益大）\n├── 代码分割\n├── 路由懒加载\n├── 第三方库优化\n└── 缓存策略\n\n第三优先级（投入大，收益中）\n├── 服务端渲染优化\n├── 数据库优化\n├── CDN 部署\n└── Service Worker\n",[2234],{"type":24,"tag":529,"props":2235,"children":2236},{"__ignoreMap":7},[2237],{"type":30,"value":2232},{"type":24,"tag":37,"props":2239,"children":2241},{"id":2240},"常见陷阱",[2242],{"type":30,"value":2240},{"type":24,"tag":1436,"props":2244,"children":2245},{},[2246,2256,2266,2276],{"type":24,"tag":275,"props":2247,"children":2248},{},[2249,2254],{"type":24,"tag":260,"props":2250,"children":2251},{},[2252],{"type":30,"value":2253},"过度优化",{"type":30,"value":2255},"：追求极致分数而忽略开发效率",{"type":24,"tag":275,"props":2257,"children":2258},{},[2259,2264],{"type":24,"tag":260,"props":2260,"children":2261},{},[2262],{"type":30,"value":2263},"忽视真实用户",{"type":30,"value":2265},"：实验室数据好但真实用户体验差",{"type":24,"tag":275,"props":2267,"children":2268},{},[2269,2274],{"type":24,"tag":260,"props":2270,"children":2271},{},[2272],{"type":30,"value":2273},"一劳永逸",{"type":30,"value":2275},"：优化后不再监控，性能逐渐回退",{"type":24,"tag":275,"props":2277,"children":2278},{},[2279,2284],{"type":24,"tag":260,"props":2280,"children":2281},{},[2282],{"type":30,"value":2283},"只关注技术",{"type":30,"value":2285},"：忽略业务场景的特殊需求",{"type":24,"tag":25,"props":2287,"children":2289},{"id":2288},"工具推荐",[2290],{"type":30,"value":2288},{"type":24,"tag":64,"props":2292,"children":2293},{},[2294,2315],{"type":24,"tag":68,"props":2295,"children":2296},{},[2297],{"type":24,"tag":72,"props":2298,"children":2299},{},[2300,2305,2310],{"type":24,"tag":76,"props":2301,"children":2302},{},[2303],{"type":30,"value":2304},"工具",{"type":24,"tag":76,"props":2306,"children":2307},{},[2308],{"type":30,"value":2309},"用途",{"type":24,"tag":76,"props":2311,"children":2312},{},[2313],{"type":30,"value":2314},"推荐度",{"type":24,"tag":97,"props":2316,"children":2317},{},[2318,2336,2353,2370,2388,2405],{"type":24,"tag":72,"props":2319,"children":2320},{},[2321,2326,2331],{"type":24,"tag":104,"props":2322,"children":2323},{},[2324],{"type":30,"value":2325},"Lighthouse",{"type":24,"tag":104,"props":2327,"children":2328},{},[2329],{"type":30,"value":2330},"综合性能审计",{"type":24,"tag":104,"props":2332,"children":2333},{},[2334],{"type":30,"value":2335},"⭐⭐⭐⭐⭐",{"type":24,"tag":72,"props":2337,"children":2338},{},[2339,2344,2349],{"type":24,"tag":104,"props":2340,"children":2341},{},[2342],{"type":30,"value":2343},"WebPageTest",{"type":24,"tag":104,"props":2345,"children":2346},{},[2347],{"type":30,"value":2348},"深度瀑布图分析",{"type":24,"tag":104,"props":2350,"children":2351},{},[2352],{"type":30,"value":2335},{"type":24,"tag":72,"props":2354,"children":2355},{},[2356,2361,2366],{"type":24,"tag":104,"props":2357,"children":2358},{},[2359],{"type":30,"value":2360},"Chrome DevTools",{"type":24,"tag":104,"props":2362,"children":2363},{},[2364],{"type":30,"value":2365},"开发调试",{"type":24,"tag":104,"props":2367,"children":2368},{},[2369],{"type":30,"value":2335},{"type":24,"tag":72,"props":2371,"children":2372},{},[2373,2378,2383],{"type":24,"tag":104,"props":2374,"children":2375},{},[2376],{"type":30,"value":2377},"Bundle Analyzer",{"type":24,"tag":104,"props":2379,"children":2380},{},[2381],{"type":30,"value":2382},"JS 包分析",{"type":24,"tag":104,"props":2384,"children":2385},{},[2386],{"type":30,"value":2387},"⭐⭐⭐⭐",{"type":24,"tag":72,"props":2389,"children":2390},{},[2391,2396,2401],{"type":24,"tag":104,"props":2392,"children":2393},{},[2394],{"type":30,"value":2395},"Squoosh",{"type":24,"tag":104,"props":2397,"children":2398},{},[2399],{"type":30,"value":2400},"图片压缩",{"type":24,"tag":104,"props":2402,"children":2403},{},[2404],{"type":30,"value":2387},{"type":24,"tag":72,"props":2406,"children":2407},{},[2408,2413,2418],{"type":24,"tag":104,"props":2409,"children":2410},{},[2411],{"type":30,"value":2412},"GTmetrix",{"type":24,"tag":104,"props":2414,"children":2415},{},[2416],{"type":30,"value":2417},"性能监控",{"type":24,"tag":104,"props":2419,"children":2420},{},[2421],{"type":30,"value":2387},{"type":24,"tag":25,"props":2423,"children":2425},{"id":2424},"总结",[2426],{"type":30,"value":2424},{"type":24,"tag":43,"props":2428,"children":2429},{},[2430,2432,2437],{"type":30,"value":2431},"本次优化项目的成功证明：",{"type":24,"tag":260,"props":2433,"children":2434},{},[2435],{"type":30,"value":2436},"即使是\"慢到不能用\"的网站，通过系统性的优化也能达到秒级加载",{"type":30,"value":2438},"。关键在于：",{"type":24,"tag":1436,"props":2440,"children":2441},{},[2442,2452,2462,2472],{"type":24,"tag":275,"props":2443,"children":2444},{},[2445,2450],{"type":24,"tag":260,"props":2446,"children":2447},{},[2448],{"type":30,"value":2449},"全面诊断",{"type":30,"value":2451},"：找出真正的瓶颈，而不是盲目优化",{"type":24,"tag":275,"props":2453,"children":2454},{},[2455,2460],{"type":24,"tag":260,"props":2456,"children":2457},{},[2458],{"type":30,"value":2459},"分层实施",{"type":30,"value":2461},"：从易到难，每步验证",{"type":24,"tag":275,"props":2463,"children":2464},{},[2465,2470],{"type":24,"tag":260,"props":2466,"children":2467},{},[2468],{"type":30,"value":2469},"前后端配合",{"type":30,"value":2471},"：性能优化不只是前端的事",{"type":24,"tag":275,"props":2473,"children":2474},{},[2475,2480],{"type":24,"tag":260,"props":2476,"children":2477},{},[2478],{"type":30,"value":2479},"持续监控",{"type":30,"value":2481},"：建立机制防止性能回退",{"type":24,"tag":43,"props":2483,"children":2484},{},[2485],{"type":30,"value":2486},"性能优化永远没有终点，但找对方向、用对方法，就能事半功倍。",{"type":24,"tag":25,"props":2488,"children":2490},{"id":2489},"参考资源",[2491],{"type":30,"value":2489},{"type":24,"tag":271,"props":2493,"children":2494},{},[2495,2507,2517,2527],{"type":24,"tag":275,"props":2496,"children":2497},{},[2498],{"type":24,"tag":2499,"props":2500,"children":2504},"a",{"href":2501,"rel":2502},"https://web.dev/vitals/",[2503],"nofollow",[2505],{"type":30,"value":2506},"Web Vitals",{"type":24,"tag":275,"props":2508,"children":2509},{},[2510],{"type":24,"tag":2499,"props":2511,"children":2514},{"href":2512,"rel":2513},"https://developer.chrome.com/docs/devtools/performance/",[2503],[2515],{"type":30,"value":2516},"Chrome DevTools Performance",{"type":24,"tag":275,"props":2518,"children":2519},{},[2520],{"type":24,"tag":2499,"props":2521,"children":2524},{"href":2522,"rel":2523},"https://docs.webpagetest.org/",[2503],[2525],{"type":30,"value":2526},"WebPageTest Documentation",{"type":24,"tag":275,"props":2528,"children":2529},{},[2530],{"type":24,"tag":2499,"props":2531,"children":2534},{"href":2532,"rel":2533},"https://github.com/webpack-contrib/webpack-bundle-analyzer",[2503],[2535],{"type":30,"value":2536},"Webpack Bundle Analyzer",{"title":7,"searchDepth":2538,"depth":2538,"links":2539},3,[2540,2542,2547,2552,2559,2563,2568,2569,2570],{"id":27,"depth":2541,"text":27},2,{"id":33,"depth":2541,"text":33,"children":2543},[2544,2545,2546],{"id":39,"depth":2538,"text":39},{"id":55,"depth":2538,"text":55},{"id":317,"depth":2538,"text":317},{"id":360,"depth":2541,"text":360,"children":2548},[2549,2550,2551],{"id":370,"depth":2538,"text":370},{"id":479,"depth":2538,"text":479},{"id":664,"depth":2538,"text":664},{"id":837,"depth":2541,"text":837,"children":2553},[2554,2555,2556,2557,2558],{"id":842,"depth":2538,"text":845},{"id":1084,"depth":2538,"text":1087},{"id":1372,"depth":2538,"text":1375},{"id":1596,"depth":2538,"text":1599},{"id":1811,"depth":2538,"text":1814},{"id":1856,"depth":2541,"text":1856,"children":2560},[2561,2562],{"id":1866,"depth":2538,"text":1866},{"id":2062,"depth":2538,"text":2062},{"id":2169,"depth":2541,"text":2169,"children":2564},[2565,2566,2567],{"id":2174,"depth":2538,"text":2174},{"id":2222,"depth":2538,"text":2222},{"id":2240,"depth":2538,"text":2240},{"id":2288,"depth":2541,"text":2288},{"id":2424,"depth":2541,"text":2424},{"id":2489,"depth":2541,"text":2489},"markdown","content:topics:performance:ecommerce-loading-optimization-case.md","content","topics/performance/ecommerce-loading-optimization-case.md","topics/performance/ecommerce-loading-optimization-case","md",[2578,3522,4850],{"_path":2579,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":2580,"description":2581,"date":2582,"topic":5,"author":11,"tags":2583,"image":2585,"featured":18,"readingTime":2586,"body":2587,"_type":2571,"_id":3519,"_source":2573,"_file":3520,"_stem":3521,"_extension":2576},"/topics/performance/lcp-optimization-theory-practice","LCP 优化：从理论到实践","从渲染管线与 LCP 候选元素规则出发，系统讲清 LCP 变慢的根因，提供可复现的诊断流程与可落地的优化手段（图片、字体、SSR/CSR、资源优先级、CDN）。","2026-01-20",[13,1067,16,711,2584],"CDN","/images/topics/performance/lcp.jpg",23,{"type":21,"children":2588,"toc":3493},[2589,2594,2599,2604,2622,2627,2647,2652,2670,2674,2680,2685,2721,2726,2731,2734,2740,2745,2758,2763,2776,2781,2804,2807,2813,2818,2823,2828,2851,2854,2860,2866,2871,2884,2889,2902,2908,2913,2926,2932,2950,2953,2959,2965,2970,2988,2994,3007,3026,3032,3037,3046,3051,3060,3065,3071,3089,3092,3098,3104,3109,3122,3128,3133,3138,3160,3163,3169,3174,3179,3192,3197,3215,3220,3238,3241,3247,3252,3261,3266,3269,3275,3392,3395,3401,3463,3466,3470,3475],{"type":24,"tag":25,"props":2590,"children":2592},{"id":2591},"lcp-优化从理论到实践",[2593],{"type":30,"value":2580},{"type":24,"tag":43,"props":2595,"children":2596},{},[2597],{"type":30,"value":2598},"LCP（Largest Contentful Paint）是 Core Web Vitals 中最能代表“用户主观感受”的指标之一：它近似回答了“页面主要内容什么时候真正出来”。",{"type":24,"tag":43,"props":2600,"children":2601},{},[2602],{"type":30,"value":2603},"很多团队优化 LCP 的方式是：",{"type":24,"tag":271,"props":2605,"children":2606},{},[2607,2612,2617],{"type":24,"tag":275,"props":2608,"children":2609},{},[2610],{"type":30,"value":2611},"“把图片压一压”",{"type":24,"tag":275,"props":2613,"children":2614},{},[2615],{"type":30,"value":2616},"“上 CDN”",{"type":24,"tag":275,"props":2618,"children":2619},{},[2620],{"type":30,"value":2621},"“开 SSR”",{"type":24,"tag":43,"props":2623,"children":2624},{},[2625],{"type":30,"value":2626},"这些手段可能有效，但也经常无效——因为你没搞清楚：",{"type":24,"tag":271,"props":2628,"children":2629},{},[2630,2642],{"type":24,"tag":275,"props":2631,"children":2632},{},[2633,2635,2640],{"type":30,"value":2634},"LCP 的",{"type":24,"tag":260,"props":2636,"children":2637},{},[2638],{"type":30,"value":2639},"候选元素",{"type":30,"value":2641},"到底是谁？",{"type":24,"tag":275,"props":2643,"children":2644},{},[2645],{"type":30,"value":2646},"LCP 的时间到底卡在：网络、解析、布局、绘制还是 JS？",{"type":24,"tag":43,"props":2648,"children":2649},{},[2650],{"type":30,"value":2651},"这篇文章按“你能在生产上稳定把 LCP 做到好”为目标，给出：",{"type":24,"tag":271,"props":2653,"children":2654},{},[2655,2660,2665],{"type":24,"tag":275,"props":2656,"children":2657},{},[2658],{"type":30,"value":2659},"一套诊断流程（从现象到根因）",{"type":24,"tag":275,"props":2661,"children":2662},{},[2663],{"type":30,"value":2664},"一套常见根因 → 对应策略的映射",{"type":24,"tag":275,"props":2666,"children":2667},{},[2668],{"type":30,"value":2669},"可落地的优化手段与检查清单",{"type":24,"tag":2671,"props":2672,"children":2673},"hr",{},[],{"type":24,"tag":25,"props":2675,"children":2677},{"id":2676},"_1-lcp-的本质不是首屏渲染而是最大内容出现",[2678],{"type":30,"value":2679},"1. LCP 的本质：不是“首屏渲染”，而是“最大内容出现”",{"type":24,"tag":43,"props":2681,"children":2682},{},[2683],{"type":30,"value":2684},"浏览器会从候选元素里选一个“最大内容元素”作为 LCP 候选，常见类型包括：",{"type":24,"tag":271,"props":2686,"children":2687},{},[2688,2697,2708],{"type":24,"tag":275,"props":2689,"children":2690},{},[2691],{"type":24,"tag":529,"props":2692,"children":2694},{"className":2693},[],[2695],{"type":30,"value":2696},"img",{"type":24,"tag":275,"props":2698,"children":2699},{},[2700,2706],{"type":24,"tag":529,"props":2701,"children":2703},{"className":2702},[],[2704],{"type":30,"value":2705},"image",{"type":30,"value":2707}," 的背景图（某些情况下）",{"type":24,"tag":275,"props":2709,"children":2710},{},[2711,2713,2719],{"type":30,"value":2712},"大块文本（如 ",{"type":24,"tag":529,"props":2714,"children":2716},{"className":2715},[],[2717],{"type":30,"value":2718},"h1",{"type":30,"value":2720},"/正文块）",{"type":24,"tag":43,"props":2722,"children":2723},{},[2724],{"type":30,"value":2725},"LCP 的时间点是：这个最大元素被绘制到屏幕上的时间。",{"type":24,"tag":43,"props":2727,"children":2728},{},[2729],{"type":30,"value":2730},"关键：LCP 不是你以为的“所有内容都 ready”。它只关注“最大那个”。",{"type":24,"tag":2671,"props":2732,"children":2733},{},[],{"type":24,"tag":25,"props":2735,"children":2737},{"id":2736},"_2-先做识别你的-lcp-元素是谁",[2738],{"type":30,"value":2739},"2. 先做识别：你的 LCP 元素是谁？",{"type":24,"tag":43,"props":2741,"children":2742},{},[2743],{"type":30,"value":2744},"在 Chrome DevTools：",{"type":24,"tag":271,"props":2746,"children":2747},{},[2748,2753],{"type":24,"tag":275,"props":2749,"children":2750},{},[2751],{"type":30,"value":2752},"Performance 面板 → Web Vitals",{"type":24,"tag":275,"props":2754,"children":2755},{},[2756],{"type":30,"value":2757},"或 Lighthouse 报告里会告诉你 LCP 元素",{"type":24,"tag":43,"props":2759,"children":2760},{},[2761],{"type":30,"value":2762},"你要记录两件事：",{"type":24,"tag":271,"props":2764,"children":2765},{},[2766,2771],{"type":24,"tag":275,"props":2767,"children":2768},{},[2769],{"type":30,"value":2770},"LCP 元素类型（图片/文本）",{"type":24,"tag":275,"props":2772,"children":2773},{},[2774],{"type":30,"value":2775},"LCP 元素来源（HTML 直出、JS 渲染、背景图、第三方）",{"type":24,"tag":43,"props":2777,"children":2778},{},[2779],{"type":30,"value":2780},"因为两类 LCP 的优化路线完全不同：",{"type":24,"tag":271,"props":2782,"children":2783},{},[2784,2794],{"type":24,"tag":275,"props":2785,"children":2786},{},[2787,2792],{"type":24,"tag":260,"props":2788,"children":2789},{},[2790],{"type":30,"value":2791},"图片 LCP",{"type":30,"value":2793},"：网络 + 解码 + 优先级",{"type":24,"tag":275,"props":2795,"children":2796},{},[2797,2802],{"type":24,"tag":260,"props":2798,"children":2799},{},[2800],{"type":30,"value":2801},"文本 LCP",{"type":30,"value":2803},"：CSS/字体阻塞 + layout + 渲染",{"type":24,"tag":2671,"props":2805,"children":2806},{},[],{"type":24,"tag":25,"props":2808,"children":2810},{"id":2809},"_3-分解-lcp把总时间拆成可行动的部分",[2811],{"type":30,"value":2812},"3. 分解 LCP：把“总时间”拆成可行动的部分",{"type":24,"tag":43,"props":2814,"children":2815},{},[2816],{"type":30,"value":2817},"一个可用的分解模型：",{"type":24,"tag":43,"props":2819,"children":2820},{},[2821],{"type":30,"value":2822},"$$\nLCP \\approx TTFB + \\text{资源发现/调度} + \\text{下载} + \\text{解码/布局/绘制}\n$$",{"type":24,"tag":43,"props":2824,"children":2825},{},[2826],{"type":30,"value":2827},"你不需要完全精确，但必须能回答：",{"type":24,"tag":271,"props":2829,"children":2830},{},[2831,2836,2841,2846],{"type":24,"tag":275,"props":2832,"children":2833},{},[2834],{"type":30,"value":2835},"慢在服务器？（TTFB）",{"type":24,"tag":275,"props":2837,"children":2838},{},[2839],{"type":30,"value":2840},"慢在资源发现？（preload/优先级）",{"type":24,"tag":275,"props":2842,"children":2843},{},[2844],{"type":30,"value":2845},"慢在下载？（图片太大、带宽、CDN）",{"type":24,"tag":275,"props":2847,"children":2848},{},[2849],{"type":30,"value":2850},"慢在主线程？（长任务、渲染阻塞）",{"type":24,"tag":2671,"props":2852,"children":2853},{},[],{"type":24,"tag":25,"props":2855,"children":2857},{"id":2856},"_4-诊断流程生产可用版",[2858],{"type":30,"value":2859},"4. 诊断流程（生产可用版）",{"type":24,"tag":37,"props":2861,"children":2863},{"id":2862},"step-1看字段真实用户的-lcp-分布",[2864],{"type":30,"value":2865},"Step 1：看字段——真实用户的 LCP 分布",{"type":24,"tag":43,"props":2867,"children":2868},{},[2869],{"type":30,"value":2870},"如果你有 RUM：",{"type":24,"tag":271,"props":2872,"children":2873},{},[2874,2879],{"type":24,"tag":275,"props":2875,"children":2876},{},[2877],{"type":30,"value":2878},"p75 LCP",{"type":24,"tag":275,"props":2880,"children":2881},{},[2882],{"type":30,"value":2883},"按路由/地区/设备档位切片",{"type":24,"tag":43,"props":2885,"children":2886},{},[2887],{"type":30,"value":2888},"你会发现：",{"type":24,"tag":271,"props":2890,"children":2891},{},[2892,2897],{"type":24,"tag":275,"props":2893,"children":2894},{},[2895],{"type":30,"value":2896},"可能只有低端机慢",{"type":24,"tag":275,"props":2898,"children":2899},{},[2900],{"type":30,"value":2901},"或只有某地区慢（CDN/回源）",{"type":24,"tag":37,"props":2903,"children":2905},{"id":2904},"step-2看实验室复现-标记-lcp-元素",[2906],{"type":30,"value":2907},"Step 2：看实验室——复现 + 标记 LCP 元素",{"type":24,"tag":43,"props":2909,"children":2910},{},[2911],{"type":30,"value":2912},"用固定网络/CPU 限制：",{"type":24,"tag":271,"props":2914,"children":2915},{},[2916,2921],{"type":24,"tag":275,"props":2917,"children":2918},{},[2919],{"type":30,"value":2920},"Network: Fast 3G / Slow 4G",{"type":24,"tag":275,"props":2922,"children":2923},{},[2924],{"type":30,"value":2925},"CPU: 4x slowdown",{"type":24,"tag":37,"props":2927,"children":2929},{"id":2928},"step-3拆链路ttfb-资源-主线程",[2930],{"type":30,"value":2931},"Step 3：拆链路——TTFB / 资源 / 主线程",{"type":24,"tag":271,"props":2933,"children":2934},{},[2935,2940,2945],{"type":24,"tag":275,"props":2936,"children":2937},{},[2938],{"type":30,"value":2939},"TTFB 高：先查服务端、缓存、回源",{"type":24,"tag":275,"props":2941,"children":2942},{},[2943],{"type":30,"value":2944},"下载慢：查图片体积、格式、CDN、优先级",{"type":24,"tag":275,"props":2946,"children":2947},{},[2948],{"type":30,"value":2949},"主线程忙：查长任务、hydration、bundle",{"type":24,"tag":2671,"props":2951,"children":2952},{},[],{"type":24,"tag":25,"props":2954,"children":2956},{"id":2955},"_5-图片型-lcp优先级与体积是第一性",[2957],{"type":30,"value":2958},"5. 图片型 LCP：优先级与体积是第一性",{"type":24,"tag":37,"props":2960,"children":2962},{"id":2961},"_51-把-lcp-图片变小但不要牺牲清晰度",[2963],{"type":30,"value":2964},"5.1 把 LCP 图片“变小”但不要牺牲清晰度",{"type":24,"tag":43,"props":2966,"children":2967},{},[2968],{"type":30,"value":2969},"实践优先级：",{"type":24,"tag":1436,"props":2971,"children":2972},{},[2973,2978,2983],{"type":24,"tag":275,"props":2974,"children":2975},{},[2976],{"type":30,"value":2977},"用现代格式：AVIF/WebP",{"type":24,"tag":275,"props":2979,"children":2980},{},[2981],{"type":30,"value":2982},"合理尺寸：不要把 2000px 的图缩到 400px 显示",{"type":24,"tag":275,"props":2984,"children":2985},{},[2986],{"type":30,"value":2987},"质量参数：基于视觉对比选一个阈值",{"type":24,"tag":37,"props":2989,"children":2991},{"id":2990},"_52-确保-lcp-图片不是懒加载",[2992],{"type":30,"value":2993},"5.2 确保 LCP 图片不是懒加载",{"type":24,"tag":43,"props":2995,"children":2996},{},[2997,2999,3005],{"type":30,"value":2998},"LCP 图片如果被 ",{"type":24,"tag":529,"props":3000,"children":3002},{"className":3001},[],[3003],{"type":30,"value":3004},"loading=\"lazy\"",{"type":30,"value":3006},"，通常会变慢。",{"type":24,"tag":271,"props":3008,"children":3009},{},[3010,3021],{"type":24,"tag":275,"props":3011,"children":3012},{},[3013,3015],{"type":30,"value":3014},"LCP 相关图片：",{"type":24,"tag":529,"props":3016,"children":3018},{"className":3017},[],[3019],{"type":30,"value":3020},"loading=\"eager\"",{"type":24,"tag":275,"props":3022,"children":3023},{},[3024],{"type":30,"value":3025},"或显式 preload",{"type":24,"tag":37,"props":3027,"children":3029},{"id":3028},"_53-明确资源优先级preload-fetchpriority",[3030],{"type":30,"value":3031},"5.3 明确资源优先级（preload / fetchpriority）",{"type":24,"tag":43,"props":3033,"children":3034},{},[3035],{"type":30,"value":3036},"对 LCP 图片：",{"type":24,"tag":524,"props":3038,"children":3041},{"className":3039,"code":3040,"language":867,"meta":7},[869],"\u003Clink rel=\"preload\" as=\"image\" href=\"/hero.avif\" />\n",[3042],{"type":24,"tag":529,"props":3043,"children":3044},{"__ignoreMap":7},[3045],{"type":30,"value":3040},{"type":24,"tag":43,"props":3047,"children":3048},{},[3049],{"type":30,"value":3050},"或（浏览器支持时）：",{"type":24,"tag":524,"props":3052,"children":3055},{"className":3053,"code":3054,"language":867,"meta":7},[869],"\u003Cimg src=\"/hero.avif\" fetchpriority=\"high\" />\n",[3056],{"type":24,"tag":529,"props":3057,"children":3058},{"__ignoreMap":7},[3059],{"type":30,"value":3054},{"type":24,"tag":43,"props":3061,"children":3062},{},[3063],{"type":30,"value":3064},"目标是：让浏览器更早发现它、更早调度它。",{"type":24,"tag":37,"props":3066,"children":3068},{"id":3067},"_54-cdn减少-rtt-与回源",[3069],{"type":30,"value":3070},"5.4 CDN：减少 RTT 与回源",{"type":24,"tag":271,"props":3072,"children":3073},{},[3074,3079,3084],{"type":24,"tag":275,"props":3075,"children":3076},{},[3077],{"type":30,"value":3078},"图片必须走 CDN",{"type":24,"tag":275,"props":3080,"children":3081},{},[3082],{"type":30,"value":3083},"开启压缩、HTTP/2/3",{"type":24,"tag":275,"props":3085,"children":3086},{},[3087],{"type":30,"value":3088},"确保 cache hit",{"type":24,"tag":2671,"props":3090,"children":3091},{},[],{"type":24,"tag":25,"props":3093,"children":3095},{"id":3094},"_6-文本型-lcpcss字体阻塞是常见杀手",[3096],{"type":30,"value":3097},"6. 文本型 LCP：CSS/字体阻塞是常见杀手",{"type":24,"tag":37,"props":3099,"children":3101},{"id":3100},"_61-关键-css-与阻塞",[3102],{"type":30,"value":3103},"6.1 关键 CSS 与阻塞",{"type":24,"tag":43,"props":3105,"children":3106},{},[3107],{"type":30,"value":3108},"如果你的主 CSS 很大且阻塞：",{"type":24,"tag":271,"props":3110,"children":3111},{},[3112,3117],{"type":24,"tag":275,"props":3113,"children":3114},{},[3115],{"type":30,"value":3116},"拆关键 CSS",{"type":24,"tag":275,"props":3118,"children":3119},{},[3120],{"type":30,"value":3121},"延后非关键 CSS",{"type":24,"tag":37,"props":3123,"children":3125},{"id":3124},"_62-字体foitfout-与-lcp",[3126],{"type":30,"value":3127},"6.2 字体：FOIT/FOUT 与 LCP",{"type":24,"tag":43,"props":3129,"children":3130},{},[3131],{"type":30,"value":3132},"大标题是文本 LCP 时，字体策略会直接影响 LCP。",{"type":24,"tag":43,"props":3134,"children":3135},{},[3136],{"type":30,"value":3137},"建议：",{"type":24,"tag":271,"props":3139,"children":3140},{},[3141,3150,3155],{"type":24,"tag":275,"props":3142,"children":3143},{},[3144],{"type":24,"tag":529,"props":3145,"children":3147},{"className":3146},[],[3148],{"type":30,"value":3149},"font-display: swap",{"type":24,"tag":275,"props":3151,"children":3152},{},[3153],{"type":30,"value":3154},"对关键字体文件 preload",{"type":24,"tag":275,"props":3156,"children":3157},{},[3158],{"type":30,"value":3159},"子集化（只保留需要的字形）",{"type":24,"tag":2671,"props":3161,"children":3162},{},[],{"type":24,"tag":25,"props":3164,"children":3166},{"id":3165},"_7-ssrcsr-与-hydration别让-js-抢走首屏",[3167],{"type":30,"value":3168},"7. SSR/CSR 与 Hydration：别让 JS 抢走首屏",{"type":24,"tag":43,"props":3170,"children":3171},{},[3172],{"type":30,"value":3173},"SSR 通常能改善 LCP，但并非必然。",{"type":24,"tag":43,"props":3175,"children":3176},{},[3177],{"type":30,"value":3178},"常见反例：",{"type":24,"tag":271,"props":3180,"children":3181},{},[3182,3187],{"type":24,"tag":275,"props":3183,"children":3184},{},[3185],{"type":30,"value":3186},"SSR 直出了 HTML",{"type":24,"tag":275,"props":3188,"children":3189},{},[3190],{"type":30,"value":3191},"但首屏仍要等一堆 JS 执行、样式计算、hydrate 才能稳定",{"type":24,"tag":43,"props":3193,"children":3194},{},[3195],{"type":30,"value":3196},"你需要关注：",{"type":24,"tag":271,"props":3198,"children":3199},{},[3200,3205,3210],{"type":24,"tag":275,"props":3201,"children":3202},{},[3203],{"type":30,"value":3204},"首屏 bundle 体积",{"type":24,"tag":275,"props":3206,"children":3207},{},[3208],{"type":30,"value":3209},"hydration 的长任务",{"type":24,"tag":275,"props":3211,"children":3212},{},[3213],{"type":30,"value":3214},"第三方脚本（埋点、广告）阻塞",{"type":24,"tag":43,"props":3216,"children":3217},{},[3218],{"type":30,"value":3219},"实践建议：",{"type":24,"tag":271,"props":3221,"children":3222},{},[3223,3228,3233],{"type":24,"tag":275,"props":3224,"children":3225},{},[3226],{"type":30,"value":3227},"首屏只 hydrate 必要组件",{"type":24,"tag":275,"props":3229,"children":3230},{},[3231],{"type":30,"value":3232},"大型交互组件延后",{"type":24,"tag":275,"props":3234,"children":3235},{},[3236],{"type":30,"value":3237},"第三方脚本延迟加载",{"type":24,"tag":2671,"props":3239,"children":3240},{},[],{"type":24,"tag":25,"props":3242,"children":3244},{"id":3243},"_8-资源调度preconnect-dns-prefetch",[3245],{"type":30,"value":3246},"8. 资源调度：preconnect / dns-prefetch",{"type":24,"tag":43,"props":3248,"children":3249},{},[3250],{"type":30,"value":3251},"如果 LCP 资源来自第三方域名：",{"type":24,"tag":524,"props":3253,"children":3256},{"className":3254,"code":3255,"language":867,"meta":7},[869],"\u003Clink rel=\"preconnect\" href=\"https://cdn.example.com\" />\n",[3257],{"type":24,"tag":529,"props":3258,"children":3259},{"__ignoreMap":7},[3260],{"type":30,"value":3255},{"type":24,"tag":43,"props":3262,"children":3263},{},[3264],{"type":30,"value":3265},"这能减少握手开销。",{"type":24,"tag":2671,"props":3267,"children":3268},{},[],{"type":24,"tag":25,"props":3270,"children":3272},{"id":3271},"_9-常见根因-对应策略速查表",[3273],{"type":30,"value":3274},"9. 常见根因 → 对应策略速查表",{"type":24,"tag":64,"props":3276,"children":3277},{},[3278,3299],{"type":24,"tag":68,"props":3279,"children":3280},{},[3281],{"type":24,"tag":72,"props":3282,"children":3283},{},[3284,3289,3294],{"type":24,"tag":76,"props":3285,"children":3286},{},[3287],{"type":30,"value":3288},"根因",{"type":24,"tag":76,"props":3290,"children":3291},{},[3292],{"type":30,"value":3293},"现象",{"type":24,"tag":76,"props":3295,"children":3296},{},[3297],{"type":30,"value":3298},"典型修复",{"type":24,"tag":97,"props":3300,"children":3301},{},[3302,3320,3338,3356,3374],{"type":24,"tag":72,"props":3303,"children":3304},{},[3305,3310,3315],{"type":24,"tag":104,"props":3306,"children":3307},{},[3308],{"type":30,"value":3309},"TTFB 高",{"type":24,"tag":104,"props":3311,"children":3312},{},[3313],{"type":30,"value":3314},"所有资源都晚开始",{"type":24,"tag":104,"props":3316,"children":3317},{},[3318],{"type":30,"value":3319},"服务端缓存、CDN、减少回源",{"type":24,"tag":72,"props":3321,"children":3322},{},[3323,3328,3333],{"type":24,"tag":104,"props":3324,"children":3325},{},[3326],{"type":30,"value":3327},"LCP 图片太大",{"type":24,"tag":104,"props":3329,"children":3330},{},[3331],{"type":30,"value":3332},"下载阶段耗时长",{"type":24,"tag":104,"props":3334,"children":3335},{},[3336],{"type":30,"value":3337},"AVIF/WebP、尺寸裁切、CDN",{"type":24,"tag":72,"props":3339,"children":3340},{},[3341,3346,3351],{"type":24,"tag":104,"props":3342,"children":3343},{},[3344],{"type":30,"value":3345},"LCP 图片优先级低",{"type":24,"tag":104,"props":3347,"children":3348},{},[3349],{"type":30,"value":3350},"LCP 资源很晚才发起",{"type":24,"tag":104,"props":3352,"children":3353},{},[3354],{"type":30,"value":3355},"preload/fetchpriority",{"type":24,"tag":72,"props":3357,"children":3358},{},[3359,3364,3369],{"type":24,"tag":104,"props":3360,"children":3361},{},[3362],{"type":30,"value":3363},"字体阻塞",{"type":24,"tag":104,"props":3365,"children":3366},{},[3367],{"type":30,"value":3368},"文本 LCP 晚出现",{"type":24,"tag":104,"props":3370,"children":3371},{},[3372],{"type":30,"value":3373},"font-display: swap + preload",{"type":24,"tag":72,"props":3375,"children":3376},{},[3377,3382,3387],{"type":24,"tag":104,"props":3378,"children":3379},{},[3380],{"type":30,"value":3381},"主线程长任务",{"type":24,"tag":104,"props":3383,"children":3384},{},[3385],{"type":30,"value":3386},"LCP 前 JS 很忙",{"type":24,"tag":104,"props":3388,"children":3389},{},[3390],{"type":30,"value":3391},"拆包、延后非关键组件/第三方",{"type":24,"tag":2671,"props":3393,"children":3394},{},[],{"type":24,"tag":25,"props":3396,"children":3398},{"id":3397},"_10-上线检查清单",[3399],{"type":30,"value":3400},"10. 上线检查清单",{"type":24,"tag":271,"props":3402,"children":3405},{"className":3403},[3404],"contains-task-list",[3406,3418,3427,3436,3445,3454],{"type":24,"tag":275,"props":3407,"children":3410},{"className":3408},[3409],"task-list-item",[3411,3416],{"type":24,"tag":3412,"props":3413,"children":3415},"input",{"disabled":18,"type":3414},"checkbox",[],{"type":30,"value":3417}," LCP 元素是否明确（图片/文本）",{"type":24,"tag":275,"props":3419,"children":3421},{"className":3420},[3409],[3422,3425],{"type":24,"tag":3412,"props":3423,"children":3424},{"disabled":18,"type":3414},[],{"type":30,"value":3426}," LCP 资源是否高优先级（preload/priority）",{"type":24,"tag":275,"props":3428,"children":3430},{"className":3429},[3409],[3431,3434],{"type":24,"tag":3412,"props":3432,"children":3433},{"disabled":18,"type":3414},[],{"type":30,"value":3435}," LCP 图片是否避免 lazy",{"type":24,"tag":275,"props":3437,"children":3439},{"className":3438},[3409],[3440,3443],{"type":24,"tag":3412,"props":3441,"children":3442},{"disabled":18,"type":3414},[],{"type":30,"value":3444}," 是否有 RUM 维度切片（设备/地区/版本）",{"type":24,"tag":275,"props":3446,"children":3448},{"className":3447},[3409],[3449,3452],{"type":24,"tag":3412,"props":3450,"children":3451},{"disabled":18,"type":3414},[],{"type":30,"value":3453}," TTFB 是否受控（缓存/回源）",{"type":24,"tag":275,"props":3455,"children":3457},{"className":3456},[3409],[3458,3461],{"type":24,"tag":3412,"props":3459,"children":3460},{"disabled":18,"type":3414},[],{"type":30,"value":3462}," 第三方脚本是否延后",{"type":24,"tag":2671,"props":3464,"children":3465},{},[],{"type":24,"tag":25,"props":3467,"children":3468},{"id":2424},[3469],{"type":30,"value":2424},{"type":24,"tag":43,"props":3471,"children":3472},{},[3473],{"type":30,"value":3474},"LCP 优化的核心是：",{"type":24,"tag":271,"props":3476,"children":3477},{},[3478,3483,3488],{"type":24,"tag":275,"props":3479,"children":3480},{},[3481],{"type":30,"value":3482},"先识别 LCP 元素",{"type":24,"tag":275,"props":3484,"children":3485},{},[3486],{"type":30,"value":3487},"再把 LCP 拆成链路各段",{"type":24,"tag":275,"props":3489,"children":3490},{},[3491],{"type":30,"value":3492},"针对性优化（资源优先级、体积、TTFB、主线程）",{"title":7,"searchDepth":2538,"depth":2538,"links":3494},[3495,3496,3497,3498,3499,3504,3510,3514,3515,3516,3517,3518],{"id":2591,"depth":2541,"text":2580},{"id":2676,"depth":2541,"text":2679},{"id":2736,"depth":2541,"text":2739},{"id":2809,"depth":2541,"text":2812},{"id":2856,"depth":2541,"text":2859,"children":3500},[3501,3502,3503],{"id":2862,"depth":2538,"text":2865},{"id":2904,"depth":2538,"text":2907},{"id":2928,"depth":2538,"text":2931},{"id":2955,"depth":2541,"text":2958,"children":3505},[3506,3507,3508,3509],{"id":2961,"depth":2538,"text":2964},{"id":2990,"depth":2538,"text":2993},{"id":3028,"depth":2538,"text":3031},{"id":3067,"depth":2538,"text":3070},{"id":3094,"depth":2541,"text":3097,"children":3511},[3512,3513],{"id":3100,"depth":2538,"text":3103},{"id":3124,"depth":2538,"text":3127},{"id":3165,"depth":2541,"text":3168},{"id":3243,"depth":2541,"text":3246},{"id":3271,"depth":2541,"text":3274},{"id":3397,"depth":2541,"text":3400},{"id":2424,"depth":2541,"text":2424},"content:topics:performance:lcp-optimization-theory-practice.md","topics/performance/lcp-optimization-theory-practice.md","topics/performance/lcp-optimization-theory-practice",{"_path":3523,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":3524,"description":3525,"date":2582,"topic":5,"author":11,"tags":3526,"image":3530,"featured":18,"readingTime":3531,"body":3532,"_type":2571,"_id":4847,"_source":2573,"_file":4848,"_stem":4849,"_extension":2576},"/topics/performance/rum-real-user-monitoring-design","RUM 真实用户监控方案设计","从指标体系、采样策略、上报链路到数据建模与告警，完整设计一套可落地的 RUM（Real User Monitoring）体系，解决“线上性能到底怎样”的问题。",[2417,3527,3528,16,3529],"RUM","可观测性","采样","/images/topics/performance/rum.jpg",22,{"type":21,"children":3533,"toc":4809},[3534,3539,3551,3569,3581,3619,3622,3628,3633,3642,3647,3680,3685,3688,3694,3700,3705,3733,3738,3756,3762,3767,3772,3798,3803,3811,3814,3820,3825,3831,3880,3885,3891,3896,3914,3920,3925,3938,3943,3956,3959,3965,3971,3976,3997,4002,4015,4021,4034,4039,4181,4186,4199,4202,4208,4228,4254,4260,4264,4282,4288,4319,4325,4330,4334,4360,4363,4369,4375,4380,4439,4444,4450,4455,4468,4473,4500,4506,4511,4516,4529,4534,4537,4543,4548,4553,4586,4591,4596,4609,4612,4618,4624,4629,4647,4653,4658,4671,4677,4682,4695,4698,4704,4727,4732,4735,4741,4746,4769,4772,4776,4781],{"type":24,"tag":25,"props":3535,"children":3537},{"id":3536},"rum-真实用户监控方案设计",[3538],{"type":30,"value":3524},{"type":24,"tag":43,"props":3540,"children":3541},{},[3542,3544,3549],{"type":30,"value":3543},"如果说 Lighthouse/Performance 面板告诉你“理论上能跑多快”，那么 ",{"type":24,"tag":260,"props":3545,"children":3546},{},[3547],{"type":30,"value":3548},"RUM（Real User Monitoring）",{"type":30,"value":3550}," 才能回答：",{"type":24,"tag":271,"props":3552,"children":3553},{},[3554,3559,3564],{"type":24,"tag":275,"props":3555,"children":3556},{},[3557],{"type":30,"value":3558},"真实用户到底慢在哪？",{"type":24,"tag":275,"props":3560,"children":3561},{},[3562],{"type":30,"value":3563},"慢是“某地区/某机型/某版本/某网络”的问题还是全局问题？",{"type":24,"tag":275,"props":3565,"children":3566},{},[3567],{"type":30,"value":3568},"优化上线后是否真的变好？有无回归？",{"type":24,"tag":43,"props":3570,"children":3571},{},[3572,3574,3579],{"type":30,"value":3573},"这篇文章不讲“把 SDK 丢进去就完事”，而是站在",{"type":24,"tag":260,"props":3575,"children":3576},{},[3577],{"type":30,"value":3578},"体系设计",{"type":30,"value":3580},"角度，从 0 到 1 设计一套能长期演进的 RUM：",{"type":24,"tag":271,"props":3582,"children":3583},{},[3584,3589,3594,3599,3604,3609,3614],{"type":24,"tag":275,"props":3585,"children":3586},{},[3587],{"type":30,"value":3588},"指标体系（Core Web Vitals + 业务指标）",{"type":24,"tag":275,"props":3590,"children":3591},{},[3592],{"type":30,"value":3593},"采样与成本控制",{"type":24,"tag":275,"props":3595,"children":3596},{},[3597],{"type":30,"value":3598},"上报协议与可靠性",{"type":24,"tag":275,"props":3600,"children":3601},{},[3602],{"type":30,"value":3603},"事件模型与数据仓库建模",{"type":24,"tag":275,"props":3605,"children":3606},{},[3607],{"type":30,"value":3608},"分析维度（分桶）与聚合",{"type":24,"tag":275,"props":3610,"children":3611},{},[3612],{"type":30,"value":3613},"告警与 SLO",{"type":24,"tag":275,"props":3615,"children":3616},{},[3617],{"type":30,"value":3618},"隐私与合规",{"type":24,"tag":2671,"props":3620,"children":3621},{},[],{"type":24,"tag":25,"props":3623,"children":3625},{"id":3624},"_1-先定目标rum-的产品定义",[3626],{"type":30,"value":3627},"1. 先定目标：RUM 的“产品定义”",{"type":24,"tag":43,"props":3629,"children":3630},{},[3631],{"type":30,"value":3632},"在做任何技术实现前，你必须把目标写成一句可验证的话：",{"type":24,"tag":3634,"props":3635,"children":3636},"blockquote",{},[3637],{"type":24,"tag":43,"props":3638,"children":3639},{},[3640],{"type":30,"value":3641},"我们要用 RUM 在 7 天内发现性能回归，并能定位到“哪类用户/哪条链路/哪个版本”导致 INP 恶化。",{"type":24,"tag":43,"props":3643,"children":3644},{},[3645],{"type":30,"value":3646},"RUM 的价值通常分三层：",{"type":24,"tag":1436,"props":3648,"children":3649},{},[3650,3660,3670],{"type":24,"tag":275,"props":3651,"children":3652},{},[3653,3658],{"type":24,"tag":260,"props":3654,"children":3655},{},[3656],{"type":30,"value":3657},"可见性",{"type":30,"value":3659},"：上线后真实体验有数据",{"type":24,"tag":275,"props":3661,"children":3662},{},[3663,3668],{"type":24,"tag":260,"props":3664,"children":3665},{},[3666],{"type":30,"value":3667},"可定位",{"type":30,"value":3669},"：能切片（地区/设备/页面/版本）",{"type":24,"tag":275,"props":3671,"children":3672},{},[3673,3678],{"type":24,"tag":260,"props":3674,"children":3675},{},[3676],{"type":30,"value":3677},"可闭环",{"type":30,"value":3679},"：告警 → 归因 → 修复 → 复盘",{"type":24,"tag":43,"props":3681,"children":3682},{},[3683],{"type":30,"value":3684},"如果你只做第 1 层，它会退化成“报表”。",{"type":24,"tag":2671,"props":3686,"children":3687},{},[],{"type":24,"tag":25,"props":3689,"children":3691},{"id":3690},"_2-指标体系不要只盯-core-web-vitals",[3692],{"type":30,"value":3693},"2. 指标体系：不要只盯 Core Web Vitals",{"type":24,"tag":37,"props":3695,"children":3697},{"id":3696},"_21-必选core-web-vitals-补充指标",[3698],{"type":30,"value":3699},"2.1 必选：Core Web Vitals + 补充指标",{"type":24,"tag":43,"props":3701,"children":3702},{},[3703],{"type":30,"value":3704},"建议最小集合：",{"type":24,"tag":271,"props":3706,"children":3707},{},[3708,3713,3718,3723,3728],{"type":24,"tag":275,"props":3709,"children":3710},{},[3711],{"type":30,"value":3712},"LCP（最大内容绘制）",{"type":24,"tag":275,"props":3714,"children":3715},{},[3716],{"type":30,"value":3717},"INP（交互到下一次绘制）",{"type":24,"tag":275,"props":3719,"children":3720},{},[3721],{"type":30,"value":3722},"CLS（布局偏移）",{"type":24,"tag":275,"props":3724,"children":3725},{},[3726],{"type":30,"value":3727},"TTFB（服务端首字节）",{"type":24,"tag":275,"props":3729,"children":3730},{},[3731],{"type":30,"value":3732},"FCP（首屏内容绘制，辅助解释 LCP）",{"type":24,"tag":43,"props":3734,"children":3735},{},[3736],{"type":30,"value":3737},"但这还不够，你还需要“解释型指标”：",{"type":24,"tag":271,"props":3739,"children":3740},{},[3741,3746,3751],{"type":24,"tag":275,"props":3742,"children":3743},{},[3744],{"type":30,"value":3745},"Long Task（长任务）统计（数量/总时长/Top 贡献）",{"type":24,"tag":275,"props":3747,"children":3748},{},[3749],{"type":30,"value":3750},"Resource timing（关键资源耗时）",{"type":24,"tag":275,"props":3752,"children":3753},{},[3754],{"type":30,"value":3755},"JS 错误/资源错误（与性能回归强相关）",{"type":24,"tag":37,"props":3757,"children":3759},{"id":3758},"_22-业务指标把性能与转化绑定",[3760],{"type":30,"value":3761},"2.2 业务指标：把性能与转化绑定",{"type":24,"tag":43,"props":3763,"children":3764},{},[3765],{"type":30,"value":3766},"纯性能指标很容易变成“工程师自嗨”。",{"type":24,"tag":43,"props":3768,"children":3769},{},[3770],{"type":30,"value":3771},"建议定义 1~3 个业务级指标：",{"type":24,"tag":271,"props":3773,"children":3774},{},[3775,3780,3793],{"type":24,"tag":275,"props":3776,"children":3777},{},[3778],{"type":30,"value":3779},"首次有效交互时间（例如搜索可用、下单可点）",{"type":24,"tag":275,"props":3781,"children":3782},{},[3783,3785,3791],{"type":30,"value":3784},"首次关键接口完成（例如 ",{"type":24,"tag":529,"props":3786,"children":3788},{"className":3787},[],[3789],{"type":30,"value":3790},"/api/me",{"type":30,"value":3792}," 完成）",{"type":24,"tag":275,"props":3794,"children":3795},{},[3796],{"type":30,"value":3797},"转化漏斗关键点耗时（例如“加入购物车”到“支付成功”）",{"type":24,"tag":43,"props":3799,"children":3800},{},[3801],{"type":30,"value":3802},"这些指标让你能回答：",{"type":24,"tag":271,"props":3804,"children":3805},{},[3806],{"type":24,"tag":275,"props":3807,"children":3808},{},[3809],{"type":30,"value":3810},"“慢 200ms 对业务有没有影响？”",{"type":24,"tag":2671,"props":3812,"children":3813},{},[],{"type":24,"tag":25,"props":3815,"children":3817},{"id":3816},"_3-采样策略rum-成败的-50",[3818],{"type":30,"value":3819},"3. 采样策略：RUM 成败的 50%",{"type":24,"tag":43,"props":3821,"children":3822},{},[3823],{"type":30,"value":3824},"RUM 的难点不是“能不能采”，而是“采多少、怎么采、怎么省钱”。",{"type":24,"tag":37,"props":3826,"children":3828},{"id":3827},"_31-两种采样会话采样-vs-事件采样",[3829],{"type":30,"value":3830},"3.1 两种采样：会话采样 vs 事件采样",{"type":24,"tag":271,"props":3832,"children":3833},{},[3834,3857],{"type":24,"tag":275,"props":3835,"children":3836},{},[3837,3842,3844],{"type":24,"tag":260,"props":3838,"children":3839},{},[3840],{"type":30,"value":3841},"会话采样",{"type":30,"value":3843},"：进入站点就决定该会话是否采集全部指标",{"type":24,"tag":271,"props":3845,"children":3846},{},[3847,3852],{"type":24,"tag":275,"props":3848,"children":3849},{},[3850],{"type":30,"value":3851},"优点：链路完整、便于归因",{"type":24,"tag":275,"props":3853,"children":3854},{},[3855],{"type":30,"value":3856},"缺点：成本高",{"type":24,"tag":275,"props":3858,"children":3859},{},[3860,3865,3867],{"type":24,"tag":260,"props":3861,"children":3862},{},[3863],{"type":30,"value":3864},"事件采样",{"type":30,"value":3866},"：每种事件独立采样（例如性能 10%、错误 100%）",{"type":24,"tag":271,"props":3868,"children":3869},{},[3870,3875],{"type":24,"tag":275,"props":3871,"children":3872},{},[3873],{"type":30,"value":3874},"优点：更灵活",{"type":24,"tag":275,"props":3876,"children":3877},{},[3878],{"type":30,"value":3879},"缺点：同一会话数据不完整",{"type":24,"tag":43,"props":3881,"children":3882},{},[3883],{"type":30,"value":3884},"生产建议：两者结合。",{"type":24,"tag":37,"props":3886,"children":3888},{"id":3887},"_32-分层采样建议",[3889],{"type":30,"value":3890},"3.2 分层采样建议",{"type":24,"tag":43,"props":3892,"children":3893},{},[3894],{"type":30,"value":3895},"一个可用的默认配置：",{"type":24,"tag":271,"props":3897,"children":3898},{},[3899,3904,3909],{"type":24,"tag":275,"props":3900,"children":3901},{},[3902],{"type":30,"value":3903},"性能指标：10%（按会话）",{"type":24,"tag":275,"props":3905,"children":3906},{},[3907],{"type":30,"value":3908},"错误指标：100%（或至少 50%）",{"type":24,"tag":275,"props":3910,"children":3911},{},[3912],{"type":30,"value":3913},"关键交易链路：100%（只对“完成交易”的会话上报完整链路）",{"type":24,"tag":37,"props":3915,"children":3917},{"id":3916},"_33-动态采样用预算来管理",[3918],{"type":30,"value":3919},"3.3 动态采样：用“预算”来管理",{"type":24,"tag":43,"props":3921,"children":3922},{},[3923],{"type":30,"value":3924},"你可以给 RUM 设预算：",{"type":24,"tag":271,"props":3926,"children":3927},{},[3928,3933],{"type":24,"tag":275,"props":3929,"children":3930},{},[3931],{"type":30,"value":3932},"每日上报不超过 N 条",{"type":24,"tag":275,"props":3934,"children":3935},{},[3936],{"type":30,"value":3937},"每秒不超过 M 条",{"type":24,"tag":43,"props":3939,"children":3940},{},[3941],{"type":30,"value":3942},"当超预算时：",{"type":24,"tag":271,"props":3944,"children":3945},{},[3946,3951],{"type":24,"tag":275,"props":3947,"children":3948},{},[3949],{"type":30,"value":3950},"降低非关键事件采样率",{"type":24,"tag":275,"props":3952,"children":3953},{},[3954],{"type":30,"value":3955},"只保留异常事件（例如 LCP > 4s）",{"type":24,"tag":2671,"props":3957,"children":3958},{},[],{"type":24,"tag":25,"props":3960,"children":3962},{"id":3961},"_4-客户端采集指标怎么拿",[3963],{"type":30,"value":3964},"4. 客户端采集：指标怎么拿？",{"type":24,"tag":37,"props":3966,"children":3968},{"id":3967},"_41-web-vitals-指标",[3969],{"type":30,"value":3970},"4.1 Web Vitals 指标",{"type":24,"tag":43,"props":3972,"children":3973},{},[3974],{"type":30,"value":3975},"现代浏览器提供了可观测入口：",{"type":24,"tag":271,"props":3977,"children":3978},{},[3979,3988],{"type":24,"tag":275,"props":3980,"children":3981},{},[3982],{"type":24,"tag":529,"props":3983,"children":3985},{"className":3984},[],[3986],{"type":30,"value":3987},"PerformanceObserver",{"type":24,"tag":275,"props":3989,"children":3990},{},[3991],{"type":24,"tag":529,"props":3992,"children":3994},{"className":3993},[],[3995],{"type":30,"value":3996},"performance.getEntriesByType()",{"type":24,"tag":43,"props":3998,"children":3999},{},[4000],{"type":30,"value":4001},"你可以使用社区实现（例如 web-vitals 思路），但要明确：",{"type":24,"tag":271,"props":4003,"children":4004},{},[4005,4010],{"type":24,"tag":275,"props":4006,"children":4007},{},[4008],{"type":30,"value":4009},"指标口径要固定（同一页面、同一版本）",{"type":24,"tag":275,"props":4011,"children":4012},{},[4013],{"type":30,"value":4014},"不同浏览器差异要做兼容",{"type":24,"tag":37,"props":4016,"children":4018},{"id":4017},"_42-上下文context是-rum-的灵魂",[4019],{"type":30,"value":4020},"4.2 上下文（Context）是 RUM 的灵魂",{"type":24,"tag":43,"props":4022,"children":4023},{},[4024,4026,4032],{"type":30,"value":4025},"只上报 ",{"type":24,"tag":529,"props":4027,"children":4029},{"className":4028},[],[4030],{"type":30,"value":4031},"LCP=2500ms",{"type":30,"value":4033}," 没意义。",{"type":24,"tag":43,"props":4035,"children":4036},{},[4037],{"type":30,"value":4038},"你至少需要这些维度：",{"type":24,"tag":271,"props":4040,"children":4041},{},[4042,4068,4081,4106,4131,4156],{"type":24,"tag":275,"props":4043,"children":4044},{},[4045,4047,4053,4055,4061,4062],{"type":30,"value":4046},"页面：",{"type":24,"tag":529,"props":4048,"children":4050},{"className":4049},[],[4051],{"type":30,"value":4052},"path",{"type":30,"value":4054},", ",{"type":24,"tag":529,"props":4056,"children":4058},{"className":4057},[],[4059],{"type":30,"value":4060},"routeName",{"type":30,"value":4054},{"type":24,"tag":529,"props":4063,"children":4065},{"className":4064},[],[4066],{"type":30,"value":4067},"referrer",{"type":24,"tag":275,"props":4069,"children":4070},{},[4071,4073,4079],{"type":30,"value":4072},"用户：匿名 ",{"type":24,"tag":529,"props":4074,"children":4076},{"className":4075},[],[4077],{"type":30,"value":4078},"userIdHash",{"type":30,"value":4080},"（可选）",{"type":24,"tag":275,"props":4082,"children":4083},{},[4084,4086,4092,4093,4099,4100],{"type":30,"value":4085},"设备：",{"type":24,"tag":529,"props":4087,"children":4089},{"className":4088},[],[4090],{"type":30,"value":4091},"deviceMemory",{"type":30,"value":4054},{"type":24,"tag":529,"props":4094,"children":4096},{"className":4095},[],[4097],{"type":30,"value":4098},"hardwareConcurrency",{"type":30,"value":4054},{"type":24,"tag":529,"props":4101,"children":4103},{"className":4102},[],[4104],{"type":30,"value":4105},"viewport",{"type":24,"tag":275,"props":4107,"children":4108},{},[4109,4111,4117,4118,4124,4125],{"type":30,"value":4110},"网络：",{"type":24,"tag":529,"props":4112,"children":4114},{"className":4113},[],[4115],{"type":30,"value":4116},"effectiveType",{"type":30,"value":4054},{"type":24,"tag":529,"props":4119,"children":4121},{"className":4120},[],[4122],{"type":30,"value":4123},"rtt",{"type":30,"value":4054},{"type":24,"tag":529,"props":4126,"children":4128},{"className":4127},[],[4129],{"type":30,"value":4130},"downlink",{"type":24,"tag":275,"props":4132,"children":4133},{},[4134,4136,4142,4143,4149,4150],{"type":30,"value":4135},"版本：",{"type":24,"tag":529,"props":4137,"children":4139},{"className":4138},[],[4140],{"type":30,"value":4141},"appVersion",{"type":30,"value":4054},{"type":24,"tag":529,"props":4144,"children":4146},{"className":4145},[],[4147],{"type":30,"value":4148},"buildId",{"type":30,"value":4054},{"type":24,"tag":529,"props":4151,"children":4153},{"className":4152},[],[4154],{"type":30,"value":4155},"commitSha",{"type":24,"tag":275,"props":4157,"children":4158},{},[4159,4161,4167,4168,4174,4175],{"type":30,"value":4160},"环境：",{"type":24,"tag":529,"props":4162,"children":4164},{"className":4163},[],[4165],{"type":30,"value":4166},"prod/staging",{"type":30,"value":4054},{"type":24,"tag":529,"props":4169,"children":4171},{"className":4170},[],[4172],{"type":30,"value":4173},"region",{"type":30,"value":4054},{"type":24,"tag":529,"props":4176,"children":4178},{"className":4177},[],[4179],{"type":30,"value":4180},"cdnPop",{"type":24,"tag":43,"props":4182,"children":4183},{},[4184],{"type":30,"value":4185},"这些字段必须：",{"type":24,"tag":271,"props":4187,"children":4188},{},[4189,4194],{"type":24,"tag":275,"props":4190,"children":4191},{},[4192],{"type":30,"value":4193},"控制体积（短字段名/枚举）",{"type":24,"tag":275,"props":4195,"children":4196},{},[4197],{"type":30,"value":4198},"可被服务器校验（防伪造污染）",{"type":24,"tag":2671,"props":4200,"children":4201},{},[],{"type":24,"tag":25,"props":4203,"children":4205},{"id":4204},"_5-上报链路可靠性与性能不能两头都丢",[4206],{"type":30,"value":4207},"5. 上报链路：可靠性与性能不能两头都丢",{"type":24,"tag":37,"props":4209,"children":4211},{"id":4210},"_51-传输优先-sendbeacon降级到-fetchkeepalive",[4212,4214,4220,4222],{"type":30,"value":4213},"5.1 传输：优先 ",{"type":24,"tag":529,"props":4215,"children":4217},{"className":4216},[],[4218],{"type":30,"value":4219},"sendBeacon",{"type":30,"value":4221},"，降级到 ",{"type":24,"tag":529,"props":4223,"children":4225},{"className":4224},[],[4226],{"type":30,"value":4227},"fetch(keepalive)",{"type":24,"tag":271,"props":4229,"children":4230},{},[4231,4243],{"type":24,"tag":275,"props":4232,"children":4233},{},[4234,4236,4241],{"type":30,"value":4235},"页面卸载时 ",{"type":24,"tag":529,"props":4237,"children":4239},{"className":4238},[],[4240],{"type":30,"value":4219},{"type":30,"value":4242}," 更可靠",{"type":24,"tag":275,"props":4244,"children":4245},{},[4246,4248],{"type":30,"value":4247},"非卸载场景可用批量 ",{"type":24,"tag":529,"props":4249,"children":4251},{"className":4250},[],[4252],{"type":30,"value":4253},"fetch",{"type":24,"tag":37,"props":4255,"children":4257},{"id":4256},"_52-批量与压缩",[4258],{"type":30,"value":4259},"5.2 批量与压缩",{"type":24,"tag":43,"props":4261,"children":4262},{},[4263],{"type":30,"value":3137},{"type":24,"tag":271,"props":4265,"children":4266},{},[4267,4272,4277],{"type":24,"tag":275,"props":4268,"children":4269},{},[4270],{"type":30,"value":4271},"以 5~20 条为一个 batch",{"type":24,"tag":275,"props":4273,"children":4274},{},[4275],{"type":30,"value":4276},"gzip/br 压缩（服务器支持）",{"type":24,"tag":275,"props":4278,"children":4279},{},[4280],{"type":30,"value":4281},"限制 payload 大小（例如 \u003C 64KB）",{"type":24,"tag":37,"props":4283,"children":4285},{"id":4284},"_53-去重与重试",[4286],{"type":30,"value":4287},"5.3 去重与重试",{"type":24,"tag":271,"props":4289,"children":4290},{},[4291,4302,4314],{"type":24,"tag":275,"props":4292,"children":4293},{},[4294,4296],{"type":30,"value":4295},"给每条事件生成 ",{"type":24,"tag":529,"props":4297,"children":4299},{"className":4298},[],[4300],{"type":30,"value":4301},"eventId",{"type":24,"tag":275,"props":4303,"children":4304},{},[4305,4307,4312],{"type":30,"value":4306},"服务端按 ",{"type":24,"tag":529,"props":4308,"children":4310},{"className":4309},[],[4311],{"type":30,"value":4301},{"type":30,"value":4313}," 去重",{"type":24,"tag":275,"props":4315,"children":4316},{},[4317],{"type":30,"value":4318},"客户端失败重试次数有限（例如 2 次）",{"type":24,"tag":37,"props":4320,"children":4322},{"id":4321},"_54-采集对页面的影响",[4323],{"type":30,"value":4324},"5.4 采集对页面的影响",{"type":24,"tag":43,"props":4326,"children":4327},{},[4328],{"type":30,"value":4329},"RUM 本身不能成为性能负担。",{"type":24,"tag":43,"props":4331,"children":4332},{},[4333],{"type":30,"value":3219},{"type":24,"tag":271,"props":4335,"children":4336},{},[4337,4350,4355],{"type":24,"tag":275,"props":4338,"children":4339},{},[4340,4342,4348],{"type":30,"value":4341},"采集计算尽量放在 idle（",{"type":24,"tag":529,"props":4343,"children":4345},{"className":4344},[],[4346],{"type":30,"value":4347},"requestIdleCallback",{"type":30,"value":4349},"）",{"type":24,"tag":275,"props":4351,"children":4352},{},[4353],{"type":30,"value":4354},"上报放在后台、批量",{"type":24,"tag":275,"props":4356,"children":4357},{},[4358],{"type":30,"value":4359},"SDK 初始化延后（首屏后）",{"type":24,"tag":2671,"props":4361,"children":4362},{},[],{"type":24,"tag":25,"props":4364,"children":4366},{"id":4365},"_6-事件模型与数据建模决定你能不能分析",[4367],{"type":30,"value":4368},"6. 事件模型与数据建模：决定你能不能分析",{"type":24,"tag":37,"props":4370,"children":4372},{"id":4371},"_61-事件类型event-types",[4373],{"type":30,"value":4374},"6.1 事件类型（Event Types）",{"type":24,"tag":43,"props":4376,"children":4377},{},[4378],{"type":30,"value":4379},"建议至少定义：",{"type":24,"tag":271,"props":4381,"children":4382},{},[4383,4392,4401,4410,4419,4428],{"type":24,"tag":275,"props":4384,"children":4385},{},[4386],{"type":24,"tag":529,"props":4387,"children":4389},{"className":4388},[],[4390],{"type":30,"value":4391},"page_view",{"type":24,"tag":275,"props":4393,"children":4394},{},[4395],{"type":24,"tag":529,"props":4396,"children":4398},{"className":4397},[],[4399],{"type":30,"value":4400},"web_vitals",{"type":24,"tag":275,"props":4402,"children":4403},{},[4404],{"type":24,"tag":529,"props":4405,"children":4407},{"className":4406},[],[4408],{"type":30,"value":4409},"resource_timing",{"type":24,"tag":275,"props":4411,"children":4412},{},[4413],{"type":24,"tag":529,"props":4414,"children":4416},{"className":4415},[],[4417],{"type":30,"value":4418},"long_task",{"type":24,"tag":275,"props":4420,"children":4421},{},[4422],{"type":24,"tag":529,"props":4423,"children":4425},{"className":4424},[],[4426],{"type":30,"value":4427},"js_error",{"type":24,"tag":275,"props":4429,"children":4430},{},[4431,4437],{"type":24,"tag":529,"props":4432,"children":4434},{"className":4433},[],[4435],{"type":30,"value":4436},"api_timing",{"type":30,"value":4438},"（业务关键接口）",{"type":24,"tag":43,"props":4440,"children":4441},{},[4442],{"type":30,"value":4443},"每种事件都有“必填字段”和“可选字段”。",{"type":24,"tag":37,"props":4445,"children":4447},{"id":4446},"_62-存储建模宽表-明细表",[4448],{"type":30,"value":4449},"6.2 存储建模：宽表 + 明细表",{"type":24,"tag":43,"props":4451,"children":4452},{},[4453],{"type":30,"value":4454},"常见两种设计：",{"type":24,"tag":271,"props":4456,"children":4457},{},[4458,4463],{"type":24,"tag":275,"props":4459,"children":4460},{},[4461],{"type":30,"value":4462},"宽表（便于查询）：把常用字段打平",{"type":24,"tag":275,"props":4464,"children":4465},{},[4466],{"type":30,"value":4467},"明细表（便于追踪）：存完整 payload（可选）",{"type":24,"tag":43,"props":4469,"children":4470},{},[4471],{"type":30,"value":4472},"一个可落地的折中：",{"type":24,"tag":271,"props":4474,"children":4475},{},[4476,4488],{"type":24,"tag":275,"props":4477,"children":4478},{},[4479,4481,4486],{"type":30,"value":4480},"以 ",{"type":24,"tag":529,"props":4482,"children":4484},{"className":4483},[],[4485],{"type":30,"value":4400},{"type":30,"value":4487}," 为核心宽表（用于大盘/SLO）",{"type":24,"tag":275,"props":4489,"children":4490},{},[4491,4492,4498],{"type":30,"value":4480},{"type":24,"tag":529,"props":4493,"children":4495},{"className":4494},[],[4496],{"type":30,"value":4497},"session_trace",{"type":30,"value":4499}," 为明细表（只对采样会话存）",{"type":24,"tag":37,"props":4501,"children":4503},{"id":4502},"_63-聚合口径p75p90p95p99",[4504],{"type":30,"value":4505},"6.3 聚合口径：p75/p90/p95/p99",{"type":24,"tag":43,"props":4507,"children":4508},{},[4509],{"type":30,"value":4510},"RUM 的统计不要只用平均值。",{"type":24,"tag":43,"props":4512,"children":4513},{},[4514],{"type":30,"value":4515},"推荐：",{"type":24,"tag":271,"props":4517,"children":4518},{},[4519,4524],{"type":24,"tag":275,"props":4520,"children":4521},{},[4522],{"type":30,"value":4523},"p75：更贴近“多数用户体验”",{"type":24,"tag":275,"props":4525,"children":4526},{},[4527],{"type":30,"value":4528},"p95/p99：定位极端慢问题",{"type":24,"tag":43,"props":4530,"children":4531},{},[4532],{"type":30,"value":4533},"对于 Web Vitals，Google 口径常用 p75。",{"type":24,"tag":2671,"props":4535,"children":4536},{},[],{"type":24,"tag":25,"props":4538,"children":4540},{"id":4539},"_7-分析维度怎么做到可定位",[4541],{"type":30,"value":4542},"7. 分析维度：怎么做到“可定位”？",{"type":24,"tag":43,"props":4544,"children":4545},{},[4546],{"type":30,"value":4547},"可定位的关键在于“维度设计”。",{"type":24,"tag":43,"props":4549,"children":4550},{},[4551],{"type":30,"value":4552},"建议固定一套常用切片：",{"type":24,"tag":271,"props":4554,"children":4555},{},[4556,4561,4566,4571,4576,4581],{"type":24,"tag":275,"props":4557,"children":4558},{},[4559],{"type":30,"value":4560},"页面（路由）",{"type":24,"tag":275,"props":4562,"children":4563},{},[4564],{"type":30,"value":4565},"地区/运营商",{"type":24,"tag":275,"props":4567,"children":4568},{},[4569],{"type":30,"value":4570},"设备档位（内存/CPU 核数分桶）",{"type":24,"tag":275,"props":4572,"children":4573},{},[4574],{"type":30,"value":4575},"网络（4g/3g/slow-4g）",{"type":24,"tag":275,"props":4577,"children":4578},{},[4579],{"type":30,"value":4580},"版本（最近 10 个 buildId）",{"type":24,"tag":275,"props":4582,"children":4583},{},[4584],{"type":30,"value":4585},"入口来源（referrer/channel）",{"type":24,"tag":43,"props":4587,"children":4588},{},[4589],{"type":30,"value":4590},"注意：维度越多，成本越高。",{"type":24,"tag":43,"props":4592,"children":4593},{},[4594],{"type":30,"value":4595},"实践做法：",{"type":24,"tag":271,"props":4597,"children":4598},{},[4599,4604],{"type":24,"tag":275,"props":4600,"children":4601},{},[4602],{"type":30,"value":4603},"维度字段做枚举/分桶",{"type":24,"tag":275,"props":4605,"children":4606},{},[4607],{"type":30,"value":4608},"对长尾维度做 Top N",{"type":24,"tag":2671,"props":4610,"children":4611},{},[],{"type":24,"tag":25,"props":4613,"children":4615},{"id":4614},"_8-告警与-slo让-rum-成为系统",[4616],{"type":30,"value":4617},"8. 告警与 SLO：让 RUM 成为“系统”",{"type":24,"tag":37,"props":4619,"children":4621},{"id":4620},"_81-slo-的定义",[4622],{"type":30,"value":4623},"8.1 SLO 的定义",{"type":24,"tag":43,"props":4625,"children":4626},{},[4627],{"type":30,"value":4628},"示例：",{"type":24,"tag":271,"props":4630,"children":4631},{},[4632,4637,4642],{"type":24,"tag":275,"props":4633,"children":4634},{},[4635],{"type":30,"value":4636},"过去 1 天内，p75 LCP \u003C 2500ms",{"type":24,"tag":275,"props":4638,"children":4639},{},[4640],{"type":30,"value":4641},"过去 1 天内，p75 INP \u003C 200ms",{"type":24,"tag":275,"props":4643,"children":4644},{},[4645],{"type":30,"value":4646},"过去 1 天内，CLS p75 \u003C 0.1",{"type":24,"tag":37,"props":4648,"children":4650},{"id":4649},"_82-告警规则",[4651],{"type":30,"value":4652},"8.2 告警规则",{"type":24,"tag":43,"props":4654,"children":4655},{},[4656],{"type":30,"value":4657},"建议用“双阈值”防抖：",{"type":24,"tag":271,"props":4659,"children":4660},{},[4661,4666],{"type":24,"tag":275,"props":4662,"children":4663},{},[4664],{"type":30,"value":4665},"5 分钟窗口连续超阈值",{"type":24,"tag":275,"props":4667,"children":4668},{},[4669],{"type":30,"value":4670},"且样本量 > 最小值（例如 300）",{"type":24,"tag":37,"props":4672,"children":4674},{"id":4673},"_83-回归检测",[4675],{"type":30,"value":4676},"8.3 回归检测",{"type":24,"tag":43,"props":4678,"children":4679},{},[4680],{"type":30,"value":4681},"把版本作为维度：",{"type":24,"tag":271,"props":4683,"children":4684},{},[4685,4690],{"type":24,"tag":275,"props":4686,"children":4687},{},[4688],{"type":30,"value":4689},"新版本的 p75 INP 相比上版本恶化 > 15%",{"type":24,"tag":275,"props":4691,"children":4692},{},[4693],{"type":30,"value":4694},"触发告警并附带“top 页面 / top 设备 / top 地区”",{"type":24,"tag":2671,"props":4696,"children":4697},{},[],{"type":24,"tag":25,"props":4699,"children":4701},{"id":4700},"_9-隐私与合规你必须提前做的约束",[4702],{"type":30,"value":4703},"9. 隐私与合规：你必须提前做的约束",{"type":24,"tag":271,"props":4705,"children":4706},{},[4707,4712,4717,4722],{"type":24,"tag":275,"props":4708,"children":4709},{},[4710],{"type":30,"value":4711},"禁止上报 PII（手机号、邮箱、身份证等）",{"type":24,"tag":275,"props":4713,"children":4714},{},[4715],{"type":30,"value":4716},"URL 中 query/fragment 需要脱敏",{"type":24,"tag":275,"props":4718,"children":4719},{},[4720],{"type":30,"value":4721},"事件 payload 做字段白名单",{"type":24,"tag":275,"props":4723,"children":4724},{},[4725],{"type":30,"value":4726},"允许用户 opt-out（尤其是欧盟地区）",{"type":24,"tag":43,"props":4728,"children":4729},{},[4730],{"type":30,"value":4731},"如果产品面向多地区，建议把合规当成“需求”，不是“上线前检查”。",{"type":24,"tag":2671,"props":4733,"children":4734},{},[],{"type":24,"tag":25,"props":4736,"children":4738},{"id":4737},"_10-最小可用方案mvp建议",[4739],{"type":30,"value":4740},"10. 最小可用方案（MVP）建议",{"type":24,"tag":43,"props":4742,"children":4743},{},[4744],{"type":30,"value":4745},"如果你要在 1~2 周内把 RUM 跑起来：",{"type":24,"tag":1436,"props":4747,"children":4748},{},[4749,4754,4759,4764],{"type":24,"tag":275,"props":4750,"children":4751},{},[4752],{"type":30,"value":4753},"先采：page_view + web_vitals + js_error",{"type":24,"tag":275,"props":4755,"children":4756},{},[4757],{"type":30,"value":4758},"先做：按路由维度的大盘（p75）",{"type":24,"tag":275,"props":4760,"children":4761},{},[4762],{"type":30,"value":4763},"再做：版本对比（回归检测）",{"type":24,"tag":275,"props":4765,"children":4766},{},[4767],{"type":30,"value":4768},"最后做：会话 trace（定位长尾）",{"type":24,"tag":2671,"props":4770,"children":4771},{},[],{"type":24,"tag":25,"props":4773,"children":4774},{"id":2424},[4775],{"type":30,"value":2424},{"type":24,"tag":43,"props":4777,"children":4778},{},[4779],{"type":30,"value":4780},"RUM 的关键不是 SDK，而是：",{"type":24,"tag":271,"props":4782,"children":4783},{},[4784,4789,4794,4799,4804],{"type":24,"tag":275,"props":4785,"children":4786},{},[4787],{"type":30,"value":4788},"指标体系与业务目标绑定",{"type":24,"tag":275,"props":4790,"children":4791},{},[4792],{"type":30,"value":4793},"采样与预算控制成本",{"type":24,"tag":275,"props":4795,"children":4796},{},[4797],{"type":30,"value":4798},"上报可靠且不影响性能",{"type":24,"tag":275,"props":4800,"children":4801},{},[4802],{"type":30,"value":4803},"数据建模支持切片与聚合",{"type":24,"tag":275,"props":4805,"children":4806},{},[4807],{"type":30,"value":4808},"告警/SLO 能闭环",{"title":7,"searchDepth":2538,"depth":2538,"links":4810},[4811,4812,4813,4817,4822,4826,4833,4838,4839,4844,4845,4846],{"id":3536,"depth":2541,"text":3524},{"id":3624,"depth":2541,"text":3627},{"id":3690,"depth":2541,"text":3693,"children":4814},[4815,4816],{"id":3696,"depth":2538,"text":3699},{"id":3758,"depth":2538,"text":3761},{"id":3816,"depth":2541,"text":3819,"children":4818},[4819,4820,4821],{"id":3827,"depth":2538,"text":3830},{"id":3887,"depth":2538,"text":3890},{"id":3916,"depth":2538,"text":3919},{"id":3961,"depth":2541,"text":3964,"children":4823},[4824,4825],{"id":3967,"depth":2538,"text":3970},{"id":4017,"depth":2538,"text":4020},{"id":4204,"depth":2541,"text":4207,"children":4827},[4828,4830,4831,4832],{"id":4210,"depth":2538,"text":4829},"5.1 传输：优先 sendBeacon，降级到 fetch(keepalive)",{"id":4256,"depth":2538,"text":4259},{"id":4284,"depth":2538,"text":4287},{"id":4321,"depth":2538,"text":4324},{"id":4365,"depth":2541,"text":4368,"children":4834},[4835,4836,4837],{"id":4371,"depth":2538,"text":4374},{"id":4446,"depth":2538,"text":4449},{"id":4502,"depth":2538,"text":4505},{"id":4539,"depth":2541,"text":4542},{"id":4614,"depth":2541,"text":4617,"children":4840},[4841,4842,4843],{"id":4620,"depth":2538,"text":4623},{"id":4649,"depth":2538,"text":4652},{"id":4673,"depth":2538,"text":4676},{"id":4700,"depth":2541,"text":4703},{"id":4737,"depth":2541,"text":4740},{"id":2424,"depth":2541,"text":2424},"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":4851,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":4852,"description":4853,"date":4854,"topic":5,"author":11,"tags":4855,"image":4859,"featured":18,"readingTime":4860,"body":4861,"_type":2571,"_id":5773,"_source":2573,"_file":5774,"_stem":5775,"_extension":2576},"/topics/performance/core-web-vitals-2026-guide","Core Web Vitals 2026 新标准解读：INP 时代的性能优化策略","全面解读 2026 年 Core Web Vitals 的重大变化，深入分析 INP 取代 FID 的技术背景、测量方法与优化策略，帮助开发者适应新的性能评估体系。","2026-01-15",[16,4856,13,4857,4858],"INP","Web 性能","Google 排名","/images/topics/core-web-vitals-2026.jpg",15,{"type":21,"children":4862,"toc":5732},[4863,4869,4875,4887,4893,4901,4975,4983,4991,4997,5143,5149,5155,5167,5176,5184,5202,5208,5213,5222,5228,5233,5241,5247,5253,5262,5268,5279,5285,5294,5300,5306,5311,5372,5381,5387,5397,5402,5411,5417,5422,5431,5437,5446,5452,5461,5467,5476,5482,5488,5497,5503,5512,5517,5523,5528,5536,5544,5562,5567,5576,5580,5585,5590,5648,5653,5676,5681],{"type":24,"tag":25,"props":4864,"children":4866},{"id":4865},"core-web-vitals-2026-新标准解读",[4867],{"type":30,"value":4868},"Core Web Vitals 2026 新标准解读",{"type":24,"tag":25,"props":4870,"children":4872},{"id":4871},"_2026-年的重大变化inp-正式取代-fid",[4873],{"type":30,"value":4874},"2026 年的重大变化：INP 正式取代 FID",{"type":24,"tag":43,"props":4876,"children":4877},{},[4878,4880,4885],{"type":30,"value":4879},"2024 年 3 月，Google 正式宣布 ",{"type":24,"tag":260,"props":4881,"children":4882},{},[4883],{"type":30,"value":4884},"INP（Interaction to Next Paint）",{"type":30,"value":4886}," 取代 FID（First Input Delay）成为 Core Web Vitals 的核心指标。经过两年的过渡期，2026 年 INP 已完全成为搜索排名的重要因素。",{"type":24,"tag":37,"props":4888,"children":4890},{"id":4889},"为什么要替换-fid",[4891],{"type":30,"value":4892},"为什么要替换 FID？",{"type":24,"tag":43,"props":4894,"children":4895},{},[4896],{"type":24,"tag":260,"props":4897,"children":4898},{},[4899],{"type":30,"value":4900},"FID 的局限性：",{"type":24,"tag":64,"props":4902,"children":4903},{},[4904,4920],{"type":24,"tag":68,"props":4905,"children":4906},{},[4907],{"type":24,"tag":72,"props":4908,"children":4909},{},[4910,4915],{"type":24,"tag":76,"props":4911,"children":4912},{},[4913],{"type":30,"value":4914},"问题",{"type":24,"tag":76,"props":4916,"children":4917},{},[4918],{"type":30,"value":4919},"说明",{"type":24,"tag":97,"props":4921,"children":4922},{},[4923,4936,4949,4962],{"type":24,"tag":72,"props":4924,"children":4925},{},[4926,4931],{"type":24,"tag":104,"props":4927,"children":4928},{},[4929],{"type":30,"value":4930},"只测量首次交互",{"type":24,"tag":104,"props":4932,"children":4933},{},[4934],{"type":30,"value":4935},"忽略后续所有交互的延迟",{"type":24,"tag":72,"props":4937,"children":4938},{},[4939,4944],{"type":24,"tag":104,"props":4940,"children":4941},{},[4942],{"type":30,"value":4943},"只测量输入延迟",{"type":24,"tag":104,"props":4945,"children":4946},{},[4947],{"type":30,"value":4948},"不包含事件处理和渲染时间",{"type":24,"tag":72,"props":4950,"children":4951},{},[4952,4957],{"type":24,"tag":104,"props":4953,"children":4954},{},[4955],{"type":30,"value":4956},"样本偏差",{"type":24,"tag":104,"props":4958,"children":4959},{},[4960],{"type":30,"value":4961},"某些用户可能永远不触发交互",{"type":24,"tag":72,"props":4963,"children":4964},{},[4965,4970],{"type":24,"tag":104,"props":4966,"children":4967},{},[4968],{"type":30,"value":4969},"无法反映真实体验",{"type":24,"tag":104,"props":4971,"children":4972},{},[4973],{"type":30,"value":4974},"首次交互可能很快，但后续很慢",{"type":24,"tag":43,"props":4976,"children":4977},{},[4978],{"type":24,"tag":260,"props":4979,"children":4980},{},[4981],{"type":30,"value":4982},"INP 的优势：",{"type":24,"tag":524,"props":4984,"children":4986},{"code":4985},"FID 测量范围：\n┌──────────────────────────────────────────────────┐\n│ 用户点击 → 浏览器开始处理 │ FID 结束 │\n│ ▼ ▼ │ │\n│ [===========] │ │\n│ 只测这一段 │ │\n└──────────────────────────────────────────────────┘\n\nINP 测量范围：\n┌──────────────────────────────────────────────────┐\n│ 用户点击 → 处理事件 → 渲染完成 │ INP 结束 │\n│ ▼ ▼ ▼ │ │\n│ [================================] │\n│ 完整的交互响应时间 │\n└──────────────────────────────────────────────────┘\n",[4987],{"type":24,"tag":529,"props":4988,"children":4989},{"__ignoreMap":7},[4990],{"type":30,"value":4985},{"type":24,"tag":37,"props":4992,"children":4994},{"id":4993},"_2026-年-core-web-vitals-完整指标体系",[4995],{"type":30,"value":4996},"2026 年 Core Web Vitals 完整指标体系",{"type":24,"tag":64,"props":4998,"children":4999},{},[5000,5035],{"type":24,"tag":68,"props":5001,"children":5002},{},[5003],{"type":24,"tag":72,"props":5004,"children":5005},{},[5006,5010,5015,5020,5025,5030],{"type":24,"tag":76,"props":5007,"children":5008},{},[5009],{"type":30,"value":80},{"type":24,"tag":76,"props":5011,"children":5012},{},[5013],{"type":30,"value":5014},"全称",{"type":24,"tag":76,"props":5016,"children":5017},{},[5018],{"type":30,"value":5019},"测量内容",{"type":24,"tag":76,"props":5021,"children":5022},{},[5023],{"type":30,"value":5024},"良好阈值",{"type":24,"tag":76,"props":5026,"children":5027},{},[5028],{"type":30,"value":5029},"需改进",{"type":24,"tag":76,"props":5031,"children":5032},{},[5033],{"type":30,"value":5034},"差",{"type":24,"tag":97,"props":5036,"children":5037},{},[5038,5073,5108],{"type":24,"tag":72,"props":5039,"children":5040},{},[5041,5048,5053,5058,5063,5068],{"type":24,"tag":104,"props":5042,"children":5043},{},[5044],{"type":24,"tag":260,"props":5045,"children":5046},{},[5047],{"type":30,"value":1067},{"type":24,"tag":104,"props":5049,"children":5050},{},[5051],{"type":30,"value":5052},"Largest Contentful Paint",{"type":24,"tag":104,"props":5054,"children":5055},{},[5056],{"type":30,"value":5057},"最大内容绘制时间",{"type":24,"tag":104,"props":5059,"children":5060},{},[5061],{"type":30,"value":5062},"≤ 2.5s",{"type":24,"tag":104,"props":5064,"children":5065},{},[5066],{"type":30,"value":5067},"≤ 4s",{"type":24,"tag":104,"props":5069,"children":5070},{},[5071],{"type":30,"value":5072},"> 4s",{"type":24,"tag":72,"props":5074,"children":5075},{},[5076,5083,5088,5093,5098,5103],{"type":24,"tag":104,"props":5077,"children":5078},{},[5079],{"type":24,"tag":260,"props":5080,"children":5081},{},[5082],{"type":30,"value":4856},{"type":24,"tag":104,"props":5084,"children":5085},{},[5086],{"type":30,"value":5087},"Interaction to Next Paint",{"type":24,"tag":104,"props":5089,"children":5090},{},[5091],{"type":30,"value":5092},"交互到下一次绘制",{"type":24,"tag":104,"props":5094,"children":5095},{},[5096],{"type":30,"value":5097},"≤ 200ms",{"type":24,"tag":104,"props":5099,"children":5100},{},[5101],{"type":30,"value":5102},"≤ 500ms",{"type":24,"tag":104,"props":5104,"children":5105},{},[5106],{"type":30,"value":5107},"> 500ms",{"type":24,"tag":72,"props":5109,"children":5110},{},[5111,5118,5123,5128,5133,5138],{"type":24,"tag":104,"props":5112,"children":5113},{},[5114],{"type":24,"tag":260,"props":5115,"children":5116},{},[5117],{"type":30,"value":1945},{"type":24,"tag":104,"props":5119,"children":5120},{},[5121],{"type":30,"value":5122},"Cumulative Layout Shift",{"type":24,"tag":104,"props":5124,"children":5125},{},[5126],{"type":30,"value":5127},"累积布局偏移",{"type":24,"tag":104,"props":5129,"children":5130},{},[5131],{"type":30,"value":5132},"≤ 0.1",{"type":24,"tag":104,"props":5134,"children":5135},{},[5136],{"type":30,"value":5137},"≤ 0.25",{"type":24,"tag":104,"props":5139,"children":5140},{},[5141],{"type":30,"value":5142},"> 0.25",{"type":24,"tag":25,"props":5144,"children":5146},{"id":5145},"inp-深度解析",[5147],{"type":30,"value":5148},"INP 深度解析",{"type":24,"tag":37,"props":5150,"children":5152},{"id":5151},"inp-的计算方式",[5153],{"type":30,"value":5154},"INP 的计算方式",{"type":24,"tag":43,"props":5156,"children":5157},{},[5158,5160,5165],{"type":30,"value":5159},"INP 并非所有交互延迟的平均值，而是采用",{"type":24,"tag":260,"props":5161,"children":5162},{},[5163],{"type":30,"value":5164},"高百分位值",{"type":30,"value":5166},"策略：",{"type":24,"tag":524,"props":5168,"children":5171},{"code":5169,"language":932,"meta":7,"className":5170},"// 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",[934],[5172],{"type":24,"tag":529,"props":5173,"children":5174},{"__ignoreMap":7},[5175],{"type":30,"value":5169},{"type":24,"tag":43,"props":5177,"children":5178},{},[5179],{"type":24,"tag":260,"props":5180,"children":5181},{},[5182],{"type":30,"value":5183},"为什么选择高百分位而非平均值？",{"type":24,"tag":271,"props":5185,"children":5186},{},[5187,5192,5197],{"type":24,"tag":275,"props":5188,"children":5189},{},[5190],{"type":30,"value":5191},"平均值会被大量快速交互\"稀释\"",{"type":24,"tag":275,"props":5193,"children":5194},{},[5195],{"type":30,"value":5196},"用户对慢交互的感知更强烈",{"type":24,"tag":275,"props":5198,"children":5199},{},[5200],{"type":30,"value":5201},"高百分位更能反映\"最坏情况\"体验",{"type":24,"tag":37,"props":5203,"children":5205},{"id":5204},"什么算作一次交互",[5206],{"type":30,"value":5207},"什么算作一次交互？",{"type":24,"tag":43,"props":5209,"children":5210},{},[5211],{"type":30,"value":5212},"INP 追踪以下类型的交互：",{"type":24,"tag":524,"props":5214,"children":5217},{"code":5215,"language":932,"meta":7,"className":5216},"// 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",[934],[5218],{"type":24,"tag":529,"props":5219,"children":5220},{"__ignoreMap":7},[5221],{"type":30,"value":5215},{"type":24,"tag":37,"props":5223,"children":5225},{"id":5224},"inp-的三个阶段",[5226],{"type":30,"value":5227},"INP 的三个阶段",{"type":24,"tag":43,"props":5229,"children":5230},{},[5231],{"type":30,"value":5232},"一次完整的交互由三个阶段组成：",{"type":24,"tag":524,"props":5234,"children":5236},{"code":5235},"┌─────────────────────────────────────────────────────────────┐\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",[5237],{"type":24,"tag":529,"props":5238,"children":5239},{"__ignoreMap":7},[5240],{"type":30,"value":5235},{"type":24,"tag":25,"props":5242,"children":5244},{"id":5243},"测量-core-web-vitals",[5245],{"type":30,"value":5246},"测量 Core Web Vitals",{"type":24,"tag":37,"props":5248,"children":5250},{"id":5249},"使用-web-vitals-库",[5251],{"type":30,"value":5252},"使用 web-vitals 库",{"type":24,"tag":524,"props":5254,"children":5257},{"code":5255,"language":932,"meta":7,"className":5256},"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",[934],[5258],{"type":24,"tag":529,"props":5259,"children":5260},{"__ignoreMap":7},[5261],{"type":30,"value":5255},{"type":24,"tag":37,"props":5263,"children":5265},{"id":5264},"在-vuenuxt-中集成",[5266],{"type":30,"value":5267},"在 Vue/Nuxt 中集成",{"type":24,"tag":524,"props":5269,"children":5274},{"code":5270,"language":5271,"meta":7,"className":5272},"// 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",[5273],"language-typescript",[5275],{"type":24,"tag":529,"props":5276,"children":5277},{"__ignoreMap":7},[5278],{"type":30,"value":5270},{"type":24,"tag":37,"props":5280,"children":5282},{"id":5281},"在-nextjs-中集成",[5283],{"type":30,"value":5284},"在 Next.js 中集成",{"type":24,"tag":524,"props":5286,"children":5289},{"code":5287,"language":5271,"meta":7,"className":5288},"// 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",[5273],[5290],{"type":24,"tag":529,"props":5291,"children":5292},{"__ignoreMap":7},[5293],{"type":30,"value":5287},{"type":24,"tag":25,"props":5295,"children":5297},{"id":5296},"lcp-优化策略-2026",[5298],{"type":30,"value":5299},"LCP 优化策略 2026",{"type":24,"tag":37,"props":5301,"children":5303},{"id":5302},"lcp-元素识别",[5304],{"type":30,"value":5305},"LCP 元素识别",{"type":24,"tag":43,"props":5307,"children":5308},{},[5309],{"type":30,"value":5310},"LCP 候选元素类型：",{"type":24,"tag":271,"props":5312,"children":5313},{},[5314,5325,5343,5354,5367],{"type":24,"tag":275,"props":5315,"children":5316},{},[5317,5323],{"type":24,"tag":529,"props":5318,"children":5320},{"className":5319},[],[5321],{"type":30,"value":5322},"\u003Cimg>",{"type":30,"value":5324}," 元素",{"type":24,"tag":275,"props":5326,"children":5327},{},[5328,5334,5336,5342],{"type":24,"tag":529,"props":5329,"children":5331},{"className":5330},[],[5332],{"type":30,"value":5333},"\u003Csvg>",{"type":30,"value":5335}," 内的 ",{"type":24,"tag":529,"props":5337,"children":5339},{"className":5338},[],[5340],{"type":30,"value":5341},"\u003Cimage>",{"type":30,"value":5324},{"type":24,"tag":275,"props":5344,"children":5345},{},[5346,5352],{"type":24,"tag":529,"props":5347,"children":5349},{"className":5348},[],[5350],{"type":30,"value":5351},"\u003Cvideo>",{"type":30,"value":5353}," 元素的封面图",{"type":24,"tag":275,"props":5355,"children":5356},{},[5357,5359,5365],{"type":30,"value":5358},"通过 ",{"type":24,"tag":529,"props":5360,"children":5362},{"className":5361},[],[5363],{"type":30,"value":5364},"background-image",{"type":30,"value":5366}," 加载图片的元素",{"type":24,"tag":275,"props":5368,"children":5369},{},[5370],{"type":30,"value":5371},"包含文本节点的块级元素",{"type":24,"tag":524,"props":5373,"children":5376},{"code":5374,"language":932,"meta":7,"className":5375},"// 获取 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",[934],[5377],{"type":24,"tag":529,"props":5378,"children":5379},{"__ignoreMap":7},[5380],{"type":30,"value":5374},{"type":24,"tag":37,"props":5382,"children":5384},{"id":5383},"_2026-年-lcp-优化清单",[5385],{"type":30,"value":5386},"2026 年 LCP 优化清单",{"type":24,"tag":524,"props":5388,"children":5392},{"code":5389,"language":2571,"meta":7,"className":5390},"## 资源发现优化\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",[5391],"language-markdown",[5393],{"type":24,"tag":529,"props":5394,"children":5395},{"__ignoreMap":7},[5396],{"type":30,"value":5389},{"type":24,"tag":37,"props":5398,"children":5400},{"id":5399},"资源优先级提示",[5401],{"type":30,"value":5399},{"type":24,"tag":524,"props":5403,"children":5406},{"code":5404,"language":867,"meta":7,"className":5405},"\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",[869],[5407],{"type":24,"tag":529,"props":5408,"children":5409},{"__ignoreMap":7},[5410],{"type":30,"value":5404},{"type":24,"tag":25,"props":5412,"children":5414},{"id":5413},"inp-优化策略-2026",[5415],{"type":30,"value":5416},"INP 优化策略 2026",{"type":24,"tag":37,"props":5418,"children":5420},{"id":5419},"识别慢交互",[5421],{"type":30,"value":5419},{"type":24,"tag":524,"props":5423,"children":5426},{"code":5424,"language":932,"meta":7,"className":5425},"// 使用 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",[934],[5427],{"type":24,"tag":529,"props":5428,"children":5429},{"__ignoreMap":7},[5430],{"type":30,"value":5424},{"type":24,"tag":37,"props":5432,"children":5434},{"id":5433},"优化输入延迟input-delay",[5435],{"type":30,"value":5436},"优化输入延迟（Input Delay）",{"type":24,"tag":524,"props":5438,"children":5441},{"code":5439,"language":932,"meta":7,"className":5440},"// ❌ 长任务阻塞主线程\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",[934],[5442],{"type":24,"tag":529,"props":5443,"children":5444},{"__ignoreMap":7},[5445],{"type":30,"value":5439},{"type":24,"tag":37,"props":5447,"children":5449},{"id":5448},"优化处理时间processing-time",[5450],{"type":30,"value":5451},"优化处理时间（Processing Time）",{"type":24,"tag":524,"props":5453,"children":5456},{"code":5454,"language":932,"meta":7,"className":5455},"// ❌ 事件处理中包含大量同步操作\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",[934],[5457],{"type":24,"tag":529,"props":5458,"children":5459},{"__ignoreMap":7},[5460],{"type":30,"value":5454},{"type":24,"tag":37,"props":5462,"children":5464},{"id":5463},"优化呈现延迟presentation-delay",[5465],{"type":30,"value":5466},"优化呈现延迟（Presentation Delay）",{"type":24,"tag":524,"props":5468,"children":5471},{"code":5469,"language":932,"meta":7,"className":5470},"// ❌ 触发强制同步布局\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",[934],[5472],{"type":24,"tag":529,"props":5473,"children":5474},{"__ignoreMap":7},[5475],{"type":30,"value":5469},{"type":24,"tag":25,"props":5477,"children":5479},{"id":5478},"cls-优化策略-2026",[5480],{"type":30,"value":5481},"CLS 优化策略 2026",{"type":24,"tag":37,"props":5483,"children":5485},{"id":5484},"cls-来源分析",[5486],{"type":30,"value":5487},"CLS 来源分析",{"type":24,"tag":524,"props":5489,"children":5492},{"code":5490,"language":932,"meta":7,"className":5491},"// 监控并分析 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",[934],[5493],{"type":24,"tag":529,"props":5494,"children":5495},{"__ignoreMap":7},[5496],{"type":30,"value":5490},{"type":24,"tag":37,"props":5498,"children":5500},{"id":5499},"_2026-年-cls-优化清单",[5501],{"type":30,"value":5502},"2026 年 CLS 优化清单",{"type":24,"tag":524,"props":5504,"children":5507},{"code":5505,"language":867,"meta":7,"className":5506},"\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",[869],[5508],{"type":24,"tag":529,"props":5509,"children":5510},{"__ignoreMap":7},[5511],{"type":30,"value":5505},{"type":24,"tag":25,"props":5513,"children":5515},{"id":5514},"搜索排名影响与应对策略",[5516],{"type":30,"value":5514},{"type":24,"tag":37,"props":5518,"children":5520},{"id":5519},"core-web-vitals-在排名中的权重",[5521],{"type":30,"value":5522},"Core Web Vitals 在排名中的权重",{"type":24,"tag":43,"props":5524,"children":5525},{},[5526],{"type":30,"value":5527},"根据 Google 官方说明和实际观察：",{"type":24,"tag":524,"props":5529,"children":5531},{"code":5530},"排名因素权重（估算）：\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",[5532],{"type":24,"tag":529,"props":5533,"children":5534},{"__ignoreMap":7},[5535],{"type":30,"value":5530},{"type":24,"tag":43,"props":5537,"children":5538},{},[5539],{"type":24,"tag":260,"props":5540,"children":5541},{},[5542],{"type":30,"value":5543},"重要提示：",{"type":24,"tag":271,"props":5545,"children":5546},{},[5547,5552,5557],{"type":24,"tag":275,"props":5548,"children":5549},{},[5550],{"type":30,"value":5551},"Core Web Vitals 是\"入围资格\"而非\"排名加分\"",{"type":24,"tag":275,"props":5553,"children":5554},{},[5555],{"type":30,"value":5556},"当内容质量相近时，性能优势更明显",{"type":24,"tag":275,"props":5558,"children":5559},{},[5560],{"type":30,"value":5561},"差的 Core Web Vitals 可能导致排名下降",{"type":24,"tag":37,"props":5563,"children":5565},{"id":5564},"监控与预警系统",[5566],{"type":30,"value":5564},{"type":24,"tag":524,"props":5568,"children":5571},{"code":5569,"language":5271,"meta":7,"className":5570},"// 建立 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",[5273],[5572],{"type":24,"tag":529,"props":5573,"children":5574},{"__ignoreMap":7},[5575],{"type":30,"value":5569},{"type":24,"tag":25,"props":5577,"children":5578},{"id":2424},[5579],{"type":30,"value":2424},{"type":24,"tag":43,"props":5581,"children":5582},{},[5583],{"type":30,"value":5584},"2026 年的 Core Web Vitals 以 INP 为核心，标志着性能评估从\"首次加载\"向\"全程交互\"的转变。",{"type":24,"tag":37,"props":5586,"children":5588},{"id":5587},"关键要点回顾",[5589],{"type":30,"value":5587},{"type":24,"tag":271,"props":5591,"children":5592},{},[5593,5605,5616,5627,5637],{"type":24,"tag":275,"props":5594,"children":5595},{},[5596,5598,5603],{"type":30,"value":5597},"✅ ",{"type":24,"tag":260,"props":5599,"children":5600},{},[5601],{"type":30,"value":5602},"INP 取代 FID",{"type":30,"value":5604},"：测量完整交互响应时间",{"type":24,"tag":275,"props":5606,"children":5607},{},[5608,5609,5614],{"type":30,"value":5597},{"type":24,"tag":260,"props":5610,"children":5611},{},[5612],{"type":30,"value":5613},"三大指标协同",{"type":30,"value":5615},"：LCP（加载）+ INP（交互）+ CLS（稳定）",{"type":24,"tag":275,"props":5617,"children":5618},{},[5619,5620,5625],{"type":30,"value":5597},{"type":24,"tag":260,"props":5621,"children":5622},{},[5623],{"type":30,"value":5624},"优化优先级",{"type":30,"value":5626},"：先保证 INP，再优化 LCP 和 CLS",{"type":24,"tag":275,"props":5628,"children":5629},{},[5630,5631,5635],{"type":30,"value":5597},{"type":24,"tag":260,"props":5632,"children":5633},{},[5634],{"type":30,"value":2479},{"type":30,"value":5636},"：建立实时监控和预警机制",{"type":24,"tag":275,"props":5638,"children":5639},{},[5640,5641,5646],{"type":30,"value":5597},{"type":24,"tag":260,"props":5642,"children":5643},{},[5644],{"type":30,"value":5645},"渐进优化",{"type":30,"value":5647},"：从高流量页面开始，逐步覆盖全站",{"type":24,"tag":37,"props":5649,"children":5651},{"id":5650},"立即行动",[5652],{"type":30,"value":5650},{"type":24,"tag":1436,"props":5654,"children":5655},{},[5656,5661,5666,5671],{"type":24,"tag":275,"props":5657,"children":5658},{},[5659],{"type":30,"value":5660},"使用 web-vitals 库集成性能监控",{"type":24,"tag":275,"props":5662,"children":5663},{},[5664],{"type":30,"value":5665},"在 Chrome DevTools 中检查慢交互",{"type":24,"tag":275,"props":5667,"children":5668},{},[5669],{"type":30,"value":5670},"重点优化 INP > 200ms 的交互",{"type":24,"tag":275,"props":5672,"children":5673},{},[5674],{"type":30,"value":5675},"建立周期性的性能审计流程",{"type":24,"tag":25,"props":5677,"children":5679},{"id":5678},"相关资源",[5680],{"type":30,"value":5678},{"type":24,"tag":271,"props":5682,"children":5683},{},[5684,5693,5702,5712,5722],{"type":24,"tag":275,"props":5685,"children":5686},{},[5687],{"type":24,"tag":2499,"props":5688,"children":5690},{"href":2501,"rel":5689},[2503],[5691],{"type":30,"value":5692},"web.dev - Core Web Vitals",{"type":24,"tag":275,"props":5694,"children":5695},{},[5696],{"type":24,"tag":2499,"props":5697,"children":5699},{"href":2512,"rel":5698},[2503],[5700],{"type":30,"value":5701},"Chrome DevTools - 性能分析",{"type":24,"tag":275,"props":5703,"children":5704},{},[5705],{"type":24,"tag":2499,"props":5706,"children":5709},{"href":5707,"rel":5708},"https://github.com/GoogleChrome/web-vitals",[2503],[5710],{"type":30,"value":5711},"web-vitals 库",{"type":24,"tag":275,"props":5713,"children":5714},{},[5715],{"type":24,"tag":2499,"props":5716,"children":5719},{"href":5717,"rel":5718},"https://pagespeed.web.dev/",[2503],[5720],{"type":30,"value":5721},"PageSpeed Insights",{"type":24,"tag":275,"props":5723,"children":5724},{},[5725],{"type":24,"tag":2499,"props":5726,"children":5729},{"href":5727,"rel":5728},"https://search.google.com/search-console/",[2503],[5730],{"type":30,"value":5731},"Search Console Core Web Vitals 报告",{"title":7,"searchDepth":2538,"depth":2538,"links":5733},[5734,5735,5739,5744,5749,5754,5760,5764,5768,5772],{"id":4865,"depth":2541,"text":4868},{"id":4871,"depth":2541,"text":4874,"children":5736},[5737,5738],{"id":4889,"depth":2538,"text":4892},{"id":4993,"depth":2538,"text":4996},{"id":5145,"depth":2541,"text":5148,"children":5740},[5741,5742,5743],{"id":5151,"depth":2538,"text":5154},{"id":5204,"depth":2538,"text":5207},{"id":5224,"depth":2538,"text":5227},{"id":5243,"depth":2541,"text":5246,"children":5745},[5746,5747,5748],{"id":5249,"depth":2538,"text":5252},{"id":5264,"depth":2538,"text":5267},{"id":5281,"depth":2538,"text":5284},{"id":5296,"depth":2541,"text":5299,"children":5750},[5751,5752,5753],{"id":5302,"depth":2538,"text":5305},{"id":5383,"depth":2538,"text":5386},{"id":5399,"depth":2538,"text":5399},{"id":5413,"depth":2541,"text":5416,"children":5755},[5756,5757,5758,5759],{"id":5419,"depth":2538,"text":5419},{"id":5433,"depth":2538,"text":5436},{"id":5448,"depth":2538,"text":5451},{"id":5463,"depth":2538,"text":5466},{"id":5478,"depth":2541,"text":5481,"children":5761},[5762,5763],{"id":5484,"depth":2538,"text":5487},{"id":5499,"depth":2538,"text":5502},{"id":5514,"depth":2541,"text":5514,"children":5765},[5766,5767],{"id":5519,"depth":2538,"text":5522},{"id":5564,"depth":2538,"text":5564},{"id":2424,"depth":2541,"text":2424,"children":5769},[5770,5771],{"id":5587,"depth":2538,"text":5587},{"id":5650,"depth":2538,"text":5650},{"id":5678,"depth":2541,"text":5678},"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":5777,"image":17,"featured":18,"readingTime":19,"body":5778,"_type":2571,"_id":2572,"_source":2573,"_file":2574,"_stem":2575,"_extension":2576},[13,14,15,16],{"type":21,"children":5779,"toc":7905},[5780,5784,5788,5792,5796,5800,5804,5808,5969,5976,5980,6015,6019,6023,6042,6050,6054,6058,6062,6066,6073,6088,6095,6106,6113,6128,6135,6150,6154,6158,6165,6169,6188,6195,6202,6206,6225,6232,6236,6255,6262,6266,6281,6288,6303,6307,6311,6453,6457,6461,6465,6472,6476,6484,6492,6499,6503,6511,6519,6526,6530,6538,6546,6553,6557,6565,6573,6658,6662,6666,6673,6677,6685,6692,6696,6704,6711,6780,6788,6796,6803,6807,6815,6823,6908,6912,6916,6923,6927,6935,6939,6947,6954,6958,6962,6973,6981,6985,6993,7000,7008,7016,7101,7105,7109,7116,7120,7128,7132,7173,7180,7184,7192,7200,7285,7289,7293,7300,7308,7315,7323,7327,7331,7335,7508,7512,7516,7591,7599,7603,7607,7642,7646,7650,7657,7661,7696,7700,7814,7818,7827,7862,7866,7870],{"type":24,"tag":25,"props":5781,"children":5782},{"id":27},[5783],{"type":30,"value":27},{"type":24,"tag":25,"props":5785,"children":5786},{"id":33},[5787],{"type":30,"value":33},{"type":24,"tag":37,"props":5789,"children":5790},{"id":39},[5791],{"type":30,"value":39},{"type":24,"tag":43,"props":5793,"children":5794},{},[5795],{"type":30,"value":47},{"type":24,"tag":43,"props":5797,"children":5798},{},[5799],{"type":30,"value":52},{"type":24,"tag":37,"props":5801,"children":5802},{"id":55},[5803],{"type":30,"value":55},{"type":24,"tag":43,"props":5805,"children":5806},{},[5807],{"type":30,"value":62},{"type":24,"tag":64,"props":5809,"children":5810},{},[5811,5833],{"type":24,"tag":68,"props":5812,"children":5813},{},[5814],{"type":24,"tag":72,"props":5815,"children":5816},{},[5817,5821,5825,5829],{"type":24,"tag":76,"props":5818,"children":5819},{},[5820],{"type":30,"value":80},{"type":24,"tag":76,"props":5822,"children":5823},{},[5824],{"type":30,"value":85},{"type":24,"tag":76,"props":5826,"children":5827},{},[5828],{"type":30,"value":90},{"type":24,"tag":76,"props":5830,"children":5831},{},[5832],{"type":30,"value":95},{"type":24,"tag":97,"props":5834,"children":5835},{},[5836,5855,5874,5893,5912,5931,5950],{"type":24,"tag":72,"props":5837,"children":5838},{},[5839,5843,5847,5851],{"type":24,"tag":104,"props":5840,"children":5841},{},[5842],{"type":30,"value":108},{"type":24,"tag":104,"props":5844,"children":5845},{},[5846],{"type":30,"value":113},{"type":24,"tag":104,"props":5848,"children":5849},{},[5850],{"type":30,"value":118},{"type":24,"tag":104,"props":5852,"children":5853},{},[5854],{"type":30,"value":123},{"type":24,"tag":72,"props":5856,"children":5857},{},[5858,5862,5866,5870],{"type":24,"tag":104,"props":5859,"children":5860},{},[5861],{"type":30,"value":131},{"type":24,"tag":104,"props":5863,"children":5864},{},[5865],{"type":30,"value":136},{"type":24,"tag":104,"props":5867,"children":5868},{},[5869],{"type":30,"value":141},{"type":24,"tag":104,"props":5871,"children":5872},{},[5873],{"type":30,"value":123},{"type":24,"tag":72,"props":5875,"children":5876},{},[5877,5881,5885,5889],{"type":24,"tag":104,"props":5878,"children":5879},{},[5880],{"type":30,"value":153},{"type":24,"tag":104,"props":5882,"children":5883},{},[5884],{"type":30,"value":158},{"type":24,"tag":104,"props":5886,"children":5887},{},[5888],{"type":30,"value":163},{"type":24,"tag":104,"props":5890,"children":5891},{},[5892],{"type":30,"value":123},{"type":24,"tag":72,"props":5894,"children":5895},{},[5896,5900,5904,5908],{"type":24,"tag":104,"props":5897,"children":5898},{},[5899],{"type":30,"value":175},{"type":24,"tag":104,"props":5901,"children":5902},{},[5903],{"type":30,"value":180},{"type":24,"tag":104,"props":5905,"children":5906},{},[5907],{"type":30,"value":185},{"type":24,"tag":104,"props":5909,"children":5910},{},[5911],{"type":30,"value":123},{"type":24,"tag":72,"props":5913,"children":5914},{},[5915,5919,5923,5927],{"type":24,"tag":104,"props":5916,"children":5917},{},[5918],{"type":30,"value":197},{"type":24,"tag":104,"props":5920,"children":5921},{},[5922],{"type":30,"value":202},{"type":24,"tag":104,"props":5924,"children":5925},{},[5926],{"type":30,"value":207},{"type":24,"tag":104,"props":5928,"children":5929},{},[5930],{"type":30,"value":123},{"type":24,"tag":72,"props":5932,"children":5933},{},[5934,5938,5942,5946],{"type":24,"tag":104,"props":5935,"children":5936},{},[5937],{"type":30,"value":219},{"type":24,"tag":104,"props":5939,"children":5940},{},[5941],{"type":30,"value":224},{"type":24,"tag":104,"props":5943,"children":5944},{},[5945],{"type":30,"value":229},{"type":24,"tag":104,"props":5947,"children":5948},{},[5949],{"type":30,"value":123},{"type":24,"tag":72,"props":5951,"children":5952},{},[5953,5957,5961,5965],{"type":24,"tag":104,"props":5954,"children":5955},{},[5956],{"type":30,"value":241},{"type":24,"tag":104,"props":5958,"children":5959},{},[5960],{"type":30,"value":246},{"type":24,"tag":104,"props":5962,"children":5963},{},[5964],{"type":30,"value":251},{"type":24,"tag":104,"props":5966,"children":5967},{},[5968],{"type":30,"value":123},{"type":24,"tag":43,"props":5970,"children":5971},{},[5972],{"type":24,"tag":260,"props":5973,"children":5974},{},[5975],{"type":30,"value":264},{"type":24,"tag":43,"props":5977,"children":5978},{},[5979],{"type":30,"value":269},{"type":24,"tag":271,"props":5981,"children":5982},{},[5983,5991,5999,6007],{"type":24,"tag":275,"props":5984,"children":5985},{},[5986,5990],{"type":24,"tag":260,"props":5987,"children":5988},{},[5989],{"type":30,"value":282},{"type":30,"value":284},{"type":24,"tag":275,"props":5992,"children":5993},{},[5994,5998],{"type":24,"tag":260,"props":5995,"children":5996},{},[5997],{"type":30,"value":292},{"type":30,"value":294},{"type":24,"tag":275,"props":6000,"children":6001},{},[6002,6006],{"type":24,"tag":260,"props":6003,"children":6004},{},[6005],{"type":30,"value":302},{"type":30,"value":304},{"type":24,"tag":275,"props":6008,"children":6009},{},[6010,6014],{"type":24,"tag":260,"props":6011,"children":6012},{},[6013],{"type":30,"value":312},{"type":30,"value":314},{"type":24,"tag":37,"props":6016,"children":6017},{"id":317},[6018],{"type":30,"value":317},{"type":24,"tag":43,"props":6020,"children":6021},{},[6022],{"type":30,"value":324},{"type":24,"tag":271,"props":6024,"children":6025},{},[6026,6030,6034,6038],{"type":24,"tag":275,"props":6027,"children":6028},{},[6029],{"type":30,"value":332},{"type":24,"tag":275,"props":6031,"children":6032},{},[6033],{"type":30,"value":337},{"type":24,"tag":275,"props":6035,"children":6036},{},[6037],{"type":30,"value":342},{"type":24,"tag":275,"props":6039,"children":6040},{},[6041],{"type":30,"value":347},{"type":24,"tag":43,"props":6043,"children":6044},{},[6045,6049],{"type":24,"tag":260,"props":6046,"children":6047},{},[6048],{"type":30,"value":355},{"type":30,"value":357},{"type":24,"tag":25,"props":6051,"children":6052},{"id":360},[6053],{"type":30,"value":360},{"type":24,"tag":43,"props":6055,"children":6056},{},[6057],{"type":30,"value":367},{"type":24,"tag":37,"props":6059,"children":6060},{"id":370},[6061],{"type":30,"value":370},{"type":24,"tag":43,"props":6063,"children":6064},{},[6065],{"type":30,"value":377},{"type":24,"tag":43,"props":6067,"children":6068},{},[6069],{"type":24,"tag":260,"props":6070,"children":6071},{},[6072],{"type":30,"value":385},{"type":24,"tag":271,"props":6074,"children":6075},{},[6076,6080,6084],{"type":24,"tag":275,"props":6077,"children":6078},{},[6079],{"type":30,"value":393},{"type":24,"tag":275,"props":6081,"children":6082},{},[6083],{"type":30,"value":398},{"type":24,"tag":275,"props":6085,"children":6086},{},[6087],{"type":30,"value":403},{"type":24,"tag":43,"props":6089,"children":6090},{},[6091],{"type":24,"tag":260,"props":6092,"children":6093},{},[6094],{"type":30,"value":411},{"type":24,"tag":271,"props":6096,"children":6097},{},[6098,6102],{"type":24,"tag":275,"props":6099,"children":6100},{},[6101],{"type":30,"value":419},{"type":24,"tag":275,"props":6103,"children":6104},{},[6105],{"type":30,"value":424},{"type":24,"tag":43,"props":6107,"children":6108},{},[6109],{"type":24,"tag":260,"props":6110,"children":6111},{},[6112],{"type":30,"value":432},{"type":24,"tag":271,"props":6114,"children":6115},{},[6116,6120,6124],{"type":24,"tag":275,"props":6117,"children":6118},{},[6119],{"type":30,"value":440},{"type":24,"tag":275,"props":6121,"children":6122},{},[6123],{"type":30,"value":445},{"type":24,"tag":275,"props":6125,"children":6126},{},[6127],{"type":30,"value":450},{"type":24,"tag":43,"props":6129,"children":6130},{},[6131],{"type":24,"tag":260,"props":6132,"children":6133},{},[6134],{"type":30,"value":458},{"type":24,"tag":271,"props":6136,"children":6137},{},[6138,6142,6146],{"type":24,"tag":275,"props":6139,"children":6140},{},[6141],{"type":30,"value":466},{"type":24,"tag":275,"props":6143,"children":6144},{},[6145],{"type":30,"value":471},{"type":24,"tag":275,"props":6147,"children":6148},{},[6149],{"type":30,"value":476},{"type":24,"tag":37,"props":6151,"children":6152},{"id":479},[6153],{"type":30,"value":479},{"type":24,"tag":43,"props":6155,"children":6156},{},[6157],{"type":30,"value":486},{"type":24,"tag":43,"props":6159,"children":6160},{},[6161],{"type":24,"tag":260,"props":6162,"children":6163},{},[6164],{"type":30,"value":494},{"type":24,"tag":43,"props":6166,"children":6167},{},[6168],{"type":30,"value":499},{"type":24,"tag":271,"props":6170,"children":6171},{},[6172,6176,6180,6184],{"type":24,"tag":275,"props":6173,"children":6174},{},[6175],{"type":30,"value":507},{"type":24,"tag":275,"props":6177,"children":6178},{},[6179],{"type":30,"value":512},{"type":24,"tag":275,"props":6181,"children":6182},{},[6183],{"type":30,"value":517},{"type":24,"tag":275,"props":6185,"children":6186},{},[6187],{"type":30,"value":522},{"type":24,"tag":524,"props":6189,"children":6190},{"code":526},[6191],{"type":24,"tag":529,"props":6192,"children":6193},{"__ignoreMap":7},[6194],{"type":30,"value":526},{"type":24,"tag":43,"props":6196,"children":6197},{},[6198],{"type":24,"tag":260,"props":6199,"children":6200},{},[6201],{"type":30,"value":540},{"type":24,"tag":43,"props":6203,"children":6204},{},[6205],{"type":30,"value":545},{"type":24,"tag":271,"props":6207,"children":6208},{},[6209,6213,6217,6221],{"type":24,"tag":275,"props":6210,"children":6211},{},[6212],{"type":30,"value":553},{"type":24,"tag":275,"props":6214,"children":6215},{},[6216],{"type":30,"value":558},{"type":24,"tag":275,"props":6218,"children":6219},{},[6220],{"type":30,"value":563},{"type":24,"tag":275,"props":6222,"children":6223},{},[6224],{"type":30,"value":568},{"type":24,"tag":43,"props":6226,"children":6227},{},[6228],{"type":24,"tag":260,"props":6229,"children":6230},{},[6231],{"type":30,"value":576},{"type":24,"tag":43,"props":6233,"children":6234},{},[6235],{"type":30,"value":581},{"type":24,"tag":271,"props":6237,"children":6238},{},[6239,6243,6247,6251],{"type":24,"tag":275,"props":6240,"children":6241},{},[6242],{"type":30,"value":589},{"type":24,"tag":275,"props":6244,"children":6245},{},[6246],{"type":30,"value":594},{"type":24,"tag":275,"props":6248,"children":6249},{},[6250],{"type":30,"value":599},{"type":24,"tag":275,"props":6252,"children":6253},{},[6254],{"type":30,"value":604},{"type":24,"tag":43,"props":6256,"children":6257},{},[6258],{"type":24,"tag":260,"props":6259,"children":6260},{},[6261],{"type":30,"value":612},{"type":24,"tag":43,"props":6263,"children":6264},{},[6265],{"type":30,"value":617},{"type":24,"tag":271,"props":6267,"children":6268},{},[6269,6273,6277],{"type":24,"tag":275,"props":6270,"children":6271},{},[6272],{"type":30,"value":625},{"type":24,"tag":275,"props":6274,"children":6275},{},[6276],{"type":30,"value":630},{"type":24,"tag":275,"props":6278,"children":6279},{},[6280],{"type":30,"value":635},{"type":24,"tag":43,"props":6282,"children":6283},{},[6284],{"type":24,"tag":260,"props":6285,"children":6286},{},[6287],{"type":30,"value":643},{"type":24,"tag":271,"props":6289,"children":6290},{},[6291,6295,6299],{"type":24,"tag":275,"props":6292,"children":6293},{},[6294],{"type":30,"value":651},{"type":24,"tag":275,"props":6296,"children":6297},{},[6298],{"type":30,"value":656},{"type":24,"tag":275,"props":6300,"children":6301},{},[6302],{"type":30,"value":661},{"type":24,"tag":37,"props":6304,"children":6305},{"id":664},[6306],{"type":30,"value":664},{"type":24,"tag":43,"props":6308,"children":6309},{},[6310],{"type":30,"value":671},{"type":24,"tag":64,"props":6312,"children":6313},{},[6314,6336],{"type":24,"tag":68,"props":6315,"children":6316},{},[6317],{"type":24,"tag":72,"props":6318,"children":6319},{},[6320,6324,6328,6332],{"type":24,"tag":76,"props":6321,"children":6322},{},[6323],{"type":30,"value":685},{"type":24,"tag":76,"props":6325,"children":6326},{},[6327],{"type":30,"value":690},{"type":24,"tag":76,"props":6329,"children":6330},{},[6331],{"type":30,"value":695},{"type":24,"tag":76,"props":6333,"children":6334},{},[6335],{"type":30,"value":700},{"type":24,"tag":97,"props":6337,"children":6338},{},[6339,6358,6377,6396,6415,6434],{"type":24,"tag":72,"props":6340,"children":6341},{},[6342,6346,6350,6354],{"type":24,"tag":104,"props":6343,"children":6344},{},[6345],{"type":30,"value":711},{"type":24,"tag":104,"props":6347,"children":6348},{},[6349],{"type":30,"value":716},{"type":24,"tag":104,"props":6351,"children":6352},{},[6353],{"type":30,"value":721},{"type":24,"tag":104,"props":6355,"children":6356},{},[6357],{"type":30,"value":726},{"type":24,"tag":72,"props":6359,"children":6360},{},[6361,6365,6369,6373],{"type":24,"tag":104,"props":6362,"children":6363},{},[6364],{"type":30,"value":734},{"type":24,"tag":104,"props":6366,"children":6367},{},[6368],{"type":30,"value":739},{"type":24,"tag":104,"props":6370,"children":6371},{},[6372],{"type":30,"value":744},{"type":24,"tag":104,"props":6374,"children":6375},{},[6376],{"type":30,"value":726},{"type":24,"tag":72,"props":6378,"children":6379},{},[6380,6384,6388,6392],{"type":24,"tag":104,"props":6381,"children":6382},{},[6383],{"type":30,"value":756},{"type":24,"tag":104,"props":6385,"children":6386},{},[6387],{"type":30,"value":761},{"type":24,"tag":104,"props":6389,"children":6390},{},[6391],{"type":30,"value":721},{"type":24,"tag":104,"props":6393,"children":6394},{},[6395],{"type":30,"value":726},{"type":24,"tag":72,"props":6397,"children":6398},{},[6399,6403,6407,6411],{"type":24,"tag":104,"props":6400,"children":6401},{},[6402],{"type":30,"value":777},{"type":24,"tag":104,"props":6404,"children":6405},{},[6406],{"type":30,"value":782},{"type":24,"tag":104,"props":6408,"children":6409},{},[6410],{"type":30,"value":744},{"type":24,"tag":104,"props":6412,"children":6413},{},[6414],{"type":30,"value":791},{"type":24,"tag":72,"props":6416,"children":6417},{},[6418,6422,6426,6430],{"type":24,"tag":104,"props":6419,"children":6420},{},[6421],{"type":30,"value":799},{"type":24,"tag":104,"props":6423,"children":6424},{},[6425],{"type":30,"value":804},{"type":24,"tag":104,"props":6427,"children":6428},{},[6429],{"type":30,"value":744},{"type":24,"tag":104,"props":6431,"children":6432},{},[6433],{"type":30,"value":791},{"type":24,"tag":72,"props":6435,"children":6436},{},[6437,6441,6445,6449],{"type":24,"tag":104,"props":6438,"children":6439},{},[6440],{"type":30,"value":820},{"type":24,"tag":104,"props":6442,"children":6443},{},[6444],{"type":30,"value":825},{"type":24,"tag":104,"props":6446,"children":6447},{},[6448],{"type":30,"value":721},{"type":24,"tag":104,"props":6450,"children":6451},{},[6452],{"type":30,"value":834},{"type":24,"tag":25,"props":6454,"children":6455},{"id":837},[6456],{"type":30,"value":837},{"type":24,"tag":37,"props":6458,"children":6459},{"id":842},[6460],{"type":30,"value":845},{"type":24,"tag":43,"props":6462,"children":6463},{},[6464],{"type":30,"value":850},{"type":24,"tag":43,"props":6466,"children":6467},{},[6468],{"type":24,"tag":260,"props":6469,"children":6470},{},[6471],{"type":30,"value":858},{"type":24,"tag":43,"props":6473,"children":6474},{},[6475],{"type":30,"value":863},{"type":24,"tag":524,"props":6477,"children":6479},{"code":866,"language":867,"meta":7,"className":6478},[869],[6480],{"type":24,"tag":529,"props":6481,"children":6482},{"__ignoreMap":7},[6483],{"type":30,"value":866},{"type":24,"tag":43,"props":6485,"children":6486},{},[6487,6491],{"type":24,"tag":260,"props":6488,"children":6489},{},[6490],{"type":30,"value":882},{"type":30,"value":884},{"type":24,"tag":43,"props":6493,"children":6494},{},[6495],{"type":24,"tag":260,"props":6496,"children":6497},{},[6498],{"type":30,"value":892},{"type":24,"tag":43,"props":6500,"children":6501},{},[6502],{"type":30,"value":897},{"type":24,"tag":524,"props":6504,"children":6506},{"code":900,"language":867,"meta":7,"className":6505},[869],[6507],{"type":24,"tag":529,"props":6508,"children":6509},{"__ignoreMap":7},[6510],{"type":30,"value":900},{"type":24,"tag":43,"props":6512,"children":6513},{},[6514,6518],{"type":24,"tag":260,"props":6515,"children":6516},{},[6517],{"type":30,"value":882},{"type":30,"value":915},{"type":24,"tag":43,"props":6520,"children":6521},{},[6522],{"type":24,"tag":260,"props":6523,"children":6524},{},[6525],{"type":30,"value":923},{"type":24,"tag":43,"props":6527,"children":6528},{},[6529],{"type":30,"value":928},{"type":24,"tag":524,"props":6531,"children":6533},{"code":931,"language":932,"meta":7,"className":6532},[934],[6534],{"type":24,"tag":529,"props":6535,"children":6536},{"__ignoreMap":7},[6537],{"type":30,"value":931},{"type":24,"tag":43,"props":6539,"children":6540},{},[6541,6545],{"type":24,"tag":260,"props":6542,"children":6543},{},[6544],{"type":30,"value":882},{"type":30,"value":948},{"type":24,"tag":43,"props":6547,"children":6548},{},[6549],{"type":24,"tag":260,"props":6550,"children":6551},{},[6552],{"type":30,"value":956},{"type":24,"tag":43,"props":6554,"children":6555},{},[6556],{"type":30,"value":961},{"type":24,"tag":524,"props":6558,"children":6560},{"code":964,"language":965,"meta":7,"className":6559},[967],[6561],{"type":24,"tag":529,"props":6562,"children":6563},{"__ignoreMap":7},[6564],{"type":30,"value":964},{"type":24,"tag":43,"props":6566,"children":6567},{},[6568,6572],{"type":24,"tag":260,"props":6569,"children":6570},{},[6571],{"type":30,"value":980},{"type":30,"value":982},{"type":24,"tag":64,"props":6574,"children":6575},{},[6576,6598],{"type":24,"tag":68,"props":6577,"children":6578},{},[6579],{"type":24,"tag":72,"props":6580,"children":6581},{},[6582,6586,6590,6594],{"type":24,"tag":76,"props":6583,"children":6584},{},[6585],{"type":30,"value":80},{"type":24,"tag":76,"props":6587,"children":6588},{},[6589],{"type":30,"value":1000},{"type":24,"tag":76,"props":6591,"children":6592},{},[6593],{"type":30,"value":1005},{"type":24,"tag":76,"props":6595,"children":6596},{},[6597],{"type":30,"value":1010},{"type":24,"tag":97,"props":6599,"children":6600},{},[6601,6620,6639],{"type":24,"tag":72,"props":6602,"children":6603},{},[6604,6608,6612,6616],{"type":24,"tag":104,"props":6605,"children":6606},{},[6607],{"type":30,"value":1021},{"type":24,"tag":104,"props":6609,"children":6610},{},[6611],{"type":30,"value":1026},{"type":24,"tag":104,"props":6613,"children":6614},{},[6615],{"type":30,"value":1031},{"type":24,"tag":104,"props":6617,"children":6618},{},[6619],{"type":30,"value":1036},{"type":24,"tag":72,"props":6621,"children":6622},{},[6623,6627,6631,6635],{"type":24,"tag":104,"props":6624,"children":6625},{},[6626],{"type":30,"value":1044},{"type":24,"tag":104,"props":6628,"children":6629},{},[6630],{"type":30,"value":1049},{"type":24,"tag":104,"props":6632,"children":6633},{},[6634],{"type":30,"value":1054},{"type":24,"tag":104,"props":6636,"children":6637},{},[6638],{"type":30,"value":1059},{"type":24,"tag":72,"props":6640,"children":6641},{},[6642,6646,6650,6654],{"type":24,"tag":104,"props":6643,"children":6644},{},[6645],{"type":30,"value":1067},{"type":24,"tag":104,"props":6647,"children":6648},{},[6649],{"type":30,"value":136},{"type":24,"tag":104,"props":6651,"children":6652},{},[6653],{"type":30,"value":1076},{"type":24,"tag":104,"props":6655,"children":6656},{},[6657],{"type":30,"value":1081},{"type":24,"tag":37,"props":6659,"children":6660},{"id":1084},[6661],{"type":30,"value":1087},{"type":24,"tag":43,"props":6663,"children":6664},{},[6665],{"type":30,"value":1092},{"type":24,"tag":43,"props":6667,"children":6668},{},[6669],{"type":24,"tag":260,"props":6670,"children":6671},{},[6672],{"type":30,"value":1100},{"type":24,"tag":43,"props":6674,"children":6675},{},[6676],{"type":30,"value":1105},{"type":24,"tag":524,"props":6678,"children":6680},{"code":1108,"language":932,"meta":7,"className":6679},[934],[6681],{"type":24,"tag":529,"props":6682,"children":6683},{"__ignoreMap":7},[6684],{"type":30,"value":1108},{"type":24,"tag":43,"props":6686,"children":6687},{},[6688],{"type":24,"tag":260,"props":6689,"children":6690},{},[6691],{"type":30,"value":1122},{"type":24,"tag":43,"props":6693,"children":6694},{},[6695],{"type":30,"value":1127},{"type":24,"tag":524,"props":6697,"children":6699},{"code":1130,"language":932,"meta":7,"className":6698},[934],[6700],{"type":24,"tag":529,"props":6701,"children":6702},{"__ignoreMap":7},[6703],{"type":30,"value":1130},{"type":24,"tag":43,"props":6705,"children":6706},{},[6707],{"type":24,"tag":260,"props":6708,"children":6709},{},[6710],{"type":30,"value":1144},{"type":24,"tag":64,"props":6712,"children":6713},{},[6714,6732],{"type":24,"tag":68,"props":6715,"children":6716},{},[6717],{"type":24,"tag":72,"props":6718,"children":6719},{},[6720,6724,6728],{"type":24,"tag":76,"props":6721,"children":6722},{},[6723],{"type":30,"value":1158},{"type":24,"tag":76,"props":6725,"children":6726},{},[6727],{"type":30,"value":1163},{"type":24,"tag":76,"props":6729,"children":6730},{},[6731],{"type":30,"value":1168},{"type":24,"tag":97,"props":6733,"children":6734},{},[6735,6750,6765],{"type":24,"tag":72,"props":6736,"children":6737},{},[6738,6742,6746],{"type":24,"tag":104,"props":6739,"children":6740},{},[6741],{"type":30,"value":1179},{"type":24,"tag":104,"props":6743,"children":6744},{},[6745],{"type":30,"value":1184},{"type":24,"tag":104,"props":6747,"children":6748},{},[6749],{"type":30,"value":1189},{"type":24,"tag":72,"props":6751,"children":6752},{},[6753,6757,6761],{"type":24,"tag":104,"props":6754,"children":6755},{},[6756],{"type":30,"value":1197},{"type":24,"tag":104,"props":6758,"children":6759},{},[6760],{"type":30,"value":1202},{"type":24,"tag":104,"props":6762,"children":6763},{},[6764],{"type":30,"value":1207},{"type":24,"tag":72,"props":6766,"children":6767},{},[6768,6772,6776],{"type":24,"tag":104,"props":6769,"children":6770},{},[6771],{"type":30,"value":1215},{"type":24,"tag":104,"props":6773,"children":6774},{},[6775],{"type":30,"value":1220},{"type":24,"tag":104,"props":6777,"children":6778},{},[6779],{"type":30,"value":1225},{"type":24,"tag":524,"props":6781,"children":6783},{"code":1228,"language":932,"meta":7,"className":6782},[934],[6784],{"type":24,"tag":529,"props":6785,"children":6786},{"__ignoreMap":7},[6787],{"type":30,"value":1228},{"type":24,"tag":524,"props":6789,"children":6791},{"code":1237,"language":932,"meta":7,"className":6790},[934],[6792],{"type":24,"tag":529,"props":6793,"children":6794},{"__ignoreMap":7},[6795],{"type":30,"value":1237},{"type":24,"tag":43,"props":6797,"children":6798},{},[6799],{"type":24,"tag":260,"props":6800,"children":6801},{},[6802],{"type":30,"value":1251},{"type":24,"tag":43,"props":6804,"children":6805},{},[6806],{"type":30,"value":1256},{"type":24,"tag":524,"props":6808,"children":6810},{"code":1259,"language":932,"meta":7,"className":6809},[934],[6811],{"type":24,"tag":529,"props":6812,"children":6813},{"__ignoreMap":7},[6814],{"type":30,"value":1259},{"type":24,"tag":43,"props":6816,"children":6817},{},[6818,6822],{"type":24,"tag":260,"props":6819,"children":6820},{},[6821],{"type":30,"value":1273},{"type":30,"value":982},{"type":24,"tag":64,"props":6824,"children":6825},{},[6826,6848],{"type":24,"tag":68,"props":6827,"children":6828},{},[6829],{"type":24,"tag":72,"props":6830,"children":6831},{},[6832,6836,6840,6844],{"type":24,"tag":76,"props":6833,"children":6834},{},[6835],{"type":30,"value":80},{"type":24,"tag":76,"props":6837,"children":6838},{},[6839],{"type":30,"value":1000},{"type":24,"tag":76,"props":6841,"children":6842},{},[6843],{"type":30,"value":1005},{"type":24,"tag":76,"props":6845,"children":6846},{},[6847],{"type":30,"value":1010},{"type":24,"tag":97,"props":6849,"children":6850},{},[6851,6870,6889],{"type":24,"tag":72,"props":6852,"children":6853},{},[6854,6858,6862,6866],{"type":24,"tag":104,"props":6855,"children":6856},{},[6857],{"type":30,"value":1310},{"type":24,"tag":104,"props":6859,"children":6860},{},[6861],{"type":30,"value":1315},{"type":24,"tag":104,"props":6863,"children":6864},{},[6865],{"type":30,"value":1320},{"type":24,"tag":104,"props":6867,"children":6868},{},[6869],{"type":30,"value":1325},{"type":24,"tag":72,"props":6871,"children":6872},{},[6873,6877,6881,6885],{"type":24,"tag":104,"props":6874,"children":6875},{},[6876],{"type":30,"value":1333},{"type":24,"tag":104,"props":6878,"children":6879},{},[6880],{"type":30,"value":1315},{"type":24,"tag":104,"props":6882,"children":6883},{},[6884],{"type":30,"value":1342},{"type":24,"tag":104,"props":6886,"children":6887},{},[6888],{"type":30,"value":1347},{"type":24,"tag":72,"props":6890,"children":6891},{},[6892,6896,6900,6904],{"type":24,"tag":104,"props":6893,"children":6894},{},[6895],{"type":30,"value":1355},{"type":24,"tag":104,"props":6897,"children":6898},{},[6899],{"type":30,"value":1360},{"type":24,"tag":104,"props":6901,"children":6902},{},[6903],{"type":30,"value":1365},{"type":24,"tag":104,"props":6905,"children":6906},{},[6907],{"type":30,"value":1059},{"type":24,"tag":37,"props":6909,"children":6910},{"id":1372},[6911],{"type":30,"value":1375},{"type":24,"tag":43,"props":6913,"children":6914},{},[6915],{"type":30,"value":1380},{"type":24,"tag":43,"props":6917,"children":6918},{},[6919],{"type":24,"tag":260,"props":6920,"children":6921},{},[6922],{"type":30,"value":1388},{"type":24,"tag":43,"props":6924,"children":6925},{},[6926],{"type":30,"value":1393},{"type":24,"tag":524,"props":6928,"children":6930},{"code":1396,"language":932,"meta":7,"className":6929},[934],[6931],{"type":24,"tag":529,"props":6932,"children":6933},{"__ignoreMap":7},[6934],{"type":30,"value":1396},{"type":24,"tag":43,"props":6936,"children":6937},{},[6938],{"type":30,"value":1407},{"type":24,"tag":524,"props":6940,"children":6942},{"code":1410,"language":867,"meta":7,"className":6941},[869],[6943],{"type":24,"tag":529,"props":6944,"children":6945},{"__ignoreMap":7},[6946],{"type":30,"value":1410},{"type":24,"tag":43,"props":6948,"children":6949},{},[6950],{"type":24,"tag":260,"props":6951,"children":6952},{},[6953],{"type":30,"value":1424},{"type":24,"tag":43,"props":6955,"children":6956},{},[6957],{"type":30,"value":1429},{"type":24,"tag":43,"props":6959,"children":6960},{},[6961],{"type":30,"value":1434},{"type":24,"tag":1436,"props":6963,"children":6964},{},[6965,6969],{"type":24,"tag":275,"props":6966,"children":6967},{},[6968],{"type":30,"value":1443},{"type":24,"tag":275,"props":6970,"children":6971},{},[6972],{"type":30,"value":1448},{"type":24,"tag":524,"props":6974,"children":6976},{"code":1451,"language":932,"meta":7,"className":6975},[934],[6977],{"type":24,"tag":529,"props":6978,"children":6979},{"__ignoreMap":7},[6980],{"type":30,"value":1451},{"type":24,"tag":43,"props":6982,"children":6983},{},[6984],{"type":30,"value":1462},{"type":24,"tag":524,"props":6986,"children":6988},{"code":1465,"language":867,"meta":7,"className":6987},[869],[6989],{"type":24,"tag":529,"props":6990,"children":6991},{"__ignoreMap":7},[6992],{"type":30,"value":1465},{"type":24,"tag":43,"props":6994,"children":6995},{},[6996],{"type":24,"tag":260,"props":6997,"children":6998},{},[6999],{"type":30,"value":1479},{"type":24,"tag":524,"props":7001,"children":7003},{"code":1482,"language":867,"meta":7,"className":7002},[869],[7004],{"type":24,"tag":529,"props":7005,"children":7006},{"__ignoreMap":7},[7007],{"type":30,"value":1482},{"type":24,"tag":43,"props":7009,"children":7010},{},[7011,7015],{"type":24,"tag":260,"props":7012,"children":7013},{},[7014],{"type":30,"value":1496},{"type":30,"value":982},{"type":24,"tag":64,"props":7017,"children":7018},{},[7019,7041],{"type":24,"tag":68,"props":7020,"children":7021},{},[7022],{"type":24,"tag":72,"props":7023,"children":7024},{},[7025,7029,7033,7037],{"type":24,"tag":76,"props":7026,"children":7027},{},[7028],{"type":30,"value":80},{"type":24,"tag":76,"props":7030,"children":7031},{},[7032],{"type":30,"value":1000},{"type":24,"tag":76,"props":7034,"children":7035},{},[7036],{"type":30,"value":1005},{"type":24,"tag":76,"props":7038,"children":7039},{},[7040],{"type":30,"value":1010},{"type":24,"tag":97,"props":7042,"children":7043},{},[7044,7063,7082],{"type":24,"tag":72,"props":7045,"children":7046},{},[7047,7051,7055,7059],{"type":24,"tag":104,"props":7048,"children":7049},{},[7050],{"type":30,"value":1533},{"type":24,"tag":104,"props":7052,"children":7053},{},[7054],{"type":30,"value":113},{"type":24,"tag":104,"props":7056,"children":7057},{},[7058],{"type":30,"value":1542},{"type":24,"tag":104,"props":7060,"children":7061},{},[7062],{"type":30,"value":1547},{"type":24,"tag":72,"props":7064,"children":7065},{},[7066,7070,7074,7078],{"type":24,"tag":104,"props":7067,"children":7068},{},[7069],{"type":30,"value":1555},{"type":24,"tag":104,"props":7071,"children":7072},{},[7073],{"type":30,"value":1560},{"type":24,"tag":104,"props":7075,"children":7076},{},[7077],{"type":30,"value":1565},{"type":24,"tag":104,"props":7079,"children":7080},{},[7081],{"type":30,"value":1570},{"type":24,"tag":72,"props":7083,"children":7084},{},[7085,7089,7093,7097],{"type":24,"tag":104,"props":7086,"children":7087},{},[7088],{"type":30,"value":1578},{"type":24,"tag":104,"props":7090,"children":7091},{},[7092],{"type":30,"value":1583},{"type":24,"tag":104,"props":7094,"children":7095},{},[7096],{"type":30,"value":1588},{"type":24,"tag":104,"props":7098,"children":7099},{},[7100],{"type":30,"value":1593},{"type":24,"tag":37,"props":7102,"children":7103},{"id":1596},[7104],{"type":30,"value":1599},{"type":24,"tag":43,"props":7106,"children":7107},{},[7108],{"type":30,"value":1604},{"type":24,"tag":43,"props":7110,"children":7111},{},[7112],{"type":24,"tag":260,"props":7113,"children":7114},{},[7115],{"type":30,"value":1612},{"type":24,"tag":43,"props":7117,"children":7118},{},[7119],{"type":30,"value":1617},{"type":24,"tag":524,"props":7121,"children":7123},{"code":1620,"language":932,"meta":7,"className":7122},[934],[7124],{"type":24,"tag":529,"props":7125,"children":7126},{"__ignoreMap":7},[7127],{"type":30,"value":1620},{"type":24,"tag":43,"props":7129,"children":7130},{},[7131],{"type":30,"value":1631},{"type":24,"tag":271,"props":7133,"children":7134},{},[7135,7145,7149,7159,7169],{"type":24,"tag":275,"props":7136,"children":7137},{},[7138,7139,7144],{"type":30,"value":1639},{"type":24,"tag":529,"props":7140,"children":7142},{"className":7141},[],[7143],{"type":30,"value":1645},{"type":30,"value":1647},{"type":24,"tag":275,"props":7146,"children":7147},{},[7148],{"type":30,"value":1652},{"type":24,"tag":275,"props":7150,"children":7151},{},[7152,7153,7158],{"type":30,"value":1639},{"type":24,"tag":529,"props":7154,"children":7156},{"className":7155},[],[7157],{"type":30,"value":1662},{"type":30,"value":1664},{"type":24,"tag":275,"props":7160,"children":7161},{},[7162,7163,7168],{"type":30,"value":1639},{"type":24,"tag":529,"props":7164,"children":7166},{"className":7165},[],[7167],{"type":30,"value":1674},{"type":30,"value":1676},{"type":24,"tag":275,"props":7170,"children":7171},{},[7172],{"type":30,"value":1681},{"type":24,"tag":43,"props":7174,"children":7175},{},[7176],{"type":24,"tag":260,"props":7177,"children":7178},{},[7179],{"type":30,"value":1689},{"type":24,"tag":43,"props":7181,"children":7182},{},[7183],{"type":30,"value":1694},{"type":24,"tag":524,"props":7185,"children":7187},{"code":1697,"language":932,"meta":7,"className":7186},[934],[7188],{"type":24,"tag":529,"props":7189,"children":7190},{"__ignoreMap":7},[7191],{"type":30,"value":1697},{"type":24,"tag":43,"props":7193,"children":7194},{},[7195,7199],{"type":24,"tag":260,"props":7196,"children":7197},{},[7198],{"type":30,"value":1711},{"type":30,"value":982},{"type":24,"tag":64,"props":7201,"children":7202},{},[7203,7225],{"type":24,"tag":68,"props":7204,"children":7205},{},[7206],{"type":24,"tag":72,"props":7207,"children":7208},{},[7209,7213,7217,7221],{"type":24,"tag":76,"props":7210,"children":7211},{},[7212],{"type":30,"value":80},{"type":24,"tag":76,"props":7214,"children":7215},{},[7216],{"type":30,"value":1000},{"type":24,"tag":76,"props":7218,"children":7219},{},[7220],{"type":30,"value":1005},{"type":24,"tag":76,"props":7222,"children":7223},{},[7224],{"type":30,"value":1010},{"type":24,"tag":97,"props":7226,"children":7227},{},[7228,7247,7266],{"type":24,"tag":72,"props":7229,"children":7230},{},[7231,7235,7239,7243],{"type":24,"tag":104,"props":7232,"children":7233},{},[7234],{"type":30,"value":1748},{"type":24,"tag":104,"props":7236,"children":7237},{},[7238],{"type":30,"value":1542},{"type":24,"tag":104,"props":7240,"children":7241},{},[7242],{"type":30,"value":1757},{"type":24,"tag":104,"props":7244,"children":7245},{},[7246],{"type":30,"value":1762},{"type":24,"tag":72,"props":7248,"children":7249},{},[7250,7254,7258,7262],{"type":24,"tag":104,"props":7251,"children":7252},{},[7253],{"type":30,"value":1770},{"type":24,"tag":104,"props":7255,"children":7256},{},[7257],{"type":30,"value":1775},{"type":24,"tag":104,"props":7259,"children":7260},{},[7261],{"type":30,"value":1780},{"type":24,"tag":104,"props":7263,"children":7264},{},[7265],{"type":30,"value":1785},{"type":24,"tag":72,"props":7267,"children":7268},{},[7269,7273,7277,7281],{"type":24,"tag":104,"props":7270,"children":7271},{},[7272],{"type":30,"value":1793},{"type":24,"tag":104,"props":7274,"children":7275},{},[7276],{"type":30,"value":1798},{"type":24,"tag":104,"props":7278,"children":7279},{},[7280],{"type":30,"value":1803},{"type":24,"tag":104,"props":7282,"children":7283},{},[7284],{"type":30,"value":1808},{"type":24,"tag":37,"props":7286,"children":7287},{"id":1811},[7288],{"type":30,"value":1814},{"type":24,"tag":43,"props":7290,"children":7291},{},[7292],{"type":30,"value":1819},{"type":24,"tag":43,"props":7294,"children":7295},{},[7296],{"type":24,"tag":260,"props":7297,"children":7298},{},[7299],{"type":30,"value":1827},{"type":24,"tag":524,"props":7301,"children":7303},{"code":1830,"language":965,"meta":7,"className":7302},[967],[7304],{"type":24,"tag":529,"props":7305,"children":7306},{"__ignoreMap":7},[7307],{"type":30,"value":1830},{"type":24,"tag":43,"props":7309,"children":7310},{},[7311],{"type":24,"tag":260,"props":7312,"children":7313},{},[7314],{"type":30,"value":1844},{"type":24,"tag":524,"props":7316,"children":7318},{"code":1847,"language":932,"meta":7,"className":7317},[934],[7319],{"type":24,"tag":529,"props":7320,"children":7321},{"__ignoreMap":7},[7322],{"type":30,"value":1847},{"type":24,"tag":25,"props":7324,"children":7325},{"id":1856},[7326],{"type":30,"value":1856},{"type":24,"tag":43,"props":7328,"children":7329},{},[7330],{"type":30,"value":1863},{"type":24,"tag":37,"props":7332,"children":7333},{"id":1866},[7334],{"type":30,"value":1866},{"type":24,"tag":64,"props":7336,"children":7337},{},[7338,7360],{"type":24,"tag":68,"props":7339,"children":7340},{},[7341],{"type":24,"tag":72,"props":7342,"children":7343},{},[7344,7348,7352,7356],{"type":24,"tag":76,"props":7345,"children":7346},{},[7347],{"type":30,"value":80},{"type":24,"tag":76,"props":7349,"children":7350},{},[7351],{"type":30,"value":1000},{"type":24,"tag":76,"props":7353,"children":7354},{},[7355],{"type":30,"value":1005},{"type":24,"tag":76,"props":7357,"children":7358},{},[7359],{"type":30,"value":1894},{"type":24,"tag":97,"props":7361,"children":7362},{},[7363,7382,7401,7420,7439,7458,7477],{"type":24,"tag":72,"props":7364,"children":7365},{},[7366,7370,7374,7378],{"type":24,"tag":104,"props":7367,"children":7368},{},[7369],{"type":30,"value":1067},{"type":24,"tag":104,"props":7371,"children":7372},{},[7373],{"type":30,"value":136},{"type":24,"tag":104,"props":7375,"children":7376},{},[7377],{"type":30,"value":1913},{"type":24,"tag":104,"props":7379,"children":7380},{},[7381],{"type":30,"value":1762},{"type":24,"tag":72,"props":7383,"children":7384},{},[7385,7389,7393,7397],{"type":24,"tag":104,"props":7386,"children":7387},{},[7388],{"type":30,"value":1533},{"type":24,"tag":104,"props":7390,"children":7391},{},[7392],{"type":30,"value":113},{"type":24,"tag":104,"props":7394,"children":7395},{},[7396],{"type":30,"value":1933},{"type":24,"tag":104,"props":7398,"children":7399},{},[7400],{"type":30,"value":1036},{"type":24,"tag":72,"props":7402,"children":7403},{},[7404,7408,7412,7416],{"type":24,"tag":104,"props":7405,"children":7406},{},[7407],{"type":30,"value":1945},{"type":24,"tag":104,"props":7409,"children":7410},{},[7411],{"type":30,"value":158},{"type":24,"tag":104,"props":7413,"children":7414},{},[7415],{"type":30,"value":1954},{"type":24,"tag":104,"props":7417,"children":7418},{},[7419],{"type":30,"value":1959},{"type":24,"tag":72,"props":7421,"children":7422},{},[7423,7427,7431,7435],{"type":24,"tag":104,"props":7424,"children":7425},{},[7426],{"type":30,"value":1967},{"type":24,"tag":104,"props":7428,"children":7429},{},[7430],{"type":30,"value":180},{"type":24,"tag":104,"props":7432,"children":7433},{},[7434],{"type":30,"value":1976},{"type":24,"tag":104,"props":7436,"children":7437},{},[7438],{"type":30,"value":1981},{"type":24,"tag":72,"props":7440,"children":7441},{},[7442,7446,7450,7454],{"type":24,"tag":104,"props":7443,"children":7444},{},[7445],{"type":30,"value":1989},{"type":24,"tag":104,"props":7447,"children":7448},{},[7449],{"type":30,"value":224},{"type":24,"tag":104,"props":7451,"children":7452},{},[7453],{"type":30,"value":1998},{"type":24,"tag":104,"props":7455,"children":7456},{},[7457],{"type":30,"value":2003},{"type":24,"tag":72,"props":7459,"children":7460},{},[7461,7465,7469,7473],{"type":24,"tag":104,"props":7462,"children":7463},{},[7464],{"type":30,"value":241},{"type":24,"tag":104,"props":7466,"children":7467},{},[7468],{"type":30,"value":246},{"type":24,"tag":104,"props":7470,"children":7471},{},[7472],{"type":30,"value":2019},{"type":24,"tag":104,"props":7474,"children":7475},{},[7476],{"type":30,"value":2024},{"type":24,"tag":72,"props":7478,"children":7479},{},[7480,7487,7494,7501],{"type":24,"tag":104,"props":7481,"children":7482},{},[7483],{"type":24,"tag":260,"props":7484,"children":7485},{},[7486],{"type":30,"value":2035},{"type":24,"tag":104,"props":7488,"children":7489},{},[7490],{"type":24,"tag":260,"props":7491,"children":7492},{},[7493],{"type":30,"value":2043},{"type":24,"tag":104,"props":7495,"children":7496},{},[7497],{"type":24,"tag":260,"props":7498,"children":7499},{},[7500],{"type":30,"value":2051},{"type":24,"tag":104,"props":7502,"children":7503},{},[7504],{"type":24,"tag":260,"props":7505,"children":7506},{},[7507],{"type":30,"value":2059},{"type":24,"tag":37,"props":7509,"children":7510},{"id":2062},[7511],{"type":30,"value":2062},{"type":24,"tag":43,"props":7513,"children":7514},{},[7515],{"type":30,"value":2069},{"type":24,"tag":64,"props":7517,"children":7518},{},[7519,7533],{"type":24,"tag":68,"props":7520,"children":7521},{},[7522],{"type":24,"tag":72,"props":7523,"children":7524},{},[7525,7529],{"type":24,"tag":76,"props":7526,"children":7527},{},[7528],{"type":30,"value":2083},{"type":24,"tag":76,"props":7530,"children":7531},{},[7532],{"type":30,"value":2088},{"type":24,"tag":97,"props":7534,"children":7535},{},[7536,7547,7558,7569,7580],{"type":24,"tag":72,"props":7537,"children":7538},{},[7539,7543],{"type":24,"tag":104,"props":7540,"children":7541},{},[7542],{"type":30,"value":2099},{"type":24,"tag":104,"props":7544,"children":7545},{},[7546],{"type":30,"value":2104},{"type":24,"tag":72,"props":7548,"children":7549},{},[7550,7554],{"type":24,"tag":104,"props":7551,"children":7552},{},[7553],{"type":30,"value":2112},{"type":24,"tag":104,"props":7555,"children":7556},{},[7557],{"type":30,"value":2117},{"type":24,"tag":72,"props":7559,"children":7560},{},[7561,7565],{"type":24,"tag":104,"props":7562,"children":7563},{},[7564],{"type":30,"value":2125},{"type":24,"tag":104,"props":7566,"children":7567},{},[7568],{"type":30,"value":2130},{"type":24,"tag":72,"props":7570,"children":7571},{},[7572,7576],{"type":24,"tag":104,"props":7573,"children":7574},{},[7575],{"type":30,"value":2138},{"type":24,"tag":104,"props":7577,"children":7578},{},[7579],{"type":30,"value":2143},{"type":24,"tag":72,"props":7581,"children":7582},{},[7583,7587],{"type":24,"tag":104,"props":7584,"children":7585},{},[7586],{"type":30,"value":2151},{"type":24,"tag":104,"props":7588,"children":7589},{},[7590],{"type":30,"value":2156},{"type":24,"tag":43,"props":7592,"children":7593},{},[7594,7598],{"type":24,"tag":260,"props":7595,"children":7596},{},[7597],{"type":30,"value":2164},{"type":30,"value":2166},{"type":24,"tag":25,"props":7600,"children":7601},{"id":2169},[7602],{"type":30,"value":2169},{"type":24,"tag":37,"props":7604,"children":7605},{"id":2174},[7606],{"type":30,"value":2174},{"type":24,"tag":1436,"props":7608,"children":7609},{},[7610,7618,7626,7634],{"type":24,"tag":275,"props":7611,"children":7612},{},[7613,7617],{"type":24,"tag":260,"props":7614,"children":7615},{},[7616],{"type":30,"value":2187},{"type":30,"value":2189},{"type":24,"tag":275,"props":7619,"children":7620},{},[7621,7625],{"type":24,"tag":260,"props":7622,"children":7623},{},[7624],{"type":30,"value":2197},{"type":30,"value":2199},{"type":24,"tag":275,"props":7627,"children":7628},{},[7629,7633],{"type":24,"tag":260,"props":7630,"children":7631},{},[7632],{"type":30,"value":2207},{"type":30,"value":2209},{"type":24,"tag":275,"props":7635,"children":7636},{},[7637,7641],{"type":24,"tag":260,"props":7638,"children":7639},{},[7640],{"type":30,"value":2217},{"type":30,"value":2219},{"type":24,"tag":37,"props":7643,"children":7644},{"id":2222},[7645],{"type":30,"value":2222},{"type":24,"tag":43,"props":7647,"children":7648},{},[7649],{"type":30,"value":2229},{"type":24,"tag":524,"props":7651,"children":7652},{"code":2232},[7653],{"type":24,"tag":529,"props":7654,"children":7655},{"__ignoreMap":7},[7656],{"type":30,"value":2232},{"type":24,"tag":37,"props":7658,"children":7659},{"id":2240},[7660],{"type":30,"value":2240},{"type":24,"tag":1436,"props":7662,"children":7663},{},[7664,7672,7680,7688],{"type":24,"tag":275,"props":7665,"children":7666},{},[7667,7671],{"type":24,"tag":260,"props":7668,"children":7669},{},[7670],{"type":30,"value":2253},{"type":30,"value":2255},{"type":24,"tag":275,"props":7673,"children":7674},{},[7675,7679],{"type":24,"tag":260,"props":7676,"children":7677},{},[7678],{"type":30,"value":2263},{"type":30,"value":2265},{"type":24,"tag":275,"props":7681,"children":7682},{},[7683,7687],{"type":24,"tag":260,"props":7684,"children":7685},{},[7686],{"type":30,"value":2273},{"type":30,"value":2275},{"type":24,"tag":275,"props":7689,"children":7690},{},[7691,7695],{"type":24,"tag":260,"props":7692,"children":7693},{},[7694],{"type":30,"value":2283},{"type":30,"value":2285},{"type":24,"tag":25,"props":7697,"children":7698},{"id":2288},[7699],{"type":30,"value":2288},{"type":24,"tag":64,"props":7701,"children":7702},{},[7703,7721],{"type":24,"tag":68,"props":7704,"children":7705},{},[7706],{"type":24,"tag":72,"props":7707,"children":7708},{},[7709,7713,7717],{"type":24,"tag":76,"props":7710,"children":7711},{},[7712],{"type":30,"value":2304},{"type":24,"tag":76,"props":7714,"children":7715},{},[7716],{"type":30,"value":2309},{"type":24,"tag":76,"props":7718,"children":7719},{},[7720],{"type":30,"value":2314},{"type":24,"tag":97,"props":7722,"children":7723},{},[7724,7739,7754,7769,7784,7799],{"type":24,"tag":72,"props":7725,"children":7726},{},[7727,7731,7735],{"type":24,"tag":104,"props":7728,"children":7729},{},[7730],{"type":30,"value":2325},{"type":24,"tag":104,"props":7732,"children":7733},{},[7734],{"type":30,"value":2330},{"type":24,"tag":104,"props":7736,"children":7737},{},[7738],{"type":30,"value":2335},{"type":24,"tag":72,"props":7740,"children":7741},{},[7742,7746,7750],{"type":24,"tag":104,"props":7743,"children":7744},{},[7745],{"type":30,"value":2343},{"type":24,"tag":104,"props":7747,"children":7748},{},[7749],{"type":30,"value":2348},{"type":24,"tag":104,"props":7751,"children":7752},{},[7753],{"type":30,"value":2335},{"type":24,"tag":72,"props":7755,"children":7756},{},[7757,7761,7765],{"type":24,"tag":104,"props":7758,"children":7759},{},[7760],{"type":30,"value":2360},{"type":24,"tag":104,"props":7762,"children":7763},{},[7764],{"type":30,"value":2365},{"type":24,"tag":104,"props":7766,"children":7767},{},[7768],{"type":30,"value":2335},{"type":24,"tag":72,"props":7770,"children":7771},{},[7772,7776,7780],{"type":24,"tag":104,"props":7773,"children":7774},{},[7775],{"type":30,"value":2377},{"type":24,"tag":104,"props":7777,"children":7778},{},[7779],{"type":30,"value":2382},{"type":24,"tag":104,"props":7781,"children":7782},{},[7783],{"type":30,"value":2387},{"type":24,"tag":72,"props":7785,"children":7786},{},[7787,7791,7795],{"type":24,"tag":104,"props":7788,"children":7789},{},[7790],{"type":30,"value":2395},{"type":24,"tag":104,"props":7792,"children":7793},{},[7794],{"type":30,"value":2400},{"type":24,"tag":104,"props":7796,"children":7797},{},[7798],{"type":30,"value":2387},{"type":24,"tag":72,"props":7800,"children":7801},{},[7802,7806,7810],{"type":24,"tag":104,"props":7803,"children":7804},{},[7805],{"type":30,"value":2412},{"type":24,"tag":104,"props":7807,"children":7808},{},[7809],{"type":30,"value":2417},{"type":24,"tag":104,"props":7811,"children":7812},{},[7813],{"type":30,"value":2387},{"type":24,"tag":25,"props":7815,"children":7816},{"id":2424},[7817],{"type":30,"value":2424},{"type":24,"tag":43,"props":7819,"children":7820},{},[7821,7822,7826],{"type":30,"value":2431},{"type":24,"tag":260,"props":7823,"children":7824},{},[7825],{"type":30,"value":2436},{"type":30,"value":2438},{"type":24,"tag":1436,"props":7828,"children":7829},{},[7830,7838,7846,7854],{"type":24,"tag":275,"props":7831,"children":7832},{},[7833,7837],{"type":24,"tag":260,"props":7834,"children":7835},{},[7836],{"type":30,"value":2449},{"type":30,"value":2451},{"type":24,"tag":275,"props":7839,"children":7840},{},[7841,7845],{"type":24,"tag":260,"props":7842,"children":7843},{},[7844],{"type":30,"value":2459},{"type":30,"value":2461},{"type":24,"tag":275,"props":7847,"children":7848},{},[7849,7853],{"type":24,"tag":260,"props":7850,"children":7851},{},[7852],{"type":30,"value":2469},{"type":30,"value":2471},{"type":24,"tag":275,"props":7855,"children":7856},{},[7857,7861],{"type":24,"tag":260,"props":7858,"children":7859},{},[7860],{"type":30,"value":2479},{"type":30,"value":2481},{"type":24,"tag":43,"props":7863,"children":7864},{},[7865],{"type":30,"value":2486},{"type":24,"tag":25,"props":7867,"children":7868},{"id":2489},[7869],{"type":30,"value":2489},{"type":24,"tag":271,"props":7871,"children":7872},{},[7873,7881,7889,7897],{"type":24,"tag":275,"props":7874,"children":7875},{},[7876],{"type":24,"tag":2499,"props":7877,"children":7879},{"href":2501,"rel":7878},[2503],[7880],{"type":30,"value":2506},{"type":24,"tag":275,"props":7882,"children":7883},{},[7884],{"type":24,"tag":2499,"props":7885,"children":7887},{"href":2512,"rel":7886},[2503],[7888],{"type":30,"value":2516},{"type":24,"tag":275,"props":7890,"children":7891},{},[7892],{"type":24,"tag":2499,"props":7893,"children":7895},{"href":2522,"rel":7894},[2503],[7896],{"type":30,"value":2526},{"type":24,"tag":275,"props":7898,"children":7899},{},[7900],{"type":24,"tag":2499,"props":7901,"children":7903},{"href":2532,"rel":7902},[2503],[7904],{"type":30,"value":2536},{"title":7,"searchDepth":2538,"depth":2538,"links":7906},[7907,7908,7913,7918,7925,7929,7934,7935,7936],{"id":27,"depth":2541,"text":27},{"id":33,"depth":2541,"text":33,"children":7909},[7910,7911,7912],{"id":39,"depth":2538,"text":39},{"id":55,"depth":2538,"text":55},{"id":317,"depth":2538,"text":317},{"id":360,"depth":2541,"text":360,"children":7914},[7915,7916,7917],{"id":370,"depth":2538,"text":370},{"id":479,"depth":2538,"text":479},{"id":664,"depth":2538,"text":664},{"id":837,"depth":2541,"text":837,"children":7919},[7920,7921,7922,7923,7924],{"id":842,"depth":2538,"text":845},{"id":1084,"depth":2538,"text":1087},{"id":1372,"depth":2538,"text":1375},{"id":1596,"depth":2538,"text":1599},{"id":1811,"depth":2538,"text":1814},{"id":1856,"depth":2541,"text":1856,"children":7926},[7927,7928],{"id":1866,"depth":2538,"text":1866},{"id":2062,"depth":2538,"text":2062},{"id":2169,"depth":2541,"text":2169,"children":7930},[7931,7932,7933],{"id":2174,"depth":2538,"text":2174},{"id":2222,"depth":2538,"text":2222},{"id":2240,"depth":2538,"text":2240},{"id":2288,"depth":2541,"text":2288},{"id":2424,"depth":2541,"text":2424},{"id":2489,"depth":2541,"text":2489},1778574600253]