前端性能优化总结

发表于

前端性能优化的目的是什么？或者说为什么要做性能优化

  • 软件系统
    • 页面是否会崩溃
    • 软件系统的稳定性
    • 软件架构的稳定性
  • 代码
    • 代码规范一致性
    • 代码是否整洁、易读
    • 代码是否便于后期维护
  • 用户
    • 页面加载的更快
    • 对用户的操作响应的更及时
    • 给用户提供更为友好的体验

谈及优化，会有很多着手点来提升前端性能。只是应该 在有限的时间内，做更有价值的事情。

书归正传。

我认为前端性能优化可分为两个部分，加载时优化 和 运行时优化。

加载时优化

  1. 减少HTTP请求数
    • 这条策略是最重要最有效的。一个完整的请求是经过DNS寻址，与服务器建立连接，发送数据，等待服务器响应，接收数据这样一个消耗时间成本和资源成本的复杂的过程。
    • 从设计实现层面简化页面
    • 合理设置HTTP缓存
    • 资源合并与压缩
    • CSS Sprites
  2. 打包
    • 代码压缩合并
    • Tree-shaking
    • 图片压缩
    • gzip
  3. 资源加载
    • 预加载
    • 懒加载
    • 动态加载
  4. 缓存
    • 资源缓存
      • 浏览器缓存
      • CDN 缓存
    • 代码缓存
  5. 将 CSS 放在文件头部，JavaScript 文件放在底部
  6. SSR
  7. 缩减首屏加载时间
  8. 减小 Cookie 大小

运行时优化

  1. HTML
    • 简化布局，减少页面 DOM 数量
    • 避免层级深嵌套
    • 语义化标签
    • 避免使用 iframe 标签
  2. CSS
    • 尽量使用外部样式，并且放在页面顶部加载，一方面能够及时渲染，另一方面能够避免因某些样式导致阻塞渲染
    • 降低 CSS 选择器的复杂性
    • 使用 CSS3 新的属性
    • CSS 预处理器
  3. JavaScript
    • JavaScript 代码属于边加载边解析，解析的过程会阻塞浏览器渲染，因此需要把 JavaScript 代码放在页面底部加载
    • 减少 DOM 操作
    • 最小化 DOM 访问
    • 减少浏览器重绘重排
    • 防抖、节流
    • 写高性能的 JavaScript 代码
  4. 事件管理