[{"data":1,"prerenderedAt":314},["ShallowReactive",2],{"content-/blog/category/performance":3,"related-blog":286},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"keywords":10,"category":11,"author":12,"date":13,"image":14,"body":15,"_type":280,"_id":281,"_source":282,"_file":283,"_stem":284,"_extension":285},"/blog/category/performance","category",false,"","性能优化 - HTMLPAGE 技术博客","端到端性能工程：指标体系、传输优化、渲染与交互、监控与回归防护。","性能优化, Performance, Web Vitals, 前端性能, 构建优化","性能优化","HTMLPAGE","2025-12-01","/content-images/blog/blog.jpg",{"type":16,"children":17,"toc":272},"root",[18,25,31,37,57,62,85,90,185,190,253,262],{"type":19,"tag":20,"props":21,"children":22},"element","h1",{"id":11},[23],{"type":24,"value":11},"text",{"type":19,"tag":26,"props":27,"children":28},"p",{},[29],{"type":24,"value":30},"以“真实用户体验”为最终度量的全链路性能工程：从构建体积、网络传输、渲染与交互，到线上监控与回归防护。",{"type":19,"tag":32,"props":33,"children":35},"h2",{"id":34},"指标与基线",[36],{"type":24,"value":34},{"type":19,"tag":38,"props":39,"children":40},"ul",{},[41,47,52],{"type":19,"tag":42,"props":43,"children":44},"li",{},[45],{"type":24,"value":46},"Web Vitals：LCP（可见速度）、INP（交互响应）、CLS（布局稳定）。",{"type":19,"tag":42,"props":48,"children":49},{},[50],{"type":24,"value":51},"资源预算：首包与关键路径资源设“体积预算”，超限阻断。",{"type":19,"tag":42,"props":53,"children":54},{},[55],{"type":24,"value":56},"覆盖率：关键路径缓存命中率、CDN 边缘命中率与回源率。",{"type":19,"tag":32,"props":58,"children":60},{"id":59},"策略与手段",[61],{"type":24,"value":59},{"type":19,"tag":38,"props":63,"children":64},{},[65,70,75,80],{"type":19,"tag":42,"props":66,"children":67},{},[68],{"type":24,"value":69},"打包与加载：代码分割、按需加载、模块去重、依赖瘦身、预加载关键资源。",{"type":19,"tag":42,"props":71,"children":72},{},[73],{"type":24,"value":74},"样式与布局：关键 CSS 内联、非关键延后、避免触发重排的动画。",{"type":19,"tag":42,"props":76,"children":77},{},[78],{"type":24,"value":79},"媒体与字体：AVIF/WebP、明确尺寸+占位、变体字体与字体显示策略。",{"type":19,"tag":42,"props":81,"children":82},{},[83],{"type":24,"value":84},"缓存与网络：强缓存+指纹、协商缓存、CDN 边缘缓存与路由规则。",{"type":19,"tag":32,"props":86,"children":88},{"id":87},"精选阅读",[89],{"type":24,"value":87},{"type":19,"tag":38,"props":91,"children":92},{},[93,113,131,149,167],{"type":19,"tag":42,"props":94,"children":95},{},[96,98,105,107],{"type":24,"value":97},"总览与路线：",{"type":19,"tag":99,"props":100,"children":102},"code",{"className":101},[],[103],{"type":24,"value":104},"/blog/performance-optimization",{"type":24,"value":106},"、",{"type":19,"tag":99,"props":108,"children":110},{"className":109},[],[111],{"type":24,"value":112},"/blog/web-vitals",{"type":19,"tag":42,"props":114,"children":115},{},[116,118,124,125],{"type":24,"value":117},"网络与缓存：",{"type":19,"tag":99,"props":119,"children":121},{"className":120},[],[122],{"type":24,"value":123},"/blog/caching-strategy",{"type":24,"value":106},{"type":19,"tag":99,"props":126,"children":128},{"className":127},[],[129],{"type":24,"value":130},"/blog/http-caching",{"type":19,"tag":42,"props":132,"children":133},{},[134,136,142,143],{"type":24,"value":135},"打包与代码：",{"type":19,"tag":99,"props":137,"children":139},{"className":138},[],[140],{"type":24,"value":141},"/blog/bundle-optimization",{"type":24,"value":106},{"type":19,"tag":99,"props":144,"children":146},{"className":145},[],[147],{"type":24,"value":148},"/blog/code-splitting-practices",{"type":19,"tag":42,"props":150,"children":151},{},[152,154,160,161],{"type":24,"value":153},"媒体与渲染：",{"type":19,"tag":99,"props":155,"children":157},{"className":156},[],[158],{"type":24,"value":159},"/blog/image-optimization",{"type":24,"value":106},{"type":19,"tag":99,"props":162,"children":164},{"className":163},[],[165],{"type":24,"value":166},"/blog/responsive-layout",{"type":19,"tag":42,"props":168,"children":169},{},[170,172,178,179],{"type":24,"value":171},"评估与改进：",{"type":19,"tag":99,"props":173,"children":175},{"className":174},[],[176],{"type":24,"value":177},"/blog/lighthouse-optimization",{"type":24,"value":106},{"type":19,"tag":99,"props":180,"children":182},{"className":181},[],[183],{"type":24,"value":184},"/blog/streaming-optimization",{"type":19,"tag":32,"props":186,"children":188},{"id":187},"团队落地清单",[189],{"type":24,"value":187},{"type":19,"tag":38,"props":191,"children":194},{"className":192},[193],"contains-task-list",[195,208,217,226,235,244],{"type":19,"tag":42,"props":196,"children":199},{"className":197},[198],"task-list-item",[200,206],{"type":19,"tag":201,"props":202,"children":205},"input",{"disabled":203,"type":204},true,"checkbox",[],{"type":24,"value":207}," 路由级代码分割与首屏关键 CSS 内联",{"type":19,"tag":42,"props":209,"children":211},{"className":210},[198],[212,215],{"type":19,"tag":201,"props":213,"children":214},{"disabled":203,"type":204},[],{"type":24,"value":216}," 静态资源全部指纹化，CDN 缓存与回源率监控",{"type":19,"tag":42,"props":218,"children":220},{"className":219},[198],[221,224],{"type":19,"tag":201,"props":222,"children":223},{"disabled":203,"type":204},[],{"type":24,"value":225}," 图片具备尺寸、使用 AVIF/WebP 与占位，视频按带宽自适应",{"type":19,"tag":42,"props":227,"children":229},{"className":228},[198],[230,233],{"type":19,"tag":201,"props":231,"children":232},{"disabled":203,"type":204},[],{"type":24,"value":234}," RUM 采集 LCP/INP/CLS，Lighthouse 评分进入 CI 守门",{"type":19,"tag":42,"props":236,"children":238},{"className":237},[198],[239,242],{"type":19,"tag":201,"props":240,"children":241},{"disabled":203,"type":204},[],{"type":24,"value":243}," 为高风险依赖建立“体积预算”，超出自动告警/阻断",{"type":19,"tag":42,"props":245,"children":247},{"className":246},[198],[248,251],{"type":19,"tag":201,"props":249,"children":250},{"disabled":203,"type":204},[],{"type":24,"value":252}," 与无障碍并行治理，避免性能优化引入可达性回退",{"type":19,"tag":254,"props":255,"children":256},"blockquote",{},[257],{"type":19,"tag":26,"props":258,"children":259},{},[260],{"type":24,"value":261},"下方将自动汇总该分类的相关文章。",{"type":19,"tag":26,"props":263,"children":264},{},[265],{"type":19,"tag":266,"props":267,"children":269},"a",{"href":268},"/blog",[270],{"type":24,"value":271},"← 返回博客首页",{"title":7,"searchDepth":273,"depth":273,"links":274},3,[275,277,278,279],{"id":34,"depth":276,"text":34},2,{"id":59,"depth":276,"text":59},{"id":87,"depth":276,"text":87},{"id":187,"depth":276,"text":187},"markdown","content:blog:category:performance.md","content","blog/category/performance.md","blog/category/performance","md",[287,298,306],{"_path":288,"_dir":289,"_draft":6,"_partial":6,"_locale":7,"title":290,"description":291,"keywords":292,"author":12,"date":293,"category":294,"image":14,"_type":280,"_id":295,"_source":282,"_file":296,"_stem":297,"_extension":285},"/blog/2025-q1-updates","blog","2025 Q1 产品更新","第一季度重大功能发布：AI 生成优化、新模板上线、编辑器增强等","2025 Q1 产品更新, Blog, HTMLPAGE","2025-11-26","待分类","content:blog:2025-q1-updates.md","blog/2025-q1-updates.md","blog/2025-q1-updates",{"_path":299,"_dir":289,"_draft":6,"_partial":6,"_locale":7,"title":300,"description":301,"keywords":302,"author":12,"date":293,"category":294,"image":14,"_type":280,"_id":303,"_source":282,"_file":304,"_stem":305,"_extension":285},"/blog/2025-roadmap","2025 产品路线图","展望 2025 年的产品规划：AI 能力增强、模板扩充、国际化等","2025 产品路线图, Blog, HTMLPAGE","content:blog:2025-roadmap.md","blog/2025-roadmap.md","blog/2025-roadmap",{"_path":307,"_dir":289,"_draft":6,"_partial":6,"_locale":7,"title":308,"description":309,"keywords":310,"author":12,"date":293,"category":294,"image":14,"_type":280,"_id":311,"_source":282,"_file":312,"_stem":313,"_extension":285},"/blog/ab-testing","A/B 测试","通过 A/B 测试验证设计方案","A/B 测试, Blog, HTMLPAGE","content:blog:ab-testing.md","blog/ab-testing.md","blog/ab-testing",1774945277117]