前端性能优化

[scarcat]

关键字

减少、减小、按需加载、缓存、复用等

• 减少请求
  • 合并JS 和 CSS、雪碧图；
  • 内链 CSS、Base64 图片；
• 减小内容
  • 拆分代码，按需加载；
  • 压缩JS、CSS、图片；
  • HTTP 请求压缩，比如 gzip 压缩内容；
  • 使用 HTTP / 2（请求头压缩、多路复用）；
  • 减小 Cookie；
  • 首屏优化；
• 合理使用缓存
  • DNS 缓存；
  • HTTP 缓存；
  • 合理使用 PWA；
  • 复用 HTTP 连接，比如设置 keep-alive，使用 HTTP/2 等
• 优化渲染和 JS 执行
  • CSS 方法头部，JS 放在尾部，或者设置 defer、async 属性；
  • 优化 DOM 操作；
  • 适当缓存耗时操作结果；