[{"data":1,"prerenderedAt":160},["ShallowReactive",2],{"content-/blog/performance-optimization-2025":3,"related-blog":135},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"keywords":10,"author":11,"date":12,"category":13,"image":14,"body":15,"_type":129,"_id":130,"_source":131,"_file":132,"_stem":133,"_extension":134},"/blog/performance-optimization-2025","blog",false,"","2025 性能优化总结","页面加载速度提升 40%，编辑器响应速度提升 60%","2025 性能优化总结, Blog, HTMLPAGE","HTMLPAGE","2025-11-26","待分类","/content-images/blog/blog.jpg",{"type":16,"children":17,"toc":121},"root",[18,26,32,52,57,75,80,93,98,111,116],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","本文总结 2025 年前端与全栈性能优化的实用方法，涵盖首屏加载、运行时性能与构建时优化的最新实践。",{"type":19,"tag":27,"props":28,"children":30},"h3",{"id":29},"首屏与加载性能",[31],{"type":24,"value":29},{"type":19,"tag":33,"props":34,"children":35},"ul",{},[36,42,47],{"type":19,"tag":37,"props":38,"children":39},"li",{},[40],{"type":24,"value":41},"优先加载关键资源：Critical CSS、关键 JS 分割、预加载关键图片。",{"type":19,"tag":37,"props":43,"children":44},{},[45],{"type":24,"value":46},"使用 HTTP/2/3 与 CDN 边缘缓存，加速静态资源分发。",{"type":19,"tag":37,"props":48,"children":49},{},[50],{"type":24,"value":51},"图片采用现代格式（AVIF/WebP），并提供合适的尺寸与占位图（LQIP、blurhash）。",{"type":19,"tag":27,"props":53,"children":55},{"id":54},"运行时性能",[56],{"type":24,"value":54},{"type":19,"tag":33,"props":58,"children":59},{},[60,65,70],{"type":19,"tag":37,"props":61,"children":62},{},[63],{"type":24,"value":64},"减少重绘与回流：使用合适的 CSS 布局（grid/flex）和 transform 动画。",{"type":19,"tag":37,"props":66,"children":67},{},[68],{"type":24,"value":69},"懒加载非关键模块与图片、使用 IntersectionObserver 优化视口外资源加载。",{"type":19,"tag":37,"props":71,"children":72},{},[73],{"type":24,"value":74},"使用 web worker 或 off-main-thread 处理密集计算。",{"type":19,"tag":27,"props":76,"children":78},{"id":77},"构建优化",[79],{"type":24,"value":77},{"type":19,"tag":33,"props":81,"children":82},{},[83,88],{"type":19,"tag":37,"props":84,"children":85},{},[86],{"type":24,"value":87},"按需加载、Tree-shaking 与压缩（Terser/Esbuild），以及模块预解析（modulepreload）。",{"type":19,"tag":37,"props":89,"children":90},{},[91],{"type":24,"value":92},"控制依赖体积：审查第三方库、替换体积大的库为轻量替代品。",{"type":19,"tag":27,"props":94,"children":96},{"id":95},"监控与回归防护",[97],{"type":24,"value":95},{"type":19,"tag":33,"props":99,"children":100},{},[101,106],{"type":19,"tag":37,"props":102,"children":103},{},[104],{"type":24,"value":105},"集成 Web Vitals、RUM 与合成监控，持续追踪用户真实体验。",{"type":19,"tag":37,"props":107,"children":108},{},[109],{"type":24,"value":110},"在 CI 中加入 bundle size、性能基准检测，防止回归。",{"type":19,"tag":27,"props":112,"children":114},{"id":113},"结语",[115],{"type":24,"value":113},{"type":19,"tag":20,"props":117,"children":118},{},[119],{"type":24,"value":120},"性能是一项长期工程，需要从设计、构建到运行时持续关注。以度量驱动优化并在团队流程中嵌入性能检查，可在不牺牲开发效率的前提下显著改善用户体验。",{"title":7,"searchDepth":122,"depth":122,"links":123},3,[124,125,126,127,128],{"id":29,"depth":122,"text":29},{"id":54,"depth":122,"text":54},{"id":77,"depth":122,"text":77},{"id":95,"depth":122,"text":95},{"id":113,"depth":122,"text":113},"markdown","content:blog:performance-optimization-2025.md","content","blog/performance-optimization-2025.md","blog/performance-optimization-2025","md",[136,144,152],{"_path":137,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":138,"description":139,"keywords":140,"author":11,"date":12,"category":13,"image":14,"_type":129,"_id":141,"_source":131,"_file":142,"_stem":143,"_extension":134},"/blog/2025-q1-updates","2025 Q1 产品更新","第一季度重大功能发布：AI 生成优化、新模板上线、编辑器增强等","2025 Q1 产品更新, Blog, HTMLPAGE","content:blog:2025-q1-updates.md","blog/2025-q1-updates.md","blog/2025-q1-updates",{"_path":145,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":146,"description":147,"keywords":148,"author":11,"date":12,"category":13,"image":14,"_type":129,"_id":149,"_source":131,"_file":150,"_stem":151,"_extension":134},"/blog/2025-roadmap","2025 产品路线图","展望 2025 年的产品规划：AI 能力增强、模板扩充、国际化等","2025 产品路线图, Blog, HTMLPAGE","content:blog:2025-roadmap.md","blog/2025-roadmap.md","blog/2025-roadmap",{"_path":153,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":154,"description":155,"keywords":156,"author":11,"date":12,"category":13,"image":14,"_type":129,"_id":157,"_source":131,"_file":158,"_stem":159,"_extension":134},"/blog/ab-testing","A/B 测试","通过 A/B 测试验证设计方案","A/B 测试, Blog, HTMLPAGE","content:blog:ab-testing.md","blog/ab-testing.md","blog/ab-testing",1774945286017]