Back to Details

performance-optimization

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Performance Optimization

性能优化

Apply these performance optimization principles when developing web applications, themes, and frontend interfaces.
在开发Web应用、主题及前端界面时，请遵循以下性能优化原则。

Core Performance Principles

核心性能原则

  • Prioritize server-side rendering as a first principle, as opposed to client-side JavaScript
  • Minimize client-side JavaScript to reduce bundle size and improve Time to Interactive
  • Optimize for Core Web Vitals: LCP, FID, and CLS
  • Measure performance continuously and establish baselines
  • Consider performance impact of every architectural decision
  • 将服务端渲染作为首要原则，而非客户端JavaScript
  • 最小化客户端JavaScript以减小包体积，提升交互时间（Time to Interactive）
  • 针对Core Web Vitals进行优化：LCP、FID和CLS
  • 持续测量性能并建立基准
  • 考量每一个架构决策对性能的影响

Server-Side Rendering

服务端渲染

  • Render content server-side whenever possible
  • Use streaming rendering for faster Time to First Byte
  • Implement proper caching strategies for rendered content
  • Avoid blocking resources that delay rendering
  • Pre-render static content where applicable
  • 尽可能通过服务端渲染内容
  • 使用流式渲染以加快首字节时间（Time to First Byte）
  • 为渲染内容实施恰当的缓存策略
  • 避免使用会延迟渲染的阻塞资源
  • 适当时预渲染静态内容

CSS Best Practices

CSS最佳实践

Selector Efficiency

选择器效率

  • Avoid ID selectors for styling; use classes instead
  • Maintain specificity at 0 1 0 where possible
  • Avoid deep nesting of selectors (max 3 levels)
  • Use BEM or similar naming conventions for clarity
  • Prefer class selectors over element selectors
  • 避免使用ID选择器进行样式设置；改用类选择器
  • 尽可能保持特异性为0 1 0
  • 避免选择器深度嵌套（最多3层）
  • 使用BEM或类似命名约定以提升清晰度
  • 优先使用类选择器而非元素选择器

CSS Organization

CSS组织

  • Use CSS variables for colors, spacing, and repeated values
  • Group related styles logically
  • Remove unused CSS to reduce payload
  • Consider critical CSS inlining for above-the-fold content
  • Use CSS containment for complex layouts
  • 使用CSS变量定义颜色、间距及重复值
  • 按逻辑分组相关样式
  • 移除未使用的CSS以减小负载
  • 考虑将首屏内容的关键CSS内联
  • 为复杂布局使用CSS containment

Layout Performance

布局性能

  • Avoid layout thrashing (forced synchronous layouts)
  • Use transform and opacity for animations (GPU accelerated)
  • Minimize paint and composite operations
  • Use will-change sparingly and intentionally
  • Prefer flexbox and grid over floats and positioning
  • 避免布局抖动（强制同步布局）
  • 使用transform和opacity实现动画（GPU加速）
  • 最小化绘制和合成操作
  • 谨慎且有针对性地使用will-change
  • 优先使用flexbox和grid而非浮动和定位

JavaScript Optimization

JavaScript优化

Code Organization

代码组织

  • Use the module pattern for code organization
  • Prefix private methods with appropriate indicators
  • Prefer const over let; avoid var
  • Avoid external dependencies when native APIs suffice
  • Split code into logical, loadable chunks
  • 使用模块模式进行代码组织
  • 为私有方法添加合适的前缀标识
  • 优先使用const而非let；避免使用var
  • 当原生API可满足需求时，避免引入外部依赖
  • 将代码拆分为逻辑独立的可加载块

Loading Strategies

加载策略

  • Defer non-critical JavaScript
  • Use async loading for independent scripts
  • Implement code splitting for large applications
  • Lazy load components and routes
  • Preload critical resources
  • 延迟加载非关键JavaScript
  • 为独立脚本使用异步加载
  • 为大型应用实现代码分割
  • 懒加载组件和路由
  • 预加载关键资源

Runtime Performance

运行时性能

  • Debounce and throttle event handlers appropriately
  • Use requestAnimationFrame for visual updates
  • Avoid long-running synchronous operations
  • Implement efficient DOM manipulation patterns
  • Use Web Workers for CPU-intensive tasks
  • 为事件处理程序合理使用防抖和节流
  • 使用requestAnimationFrame进行视觉更新
  • 避免长时间运行的同步操作
  • 实现高效的DOM操作模式
  • 使用Web Workers处理CPU密集型任务

Asset Optimization

资源优化

Images

图片

  • Use modern formats (WebP, AVIF) with fallbacks
  • Implement responsive images with srcset
  • Lazy load below-the-fold images
  • Optimize and compress all images
  • Use appropriate image dimensions
  • 使用现代格式（WebP、AVIF）并提供降级方案
  • 利用srcset实现响应式图片
  • 懒加载首屏以下的图片
  • 优化并压缩所有图片
  • 使用合适的图片尺寸

Fonts

字体

  • Subset fonts to include only needed characters
  • Use font-display: swap for better perceived performance
  • Preload critical fonts
  • Limit the number of font variations
  • Consider system fonts for non-branded text
  • 对字体进行子集化，仅包含所需字符
  • 使用font-display: swap以提升感知性能
  • 预加载关键字体
  • 限制字体变体的数量
  • 非品牌文本可考虑使用系统字体

Caching Strategies

缓存策略

  • Implement appropriate cache headers for static assets
  • Use versioned filenames for cache busting
  • Configure CDN caching effectively
  • Implement service workers for offline support
  • Cache API responses where appropriate
  • 为静态资源设置恰当的缓存头
  • 使用带版本号的文件名以实现缓存击穿
  • 有效配置CDN缓存
  • 实现Service Workers以支持离线功能
  • 对合适的API响应进行缓存

Architecture Patterns

架构模式

Theme and Component Architecture

主题与组件架构

  • Organize code into logical sections and blocks
  • Use proper folder structure for maintainability
  • Implement clear separation of concerns
  • Create reusable, composable components
  • Document component APIs and usage
  • 将代码组织为逻辑清晰的区块和模块
  • 使用合理的文件夹结构以提升可维护性
  • 实现清晰的关注点分离
  • 创建可复用、可组合的组件
  • 编写组件API及使用文档

Configuration and Settings

配置与设置

  • Organize settings logically with clear groupings
  • Use clear, descriptive naming conventions
  • Implement conditional logic to reduce complexity
  • Provide sensible defaults
  • Validate configuration at build time
  • 按逻辑分组配置项，结构清晰
  • 使用清晰、描述性的命名约定
  • 实现条件逻辑以降低复杂度
  • 提供合理的默认值
  • 在构建时验证配置

Internationalization Performance

国际化性能

  • Ensure all text is translatable
  • Load translations efficiently (split by locale)
  • Use proper locale detection
  • Cache translated content appropriately
  • Consider right-to-left (RTL) layout implications
  • 确保所有文本可翻译
  • 高效加载翻译内容（按语言拆分）
  • 使用正确的语言环境检测方式
  • 对翻译内容进行合理缓存
  • 考虑从右到左（RTL）布局的影响

Measurement and Monitoring

测量与监控

  • Use Real User Monitoring (RUM) for production insights
  • Set up synthetic monitoring for baseline tracking
  • Monitor Core Web Vitals continuously
  • Track performance budgets in CI/CD
  • Analyze and act on performance regressions
  • 使用真实用户监控（RUM）获取生产环境洞察
  • 设置合成监控以跟踪基准性能
  • 持续监控Core Web Vitals
  • 在CI/CD中跟踪性能预算
  • 分析并处理性能回归问题

Database Performance

数据库性能

  • Optimize queries and use proper indexing
  • Implement connection pooling
  • Use caching for frequently accessed data
  • Paginate large result sets
  • Monitor slow queries and optimize regularly
  • 优化查询并使用恰当的索引
  • 实现连接池
  • 对频繁访问的数据进行缓存
  • 对大型结果集进行分页
  • 定期监控并优化慢查询