performance-optimization

性能优化

开发 Web 应用、主题和前端界面时，请遵循以下性能优化原则。

核心性能原则

• 优先采用服务器端渲染，而不是客户端 JavaScript
• 尽量减少客户端 JavaScript，以缩小打包体积并提升可交互时间
• 针对核心 Web 指标进行优化：LCP、FID 和 CLS
• 持续测量性能并建立基准
• 考虑每项架构决策对性能的影响

服务器端渲染

• 尽可能在服务器端渲染内容
• 使用流式渲染，以缩短首字节时间
• 为渲染内容实施合适的缓存策略
• 避免使用会延迟渲染的阻塞资源
• 在适用时预渲染静态内容

CSS 最佳实践

选择器效率

• 避免使用 ID 选择器设置样式，改用类选择器
• 尽可能将优先级保持为 0 1 0
• 避免选择器深度嵌套（最多 3 层）
• 使用 BEM 或类似的命名规范，以提高清晰度
• 优先使用类选择器，而非元素选择器

CSS 组织

• 使用 CSS 变量定义颜色、间距和重复值
• 按逻辑对相关样式进行分组
• 移除未使用的 CSS，以减小负载
• 考虑为首屏内容内联关键 CSS
• 对复杂布局使用 CSS containment

布局性能

• 避免布局抖动（强制同步布局）
• 使用 transform 和 opacity 实现动画（由 GPU 加速）
• 尽量减少绘制和合成操作
• 谨慎且有针对性地使用 will-change
• 优先使用 flexbox 和 grid，而非浮动和定位

JavaScript 优化

代码组织

• 使用模块模式组织代码
• 使用合适的标记为私有方法添加前缀
• 优先使用 const 而非 let；避免使用 var
• 原生 API 足以满足需求时，避免引入外部依赖
• 将代码拆分为逻辑清晰、可加载的代码块

加载策略

• 延迟加载非关键 JavaScript
• 对独立脚本使用异步加载
• 为大型应用实施代码拆分
• 延迟加载组件和路由
• 预加载关键资源

运行时性能

• 适当地对事件处理程序进行防抖和节流
• 使用 requestAnimationFrame 更新视觉效果
• 避免长时间运行的同步操作
• 采用高效的 DOM 操作模式
• 对 CPU 密集型任务使用 Web Workers

资源优化

图片

• 使用现代格式（WebP、AVIF），并提供备用格式
• 使用 srcset 实现响应式图片
• 延迟加载首屏以下的图片
• 优化并压缩所有图片
• 使用合适的图片尺寸

字体

• 对字体进行子集化，仅包含所需字符
• 使用 font-display: swap，提升用户感知的性能
• 预加载关键字体
• 限制字体变体数量
• 对非品牌文本考虑使用系统字体

缓存策略

• 为静态资源设置合适的缓存头
• 使用带版本号的文件名，以实现缓存失效
• 有效配置 CDN 缓存
• 使用 Service Worker 支持离线访问
• 在适当情况下缓存 API 响应

架构模式

主题和组件架构

• 将代码组织为逻辑清晰的区段和模块
• 使用恰当的文件夹结构，便于维护
• 明确划分职责
• 创建可复用、可组合的组件
• 记录组件 API 和用法

配置和设置

• 通过清晰的分组对设置进行逻辑组织
• 使用清晰、描述性强的命名规范
• 实施条件逻辑以降低复杂性
• 提供合理的默认值
• 在构建时验证配置

国际化性能

• 确保所有文本均可翻译
• 高效加载翻译（按语言区域拆分）
• 使用恰当的语言区域检测
• 适当缓存已翻译的内容
• 考虑从右向左（RTL）布局的影响

测量与监控

• 使用真实用户监控（RUM）获取生产环境洞察
• 设置合成监控以跟踪基准
• 持续监控 Core Web Vitals
• 在 CI/CD 中跟踪性能预算
• 分析并处理性能回归

数据库性能

• 优化查询并使用恰当的索引
• 实现连接池
• 缓存频繁访问的数据
• 对大型结果集进行分页
• 监控慢查询并定期优化