[{"data":1,"prerenderedAt":1441},["ShallowReactive",2],{"content-/topics/engineering/core-web-vitals-optimization-roadmap":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"category":5,"tags":11,"author":17,"featured":18,"series":19,"seriesOrder":20,"readingTime":21,"image":22,"body":23,"_type":1435,"_id":1436,"_source":1437,"_file":1438,"_stem":1439,"_extension":1440},"/topics/engineering/core-web-vitals-optimization-roadmap","engineering",false,"","Core Web Vitals 详解与优化路线图：别再把性能当玄学","性能优化最怕“到处打补丁，结果指标还是差”。本文把 LCP、CLS、INP 拆回用户感知与工程控制面，给你一套从测量、定位到治理的完整路线图，帮你把性能从玄学变成工程。","2026-04-25",[12,13,14,15,16],"Web 性能","Core Web Vitals","LCP","CLS","INP","小明",true,"web-performance-extreme",1,14,"/images/articles/core-web-vitals-optimization-roadmap-cover.jpg",{"type":24,"children":25,"toc":1405},"root",[26,34,40,60,65,70,79,84,103,108,126,137,141,148,155,160,170,175,180,186,191,199,204,209,215,220,225,230,253,263,266,272,277,295,300,387,399,402,408,413,419,424,429,447,453,458,476,481,620,626,631,649,659,662,668,673,681,687,787,792,798,803,808,826,832,837,855,858,864,869,875,880,885,908,914,919,924,929,947,1232,1238,1243,1248,1266,1269,1275,1280,1285,1303,1308,1313,1316,1322,1328,1333,1339,1344,1350,1355,1358,1363,1386,1391,1399],{"type":27,"tag":28,"props":29,"children":31},"element","h1",{"id":30},"core-web-vitals-详解与优化路线图别再把性能当玄学",[32],{"type":33,"value":8},"text",{"type":27,"tag":35,"props":36,"children":37},"p",{},[38],{"type":33,"value":39},"很多团队做性能优化的方式，像极了程序员版刮彩票：",{"type":27,"tag":41,"props":42,"children":43},"ul",{},[44,50,55],{"type":27,"tag":45,"props":46,"children":47},"li",{},[48],{"type":33,"value":49},"图片大了，压一下",{"type":27,"tag":45,"props":51,"children":52},{},[53],{"type":33,"value":54},"包体大了，拆一下",{"type":27,"tag":45,"props":56,"children":57},{},[58],{"type":33,"value":59},"页面慢了，加缓存",{"type":27,"tag":35,"props":61,"children":62},{},[63],{"type":33,"value":64},"听起来都对，但一套组合拳打完，数据面板还是不漂亮。",{"type":27,"tag":35,"props":66,"children":67},{},[68],{"type":33,"value":69},"问题不在于大家不努力，而在于很多优化动作没有先回答一个更根本的问题：",{"type":27,"tag":71,"props":72,"children":73},"blockquote",{},[74],{"type":27,"tag":35,"props":75,"children":76},{},[77],{"type":33,"value":78},"你到底在优化什么样的“慢”？",{"type":27,"tag":35,"props":80,"children":81},{},[82],{"type":33,"value":83},"性能从来不是单一指标。用户会同时感知三件事：",{"type":27,"tag":85,"props":86,"children":87},"ol",{},[88,93,98],{"type":27,"tag":45,"props":89,"children":90},{},[91],{"type":33,"value":92},"页面多久看起来“像是打开了”",{"type":27,"tag":45,"props":94,"children":95},{},[96],{"type":33,"value":97},"页面会不会突然乱跳",{"type":27,"tag":45,"props":99,"children":100},{},[101],{"type":33,"value":102},"我点了之后多久真的有反应",{"type":27,"tag":35,"props":104,"children":105},{},[106],{"type":33,"value":107},"Core Web Vitals 正好对应这三种体验：",{"type":27,"tag":41,"props":109,"children":110},{},[111,116,121],{"type":27,"tag":45,"props":112,"children":113},{},[114],{"type":33,"value":115},"LCP：最大内容什么时候出现",{"type":27,"tag":45,"props":117,"children":118},{},[119],{"type":33,"value":120},"CLS：布局是否稳定",{"type":27,"tag":45,"props":122,"children":123},{},[124],{"type":33,"value":125},"INP：交互响应是否及时",{"type":27,"tag":35,"props":127,"children":128},{},[129,131],{"type":33,"value":130},"这篇文章不打算再把每个缩写背一遍，而是想帮你建立一个更靠谱的框架：",{"type":27,"tag":132,"props":133,"children":134},"strong",{},[135],{"type":33,"value":136},"把性能问题拆成用户感知、资源加载、主线程占用、缓存策略、组件边界五个层面来治理。",{"type":27,"tag":138,"props":139,"children":140},"hr",{},[],{"type":27,"tag":142,"props":143,"children":145},"h2",{"id":144},"_1-先把指标翻译成人话",[146],{"type":33,"value":147},"1. 先把指标翻译成人话",{"type":27,"tag":149,"props":150,"children":152},"h3",{"id":151},"_11-lcp-不是首页快不快而是关键内容什么时候出现",[153],{"type":33,"value":154},"1.1 LCP 不是“首页快不快”，而是“关键内容什么时候出现”",{"type":27,"tag":35,"props":156,"children":157},{},[158],{"type":33,"value":159},"LCP 最大的误区是把它理解成“加载时间”。",{"type":27,"tag":35,"props":161,"children":162},{},[163,165],{"type":33,"value":164},"更准确地说，它衡量的是：",{"type":27,"tag":132,"props":166,"children":167},{},[168],{"type":33,"value":169},"用户最关心的那块内容，什么时候终于出现在视口里。",{"type":27,"tag":35,"props":171,"children":172},{},[173],{"type":33,"value":174},"在新闻站，它可能是文章标题或首图；在电商页，它常常是商品大图和价格区；在 SaaS 后台，它可能是表格主体。",{"type":27,"tag":35,"props":176,"children":177},{},[178],{"type":33,"value":179},"所以优化 LCP，不是盲目压全站所有资源，而是优先保障“关键内容路径”。",{"type":27,"tag":149,"props":181,"children":183},{"id":182},"_12-cls-不是样式问题而是信任问题",[184],{"type":33,"value":185},"1.2 CLS 不是样式问题，而是信任问题",{"type":27,"tag":35,"props":187,"children":188},{},[189],{"type":33,"value":190},"页面突然跳一下，用户的第一反应不是“技术实现有点粗糙”，而是：",{"type":27,"tag":71,"props":192,"children":193},{},[194],{"type":27,"tag":35,"props":195,"children":196},{},[197],{"type":33,"value":198},"这网站不稳，我敢不敢继续点？",{"type":27,"tag":35,"props":200,"children":201},{},[202],{"type":33,"value":203},"CLS 本质上在惩罚一种不负责任的界面承诺：你先给用户一个版面，随后又擅自把它改了。",{"type":27,"tag":35,"props":205,"children":206},{},[207],{"type":33,"value":208},"广告位迟到、图片尺寸没占位、异步模块回填，都属于这个问题。",{"type":27,"tag":149,"props":210,"children":212},{"id":211},"_13-inp-不是事件处理慢而是主线程被绑架",[213],{"type":33,"value":214},"1.3 INP 不是事件处理慢，而是主线程被绑架",{"type":27,"tag":35,"props":216,"children":217},{},[218],{"type":33,"value":219},"很多人把交互延迟归因于“接口慢”。",{"type":27,"tag":35,"props":221,"children":222},{},[223],{"type":33,"value":224},"但真实情况常常是：点击已经发生，浏览器也准备响应了，只是主线程还在忙着做别的事。",{"type":27,"tag":35,"props":226,"children":227},{},[228],{"type":33,"value":229},"比如：",{"type":27,"tag":41,"props":231,"children":232},{},[233,238,243,248],{"type":27,"tag":45,"props":234,"children":235},{},[236],{"type":33,"value":237},"一次点击触发了复杂状态更新",{"type":27,"tag":45,"props":239,"children":240},{},[241],{"type":33,"value":242},"大型组件整树重渲染",{"type":27,"tag":45,"props":244,"children":245},{},[246],{"type":33,"value":247},"第三方脚本占住了执行队列",{"type":27,"tag":45,"props":249,"children":250},{},[251],{"type":33,"value":252},"JSON 解析和数据整形都在主线程硬扛",{"type":27,"tag":35,"props":254,"children":255},{},[256,258],{"type":33,"value":257},"INP 的核心提醒是：",{"type":27,"tag":132,"props":259,"children":260},{},[261],{"type":33,"value":262},"交互卡顿，本质上是调度失败。",{"type":27,"tag":138,"props":264,"children":265},{},[],{"type":27,"tag":142,"props":267,"children":269},{"id":268},"_2-一条更靠谱的性能诊断路径",[270],{"type":33,"value":271},"2. 一条更靠谱的性能诊断路径",{"type":27,"tag":35,"props":273,"children":274},{},[275],{"type":33,"value":276},"如果你一上来就改代码，通常会在错误方向上越跑越快。建议按这个顺序做：",{"type":27,"tag":85,"props":278,"children":279},{},[280,285,290],{"type":27,"tag":45,"props":281,"children":282},{},[283],{"type":33,"value":284},"先看真实用户数据，再看实验室数据",{"type":27,"tag":45,"props":286,"children":287},{},[288],{"type":33,"value":289},"先锁定页面模板，再看单一页面",{"type":27,"tag":45,"props":291,"children":292},{},[293],{"type":33,"value":294},"先找控制面，再找具体实现细节",{"type":27,"tag":35,"props":296,"children":297},{},[298],{"type":33,"value":299},"一个够用的诊断框架如下：",{"type":27,"tag":301,"props":302,"children":303},"table",{},[304,328],{"type":27,"tag":305,"props":306,"children":307},"thead",{},[308],{"type":27,"tag":309,"props":310,"children":311},"tr",{},[312,318,323],{"type":27,"tag":313,"props":314,"children":315},"th",{},[316],{"type":33,"value":317},"问题",{"type":27,"tag":313,"props":319,"children":320},{},[321],{"type":33,"value":322},"优先检查",{"type":27,"tag":313,"props":324,"children":325},{},[326],{"type":33,"value":327},"常见根因",{"type":27,"tag":329,"props":330,"children":331},"tbody",{},[332,351,369],{"type":27,"tag":309,"props":333,"children":334},{},[335,341,346],{"type":27,"tag":336,"props":337,"children":338},"td",{},[339],{"type":33,"value":340},"LCP 差",{"type":27,"tag":336,"props":342,"children":343},{},[344],{"type":33,"value":345},"首屏 HTML、关键 CSS、首图加载链路",{"type":27,"tag":336,"props":347,"children":348},{},[349],{"type":33,"value":350},"服务端慢、阻塞资源多、图片策略差",{"type":27,"tag":309,"props":352,"children":353},{},[354,359,364],{"type":27,"tag":336,"props":355,"children":356},{},[357],{"type":33,"value":358},"CLS 差",{"type":27,"tag":336,"props":360,"children":361},{},[362],{"type":33,"value":363},"首屏骨架、图片容器、广告/推荐位",{"type":27,"tag":336,"props":365,"children":366},{},[367],{"type":33,"value":368},"没预留空间、异步回填、字体切换",{"type":27,"tag":309,"props":370,"children":371},{},[372,377,382],{"type":27,"tag":336,"props":373,"children":374},{},[375],{"type":33,"value":376},"INP 差",{"type":27,"tag":336,"props":378,"children":379},{},[380],{"type":33,"value":381},"主线程长任务、事件回调、状态更新",{"type":27,"tag":336,"props":383,"children":384},{},[385],{"type":33,"value":386},"组件过重、第三方脚本、同步计算",{"type":27,"tag":35,"props":388,"children":389},{},[390,392,397],{"type":33,"value":391},"你会发现，性能问题大多不是“某一个函数写得烂”，而是",{"type":27,"tag":132,"props":393,"children":394},{},[395],{"type":33,"value":396},"架构默认值不对",{"type":33,"value":398},"。",{"type":27,"tag":138,"props":400,"children":401},{},[],{"type":27,"tag":142,"props":403,"children":405},{"id":404},"_3-lcp-的治理路线先把关键路径变短",[406],{"type":33,"value":407},"3. LCP 的治理路线：先把关键路径变短",{"type":27,"tag":35,"props":409,"children":410},{},[411],{"type":33,"value":412},"LCP 的思路不是“让所有东西都快”，而是“让关键内容更早出现”。",{"type":27,"tag":149,"props":414,"children":416},{"id":415},"_31-先缩短服务端到首字节的距离",[417],{"type":33,"value":418},"3.1 先缩短服务端到首字节的距离",{"type":27,"tag":35,"props":420,"children":421},{},[422],{"type":33,"value":423},"如果 HTML 本身出来得慢，后面的所有优化都像在堵车现场擦车窗。",{"type":27,"tag":35,"props":425,"children":426},{},[427],{"type":33,"value":428},"先处理：",{"type":27,"tag":41,"props":430,"children":431},{},[432,437,442],{"type":27,"tag":45,"props":433,"children":434},{},[435],{"type":33,"value":436},"页面是否做了不必要的服务端串行请求",{"type":27,"tag":45,"props":438,"children":439},{},[440],{"type":33,"value":441},"缓存是否区分了静态、弱动态、强个性化内容",{"type":27,"tag":45,"props":443,"children":444},{},[445],{"type":33,"value":446},"首屏是否依赖重型鉴权和全量配置注入",{"type":27,"tag":149,"props":448,"children":450},{"id":449},"_32-再清理首屏阻塞资源",[451],{"type":33,"value":452},"3.2 再清理首屏阻塞资源",{"type":27,"tag":35,"props":454,"children":455},{},[456],{"type":33,"value":457},"典型坏味道：",{"type":27,"tag":41,"props":459,"children":460},{},[461,466,471],{"type":27,"tag":45,"props":462,"children":463},{},[464],{"type":33,"value":465},"首屏前塞了多个阻塞脚本",{"type":27,"tag":45,"props":467,"children":468},{},[469],{"type":33,"value":470},"一堆不是首屏必须的组件样式被同步拉入",{"type":27,"tag":45,"props":472,"children":473},{},[474],{"type":33,"value":475},"大图没声明优先级，结果让埋点脚本抢了带宽",{"type":27,"tag":35,"props":477,"children":478},{},[479],{"type":33,"value":480},"在 Nuxt 或现代前端项目里，可以优先做这三件事：",{"type":27,"tag":482,"props":483,"children":487},"pre",{"className":484,"code":485,"language":486,"meta":7,"style":7},"language-ts shiki shiki-themes github-dark","// 示例：优先加载首图，而不是等浏览器“自己猜”\nuseHead({\n  link: [\n    {\n      rel: 'preload',\n      as: 'image',\n      href: '/images/hero.avif',\n    },\n  ],\n})\n","ts",[488],{"type":27,"tag":489,"props":490,"children":491},"code",{"__ignoreMap":7},[492,503,519,528,537,557,575,593,602,611],{"type":27,"tag":493,"props":494,"children":496},"span",{"class":495,"line":20},"line",[497],{"type":27,"tag":493,"props":498,"children":500},{"style":499},"--shiki-default:#6A737D",[501],{"type":33,"value":502},"// 示例：优先加载首图，而不是等浏览器“自己猜”\n",{"type":27,"tag":493,"props":504,"children":506},{"class":495,"line":505},2,[507,513],{"type":27,"tag":493,"props":508,"children":510},{"style":509},"--shiki-default:#B392F0",[511],{"type":33,"value":512},"useHead",{"type":27,"tag":493,"props":514,"children":516},{"style":515},"--shiki-default:#E1E4E8",[517],{"type":33,"value":518},"({\n",{"type":27,"tag":493,"props":520,"children":522},{"class":495,"line":521},3,[523],{"type":27,"tag":493,"props":524,"children":525},{"style":515},[526],{"type":33,"value":527},"  link: [\n",{"type":27,"tag":493,"props":529,"children":531},{"class":495,"line":530},4,[532],{"type":27,"tag":493,"props":533,"children":534},{"style":515},[535],{"type":33,"value":536},"    {\n",{"type":27,"tag":493,"props":538,"children":540},{"class":495,"line":539},5,[541,546,552],{"type":27,"tag":493,"props":542,"children":543},{"style":515},[544],{"type":33,"value":545},"      rel: ",{"type":27,"tag":493,"props":547,"children":549},{"style":548},"--shiki-default:#9ECBFF",[550],{"type":33,"value":551},"'preload'",{"type":27,"tag":493,"props":553,"children":554},{"style":515},[555],{"type":33,"value":556},",\n",{"type":27,"tag":493,"props":558,"children":560},{"class":495,"line":559},6,[561,566,571],{"type":27,"tag":493,"props":562,"children":563},{"style":515},[564],{"type":33,"value":565},"      as: ",{"type":27,"tag":493,"props":567,"children":568},{"style":548},[569],{"type":33,"value":570},"'image'",{"type":27,"tag":493,"props":572,"children":573},{"style":515},[574],{"type":33,"value":556},{"type":27,"tag":493,"props":576,"children":578},{"class":495,"line":577},7,[579,584,589],{"type":27,"tag":493,"props":580,"children":581},{"style":515},[582],{"type":33,"value":583},"      href: ",{"type":27,"tag":493,"props":585,"children":586},{"style":548},[587],{"type":33,"value":588},"'/images/hero.avif'",{"type":27,"tag":493,"props":590,"children":591},{"style":515},[592],{"type":33,"value":556},{"type":27,"tag":493,"props":594,"children":596},{"class":495,"line":595},8,[597],{"type":27,"tag":493,"props":598,"children":599},{"style":515},[600],{"type":33,"value":601},"    },\n",{"type":27,"tag":493,"props":603,"children":605},{"class":495,"line":604},9,[606],{"type":27,"tag":493,"props":607,"children":608},{"style":515},[609],{"type":33,"value":610},"  ],\n",{"type":27,"tag":493,"props":612,"children":614},{"class":495,"line":613},10,[615],{"type":27,"tag":493,"props":616,"children":617},{"style":515},[618],{"type":33,"value":619},"})\n",{"type":27,"tag":149,"props":621,"children":623},{"id":622},"_33-别让首图又大又迟到",[624],{"type":33,"value":625},"3.3 别让首图又大又迟到",{"type":27,"tag":35,"props":627,"children":628},{},[629],{"type":33,"value":630},"很多站点的 LCP 元素就是图片，但真正拖垮指标的不是“图片存在”，而是：",{"type":27,"tag":41,"props":632,"children":633},{},[634,639,644],{"type":27,"tag":45,"props":635,"children":636},{},[637],{"type":33,"value":638},"尺寸远大于实际展示尺寸",{"type":27,"tag":45,"props":640,"children":641},{},[642],{"type":33,"value":643},"还在传 JPEG，而不是更合理的 WebP/AVIF",{"type":27,"tag":45,"props":645,"children":646},{},[647],{"type":33,"value":648},"响应式尺寸缺失，移动端也在吃桌面图",{"type":27,"tag":35,"props":650,"children":651},{},[652,654],{"type":33,"value":653},"一句话原则：",{"type":27,"tag":132,"props":655,"children":656},{},[657],{"type":33,"value":658},"让 LCP 元素成为带宽预算里的 VIP。",{"type":27,"tag":138,"props":660,"children":661},{},[],{"type":27,"tag":142,"props":663,"children":665},{"id":664},"_4-cls-的治理路线任何异步内容都必须先买座位",[666],{"type":33,"value":667},"4. CLS 的治理路线：任何异步内容都必须先买座位",{"type":27,"tag":35,"props":669,"children":670},{},[671],{"type":33,"value":672},"做 CLS 优化，最重要的不是技巧，而是一种界面伦理：",{"type":27,"tag":71,"props":674,"children":675},{},[676],{"type":27,"tag":35,"props":677,"children":678},{},[679],{"type":33,"value":680},"只要某个模块会来，就必须先给它留位置。",{"type":27,"tag":149,"props":682,"children":684},{"id":683},"_41-图片和媒体必须显式占位",[685],{"type":33,"value":686},"4.1 图片和媒体必须显式占位",{"type":27,"tag":482,"props":688,"children":692},{"className":689,"code":690,"language":691,"meta":7,"style":7},"language-html shiki shiki-themes github-dark","\u003Cimg\n  src=\"/images/product.webp\"\n  width=\"960\"\n  height=\"640\"\n  alt=\"商品图\"\n/>\n","html",[693],{"type":27,"tag":489,"props":694,"children":695},{"__ignoreMap":7},[696,710,728,745,762,779],{"type":27,"tag":493,"props":697,"children":698},{"class":495,"line":20},[699,704],{"type":27,"tag":493,"props":700,"children":701},{"style":515},[702],{"type":33,"value":703},"\u003C",{"type":27,"tag":493,"props":705,"children":707},{"style":706},"--shiki-default:#85E89D",[708],{"type":33,"value":709},"img\n",{"type":27,"tag":493,"props":711,"children":712},{"class":495,"line":505},[713,718,723],{"type":27,"tag":493,"props":714,"children":715},{"style":509},[716],{"type":33,"value":717},"  src",{"type":27,"tag":493,"props":719,"children":720},{"style":515},[721],{"type":33,"value":722},"=",{"type":27,"tag":493,"props":724,"children":725},{"style":548},[726],{"type":33,"value":727},"\"/images/product.webp\"\n",{"type":27,"tag":493,"props":729,"children":730},{"class":495,"line":521},[731,736,740],{"type":27,"tag":493,"props":732,"children":733},{"style":509},[734],{"type":33,"value":735},"  width",{"type":27,"tag":493,"props":737,"children":738},{"style":515},[739],{"type":33,"value":722},{"type":27,"tag":493,"props":741,"children":742},{"style":548},[743],{"type":33,"value":744},"\"960\"\n",{"type":27,"tag":493,"props":746,"children":747},{"class":495,"line":530},[748,753,757],{"type":27,"tag":493,"props":749,"children":750},{"style":509},[751],{"type":33,"value":752},"  height",{"type":27,"tag":493,"props":754,"children":755},{"style":515},[756],{"type":33,"value":722},{"type":27,"tag":493,"props":758,"children":759},{"style":548},[760],{"type":33,"value":761},"\"640\"\n",{"type":27,"tag":493,"props":763,"children":764},{"class":495,"line":539},[765,770,774],{"type":27,"tag":493,"props":766,"children":767},{"style":509},[768],{"type":33,"value":769},"  alt",{"type":27,"tag":493,"props":771,"children":772},{"style":515},[773],{"type":33,"value":722},{"type":27,"tag":493,"props":775,"children":776},{"style":548},[777],{"type":33,"value":778},"\"商品图\"\n",{"type":27,"tag":493,"props":780,"children":781},{"class":495,"line":559},[782],{"type":27,"tag":493,"props":783,"children":784},{"style":515},[785],{"type":33,"value":786},"/>\n",{"type":27,"tag":35,"props":788,"children":789},{},[790],{"type":33,"value":791},"这看起来像老生常谈，但它依然是大量页面 CLS 的头号凶手。",{"type":27,"tag":149,"props":793,"children":795},{"id":794},"_42-骨架屏不是装饰它是布局承诺",[796],{"type":33,"value":797},"4.2 骨架屏不是装饰，它是布局承诺",{"type":27,"tag":35,"props":799,"children":800},{},[801],{"type":33,"value":802},"如果真实内容和骨架尺寸不一致，骨架屏就不是优化，而是一次双重欺骗。",{"type":27,"tag":35,"props":804,"children":805},{},[806],{"type":33,"value":807},"好的骨架要做到：",{"type":27,"tag":41,"props":809,"children":810},{},[811,816,821],{"type":27,"tag":45,"props":812,"children":813},{},[814],{"type":33,"value":815},"与真实内容块尺寸一致",{"type":27,"tag":45,"props":817,"children":818},{},[819],{"type":33,"value":820},"文本行高和图片区比例接近",{"type":27,"tag":45,"props":822,"children":823},{},[824],{"type":33,"value":825},"数据回来时只做“内容替换”，不做布局重排",{"type":27,"tag":149,"props":827,"children":829},{"id":828},"_43-字体策略要服务稳定不只是服务好看",[830],{"type":33,"value":831},"4.3 字体策略要服务稳定，不只是服务好看",{"type":27,"tag":35,"props":833,"children":834},{},[835],{"type":33,"value":836},"自定义字体加载晚了，文本宽度变化也会造成布局抖动。处理思路：",{"type":27,"tag":41,"props":838,"children":839},{},[840,845,850],{"type":27,"tag":45,"props":841,"children":842},{},[843],{"type":33,"value":844},"使用合理的 fallback 字体",{"type":27,"tag":45,"props":846,"children":847},{},[848],{"type":33,"value":849},"控制字体文件体积",{"type":27,"tag":45,"props":851,"children":852},{},[853],{"type":33,"value":854},"只给关键字重加载自定义字重，不要一口气把全家桶都运来",{"type":27,"tag":138,"props":856,"children":857},{},[],{"type":27,"tag":142,"props":859,"children":861},{"id":860},"_5-inp-的治理路线减少一次交互背后的系统反应过度",[862],{"type":33,"value":863},"5. INP 的治理路线：减少一次交互背后的系统反应过度",{"type":27,"tag":35,"props":865,"children":866},{},[867],{"type":33,"value":868},"INP 差，通常意味着系统把一次用户动作，误处理成了一场全站广播。",{"type":27,"tag":149,"props":870,"children":872},{"id":871},"_51-先找长任务",[873],{"type":33,"value":874},"5.1 先找长任务",{"type":27,"tag":35,"props":876,"children":877},{},[878],{"type":33,"value":879},"浏览器最怕不是“事情多”，而是“有一件事情太久做不完”。",{"type":27,"tag":35,"props":881,"children":882},{},[883],{"type":33,"value":884},"重点排查：",{"type":27,"tag":41,"props":886,"children":887},{},[888,893,898,903],{"type":27,"tag":45,"props":889,"children":890},{},[891],{"type":33,"value":892},"重型富文本解析",{"type":27,"tag":45,"props":894,"children":895},{},[896],{"type":33,"value":897},"大 JSON 同步处理",{"type":27,"tag":45,"props":899,"children":900},{},[901],{"type":33,"value":902},"点击后触发多层 store 更新",{"type":27,"tag":45,"props":904,"children":905},{},[906],{"type":33,"value":907},"统计脚本、可视化脚本、客服脚本挤占主线程",{"type":27,"tag":149,"props":909,"children":911},{"id":910},"_52-缩小响应边界",[912],{"type":33,"value":913},"5.2 缩小响应边界",{"type":27,"tag":35,"props":915,"children":916},{},[917],{"type":33,"value":918},"交互优化很大程度上是组件设计问题。",{"type":27,"tag":35,"props":920,"children":921},{},[922],{"type":33,"value":923},"如果一个筛选按钮被点击后，会导致整个页面树重渲染，那不是 React、Vue 或浏览器的错，是边界切错了。",{"type":27,"tag":35,"props":925,"children":926},{},[927],{"type":33,"value":928},"更好的做法是：",{"type":27,"tag":41,"props":930,"children":931},{},[932,937,942],{"type":27,"tag":45,"props":933,"children":934},{},[935],{"type":33,"value":936},"把热交互区域做局部状态隔离",{"type":27,"tag":45,"props":938,"children":939},{},[940],{"type":33,"value":941},"避免把短周期状态抬到全局",{"type":27,"tag":45,"props":943,"children":944},{},[945],{"type":33,"value":946},"重计算任务异步化，或者延后到空闲时段",{"type":27,"tag":482,"props":948,"children":950},{"className":484,"code":949,"language":486,"meta":7,"style":7},"function expensiveNormalize(list: Array\u003CRecord\u003Cstring, unknown>>) {\n  return list.map((item) => ({\n    ...item,\n    keywords: String(item.title || '')\n      .toLowerCase()\n      .split(' '),\n  }))\n}\n\nrequestIdleCallback(() => {\n  cachedResult.value = expensiveNormalize(rawList.value)\n})\n",[951],{"type":27,"tag":489,"props":952,"children":953},{"__ignoreMap":7},[954,1023,1066,1079,1112,1130,1156,1164,1172,1180,1202,1224],{"type":27,"tag":493,"props":955,"children":956},{"class":495,"line":20},[957,963,968,973,979,984,989,993,998,1002,1008,1013,1018],{"type":27,"tag":493,"props":958,"children":960},{"style":959},"--shiki-default:#F97583",[961],{"type":33,"value":962},"function",{"type":27,"tag":493,"props":964,"children":965},{"style":509},[966],{"type":33,"value":967}," expensiveNormalize",{"type":27,"tag":493,"props":969,"children":970},{"style":515},[971],{"type":33,"value":972},"(",{"type":27,"tag":493,"props":974,"children":976},{"style":975},"--shiki-default:#FFAB70",[977],{"type":33,"value":978},"list",{"type":27,"tag":493,"props":980,"children":981},{"style":959},[982],{"type":33,"value":983},":",{"type":27,"tag":493,"props":985,"children":986},{"style":509},[987],{"type":33,"value":988}," Array",{"type":27,"tag":493,"props":990,"children":991},{"style":515},[992],{"type":33,"value":703},{"type":27,"tag":493,"props":994,"children":995},{"style":509},[996],{"type":33,"value":997},"Record",{"type":27,"tag":493,"props":999,"children":1000},{"style":515},[1001],{"type":33,"value":703},{"type":27,"tag":493,"props":1003,"children":1005},{"style":1004},"--shiki-default:#79B8FF",[1006],{"type":33,"value":1007},"string",{"type":27,"tag":493,"props":1009,"children":1010},{"style":515},[1011],{"type":33,"value":1012},", ",{"type":27,"tag":493,"props":1014,"children":1015},{"style":1004},[1016],{"type":33,"value":1017},"unknown",{"type":27,"tag":493,"props":1019,"children":1020},{"style":515},[1021],{"type":33,"value":1022},">>) {\n",{"type":27,"tag":493,"props":1024,"children":1025},{"class":495,"line":505},[1026,1031,1036,1041,1046,1051,1056,1061],{"type":27,"tag":493,"props":1027,"children":1028},{"style":959},[1029],{"type":33,"value":1030},"  return",{"type":27,"tag":493,"props":1032,"children":1033},{"style":515},[1034],{"type":33,"value":1035}," list.",{"type":27,"tag":493,"props":1037,"children":1038},{"style":509},[1039],{"type":33,"value":1040},"map",{"type":27,"tag":493,"props":1042,"children":1043},{"style":515},[1044],{"type":33,"value":1045},"((",{"type":27,"tag":493,"props":1047,"children":1048},{"style":975},[1049],{"type":33,"value":1050},"item",{"type":27,"tag":493,"props":1052,"children":1053},{"style":515},[1054],{"type":33,"value":1055},") ",{"type":27,"tag":493,"props":1057,"children":1058},{"style":959},[1059],{"type":33,"value":1060},"=>",{"type":27,"tag":493,"props":1062,"children":1063},{"style":515},[1064],{"type":33,"value":1065}," ({\n",{"type":27,"tag":493,"props":1067,"children":1068},{"class":495,"line":521},[1069,1074],{"type":27,"tag":493,"props":1070,"children":1071},{"style":959},[1072],{"type":33,"value":1073},"    ...",{"type":27,"tag":493,"props":1075,"children":1076},{"style":515},[1077],{"type":33,"value":1078},"item,\n",{"type":27,"tag":493,"props":1080,"children":1081},{"class":495,"line":530},[1082,1087,1092,1097,1102,1107],{"type":27,"tag":493,"props":1083,"children":1084},{"style":515},[1085],{"type":33,"value":1086},"    keywords: ",{"type":27,"tag":493,"props":1088,"children":1089},{"style":509},[1090],{"type":33,"value":1091},"String",{"type":27,"tag":493,"props":1093,"children":1094},{"style":515},[1095],{"type":33,"value":1096},"(item.title ",{"type":27,"tag":493,"props":1098,"children":1099},{"style":959},[1100],{"type":33,"value":1101},"||",{"type":27,"tag":493,"props":1103,"children":1104},{"style":548},[1105],{"type":33,"value":1106}," ''",{"type":27,"tag":493,"props":1108,"children":1109},{"style":515},[1110],{"type":33,"value":1111},")\n",{"type":27,"tag":493,"props":1113,"children":1114},{"class":495,"line":539},[1115,1120,1125],{"type":27,"tag":493,"props":1116,"children":1117},{"style":515},[1118],{"type":33,"value":1119},"      .",{"type":27,"tag":493,"props":1121,"children":1122},{"style":509},[1123],{"type":33,"value":1124},"toLowerCase",{"type":27,"tag":493,"props":1126,"children":1127},{"style":515},[1128],{"type":33,"value":1129},"()\n",{"type":27,"tag":493,"props":1131,"children":1132},{"class":495,"line":559},[1133,1137,1142,1146,1151],{"type":27,"tag":493,"props":1134,"children":1135},{"style":515},[1136],{"type":33,"value":1119},{"type":27,"tag":493,"props":1138,"children":1139},{"style":509},[1140],{"type":33,"value":1141},"split",{"type":27,"tag":493,"props":1143,"children":1144},{"style":515},[1145],{"type":33,"value":972},{"type":27,"tag":493,"props":1147,"children":1148},{"style":548},[1149],{"type":33,"value":1150},"' '",{"type":27,"tag":493,"props":1152,"children":1153},{"style":515},[1154],{"type":33,"value":1155},"),\n",{"type":27,"tag":493,"props":1157,"children":1158},{"class":495,"line":577},[1159],{"type":27,"tag":493,"props":1160,"children":1161},{"style":515},[1162],{"type":33,"value":1163},"  }))\n",{"type":27,"tag":493,"props":1165,"children":1166},{"class":495,"line":595},[1167],{"type":27,"tag":493,"props":1168,"children":1169},{"style":515},[1170],{"type":33,"value":1171},"}\n",{"type":27,"tag":493,"props":1173,"children":1174},{"class":495,"line":604},[1175],{"type":27,"tag":493,"props":1176,"children":1177},{"emptyLinePlaceholder":18},[1178],{"type":33,"value":1179},"\n",{"type":27,"tag":493,"props":1181,"children":1182},{"class":495,"line":613},[1183,1188,1193,1197],{"type":27,"tag":493,"props":1184,"children":1185},{"style":509},[1186],{"type":33,"value":1187},"requestIdleCallback",{"type":27,"tag":493,"props":1189,"children":1190},{"style":515},[1191],{"type":33,"value":1192},"(() ",{"type":27,"tag":493,"props":1194,"children":1195},{"style":959},[1196],{"type":33,"value":1060},{"type":27,"tag":493,"props":1198,"children":1199},{"style":515},[1200],{"type":33,"value":1201}," {\n",{"type":27,"tag":493,"props":1203,"children":1205},{"class":495,"line":1204},11,[1206,1211,1215,1219],{"type":27,"tag":493,"props":1207,"children":1208},{"style":515},[1209],{"type":33,"value":1210},"  cachedResult.value ",{"type":27,"tag":493,"props":1212,"children":1213},{"style":959},[1214],{"type":33,"value":722},{"type":27,"tag":493,"props":1216,"children":1217},{"style":509},[1218],{"type":33,"value":967},{"type":27,"tag":493,"props":1220,"children":1221},{"style":515},[1222],{"type":33,"value":1223},"(rawList.value)\n",{"type":27,"tag":493,"props":1225,"children":1227},{"class":495,"line":1226},12,[1228],{"type":27,"tag":493,"props":1229,"children":1230},{"style":515},[1231],{"type":33,"value":619},{"type":27,"tag":149,"props":1233,"children":1235},{"id":1234},"_53-对第三方脚本要像对外包预算一样苛刻",[1236],{"type":33,"value":1237},"5.3 对第三方脚本要像对外包预算一样苛刻",{"type":27,"tag":35,"props":1239,"children":1240},{},[1241],{"type":33,"value":1242},"每多一个脚本，不只是多一个请求，而是多一个潜在的主线程租客。",{"type":27,"tag":35,"props":1244,"children":1245},{},[1246],{"type":33,"value":1247},"判断标准很简单：",{"type":27,"tag":41,"props":1249,"children":1250},{},[1251,1256,1261],{"type":27,"tag":45,"props":1252,"children":1253},{},[1254],{"type":33,"value":1255},"它真的带来业务价值吗？",{"type":27,"tag":45,"props":1257,"children":1258},{},[1259],{"type":33,"value":1260},"它必须首屏加载吗？",{"type":27,"tag":45,"props":1262,"children":1263},{},[1264],{"type":33,"value":1265},"它能否延迟、按页面、按用户群体加载？",{"type":27,"tag":138,"props":1267,"children":1268},{},[],{"type":27,"tag":142,"props":1270,"children":1272},{"id":1271},"_6-一个实用的治理节奏别一次性优化全站",[1273],{"type":33,"value":1274},"6. 一个实用的治理节奏：别一次性“优化全站”",{"type":27,"tag":35,"props":1276,"children":1277},{},[1278],{"type":33,"value":1279},"性能项目最容易死在“范围失控”。",{"type":27,"tag":35,"props":1281,"children":1282},{},[1283],{"type":33,"value":1284},"建议按三步走：",{"type":27,"tag":85,"props":1286,"children":1287},{},[1288,1293,1298],{"type":27,"tag":45,"props":1289,"children":1290},{},[1291],{"type":33,"value":1292},"先选 3 个最重要的模板页：首页、详情页、列表页",{"type":27,"tag":45,"props":1294,"children":1295},{},[1296],{"type":33,"value":1297},"每页只选一个核心指标主攻",{"type":27,"tag":45,"props":1299,"children":1300},{},[1301],{"type":33,"value":1302},"先把 75 分位用户打到合格线，再谈极致优化",{"type":27,"tag":35,"props":1304,"children":1305},{},[1306],{"type":33,"value":1307},"这比“全站一起冲 100 分”现实得多。",{"type":27,"tag":35,"props":1309,"children":1310},{},[1311],{"type":33,"value":1312},"因为性能不是竞赛题，而是长期运营指标。",{"type":27,"tag":138,"props":1314,"children":1315},{},[],{"type":27,"tag":142,"props":1317,"children":1319},{"id":1318},"_7-常见误区为什么你做了很多优化却没感觉",[1320],{"type":33,"value":1321},"7. 常见误区：为什么你做了很多优化却没感觉",{"type":27,"tag":149,"props":1323,"children":1325},{"id":1324},"_71-只看-lighthouse不看真实用户",[1326],{"type":33,"value":1327},"7.1 只看 Lighthouse，不看真实用户",{"type":27,"tag":35,"props":1329,"children":1330},{},[1331],{"type":33,"value":1332},"实验室数据适合排查，真实用户数据才决定业务体验。两者不能互相替代。",{"type":27,"tag":149,"props":1334,"children":1336},{"id":1335},"_72-只压缩资源不优化调度",[1337],{"type":33,"value":1338},"7.2 只压缩资源，不优化调度",{"type":27,"tag":35,"props":1340,"children":1341},{},[1342],{"type":33,"value":1343},"包体缩小当然有价值，但如果交互流程还是动辄全量重渲染，INP 依然会难看。",{"type":27,"tag":149,"props":1345,"children":1347},{"id":1346},"_73-把性能当成前端的-kpi",[1348],{"type":33,"value":1349},"7.3 把性能当成前端的 KPI",{"type":27,"tag":35,"props":1351,"children":1352},{},[1353],{"type":33,"value":1354},"LCP 牵涉后端缓存和首包策略，CLS 牵涉设计稿约束，INP 牵涉组件边界与脚本治理。性能从来不是前端独角戏。",{"type":27,"tag":138,"props":1356,"children":1357},{},[],{"type":27,"tag":142,"props":1359,"children":1361},{"id":1360},"总结",[1362],{"type":33,"value":1360},{"type":27,"tag":41,"props":1364,"children":1365},{},[1366,1371,1376,1381],{"type":27,"tag":45,"props":1367,"children":1368},{},[1369],{"type":33,"value":1370},"LCP 优化的是“关键内容何时出现”，核心是缩短关键路径。",{"type":27,"tag":45,"props":1372,"children":1373},{},[1374],{"type":33,"value":1375},"CLS 优化的是“界面是否值得信任”，核心是先占位再回填。",{"type":27,"tag":45,"props":1377,"children":1378},{},[1379],{"type":33,"value":1380},"INP 优化的是“交互是否被及时响应”，核心是减少主线程被绑架。",{"type":27,"tag":45,"props":1382,"children":1383},{},[1384],{"type":33,"value":1385},"真正有效的性能治理，不靠零散技巧，靠控制面清晰。",{"type":27,"tag":35,"props":1387,"children":1388},{},[1389],{"type":33,"value":1390},"小明收尾一句：",{"type":27,"tag":71,"props":1392,"children":1393},{},[1394],{"type":27,"tag":35,"props":1395,"children":1396},{},[1397],{"type":33,"value":1398},"性能从来不是让页面跑得更拼，而是让系统学会把力气花在用户真的在乎的地方。",{"type":27,"tag":1400,"props":1401,"children":1402},"style",{},[1403],{"type":33,"value":1404},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":7,"searchDepth":521,"depth":521,"links":1406},[1407,1412,1413,1418,1423,1428,1429,1434],{"id":144,"depth":505,"text":147,"children":1408},[1409,1410,1411],{"id":151,"depth":521,"text":154},{"id":182,"depth":521,"text":185},{"id":211,"depth":521,"text":214},{"id":268,"depth":505,"text":271},{"id":404,"depth":505,"text":407,"children":1414},[1415,1416,1417],{"id":415,"depth":521,"text":418},{"id":449,"depth":521,"text":452},{"id":622,"depth":521,"text":625},{"id":664,"depth":505,"text":667,"children":1419},[1420,1421,1422],{"id":683,"depth":521,"text":686},{"id":794,"depth":521,"text":797},{"id":828,"depth":521,"text":831},{"id":860,"depth":505,"text":863,"children":1424},[1425,1426,1427],{"id":871,"depth":521,"text":874},{"id":910,"depth":521,"text":913},{"id":1234,"depth":521,"text":1237},{"id":1271,"depth":505,"text":1274},{"id":1318,"depth":505,"text":1321,"children":1430},[1431,1432,1433],{"id":1324,"depth":521,"text":1327},{"id":1335,"depth":521,"text":1338},{"id":1346,"depth":521,"text":1349},{"id":1360,"depth":505,"text":1360},"markdown","content:topics:engineering:core-web-vitals-optimization-roadmap.md","content","topics/engineering/core-web-vitals-optimization-roadmap.md","topics/engineering/core-web-vitals-optimization-roadmap","md",1777109941066]