[{"data":1,"prerenderedAt":145},["ShallowReactive",2],{"content-/blog/css-optimization":3,"related-blog":120},{"_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":114,"_id":115,"_source":116,"_file":117,"_stem":118,"_extension":119},"/blog/css-optimization","blog",false,"","CSS 优化","CSS 选择器优化、关键 CSS 提取、减少重绘","CSS 优化, Blog, HTMLPAGE","HTMLPAGE","2025-11-26","待分类","/content-images/blog/blog.jpg",{"type":16,"children":17,"toc":106},"root",[18,26,32,47,52,65,70,83,88,96,101],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","CSS 优化涵盖样式的组织、按需加载与生成策略。本文列出常见方法，帮助减少渲染阻塞与样式计算成本。",{"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],{"type":19,"tag":37,"props":38,"children":39},"li",{},[40],{"type":24,"value":41},"使用原子化或 BEM 等命名约定减少样式冲突。",{"type":19,"tag":37,"props":43,"children":44},{},[45],{"type":24,"value":46},"抽象主题变量（二进制色、间距、字体）便于运行时切换与生成。",{"type":19,"tag":27,"props":48,"children":50},{"id":49},"构建优化",[51],{"type":24,"value":49},{"type":19,"tag":33,"props":53,"children":54},{},[55,60],{"type":19,"tag":37,"props":56,"children":57},{},[58],{"type":24,"value":59},"移除未使用样式（Purging）、压缩（cssnano）与按需加载 Critical CSS。",{"type":19,"tag":37,"props":61,"children":62},{},[63],{"type":24,"value":64},"使用 CSS-in-JS 或 CSS Modules 控制范围并支持按组件打包。",{"type":19,"tag":27,"props":66,"children":68},{"id":67},"运行时性能",[69],{"type":24,"value":67},{"type":19,"tag":33,"props":71,"children":72},{},[73,78],{"type":19,"tag":37,"props":74,"children":75},{},[76],{"type":24,"value":77},"减少复杂选择器与嵌套层级，避免触发昂贵的样式计算。",{"type":19,"tag":37,"props":79,"children":80},{},[81],{"type":24,"value":82},"对动画使用 transform 与 opacity，避免触发布局回流。",{"type":19,"tag":27,"props":84,"children":86},{"id":85},"生成与自动化",[87],{"type":24,"value":85},{"type":19,"tag":33,"props":89,"children":90},{},[91],{"type":19,"tag":37,"props":92,"children":93},{},[94],{"type":24,"value":95},"模板生成器应输出可缓存且可分割的 CSS，支持按需注入与异步加载。",{"type":19,"tag":27,"props":97,"children":99},{"id":98},"结论",[100],{"type":24,"value":98},{"type":19,"tag":20,"props":102,"children":103},{},[104],{"type":24,"value":105},"通过组织、构建和运行时的协同优化，可以显著降低首屏阻塞和长期样式重计算成本，提升用户体验。",{"title":7,"searchDepth":107,"depth":107,"links":108},3,[109,110,111,112,113],{"id":29,"depth":107,"text":29},{"id":49,"depth":107,"text":49},{"id":67,"depth":107,"text":67},{"id":85,"depth":107,"text":85},{"id":98,"depth":107,"text":98},"markdown","content:blog:css-optimization.md","content","blog/css-optimization.md","blog/css-optimization","md",[121,129,137],{"_path":122,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":123,"description":124,"keywords":125,"author":11,"date":12,"category":13,"image":14,"_type":114,"_id":126,"_source":116,"_file":127,"_stem":128,"_extension":119},"/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":130,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":131,"description":132,"keywords":133,"author":11,"date":12,"category":13,"image":14,"_type":114,"_id":134,"_source":116,"_file":135,"_stem":136,"_extension":119},"/blog/2025-roadmap","2025 产品路线图","展望 2025 年的产品规划：AI 能力增强、模板扩充、国际化等","2025 产品路线图, Blog, HTMLPAGE","content:blog:2025-roadmap.md","blog/2025-roadmap.md","blog/2025-roadmap",{"_path":138,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":139,"description":140,"keywords":141,"author":11,"date":12,"category":13,"image":14,"_type":114,"_id":142,"_source":116,"_file":143,"_stem":144,"_extension":119},"/blog/ab-testing","A/B 测试","通过 A/B 测试验证设计方案","A/B 测试, Blog, HTMLPAGE","content:blog:ab-testing.md","blog/ab-testing.md","blog/ab-testing",1774945277549]