# 前端性能优化?

前端性能优化主要是为了提高页面的加载速度,优化用户的访问体验。我认为可以从这些方面来进行优化。

第一个方面是页面的内容方面

  1. 通过文件合并、css 雪碧图、使用 base64 等方式来减少 HTTP 请求数,避免过多的请求造成等待的情况。

  2. 通过 DNS 缓存等机制来减少 DNS 的查询次数。

  3. 通过设置缓存策略,对常用不变的资源进行缓存。

  4. 使用延迟加载的方式,来减少页面首屏加载时需要请求的资源。延迟加载的资源当用户需要访问时,再去请求加载。

  5. 通过用户行为,对某些资源使用预加载的方式,来提高用户需要访问资源时的响应速度。

第二个方面是服务器方面

  1. 使用 CDN 服务,来提高用户对于资源请求时的响应速度。

  2. 服务器端启用 Gzip、Deflate 等方式对于传输的资源进行压缩,减小文件的体积。

  3. 尽可能减小 cookie 的大小,并且通过将静态资源分配到其他域名下,来避免对静态资源请求时携带不必要的 cookie

第三个方面是 CSS 和 JavaScript 方面

  1. 把样式表放在页面的 head 标签中,减少页面的首次渲染的时间。

  2. 避免使用 @import 标签。

  3. 尽量把 js 脚本放在页面底部或者使用 defer 或 async 属性,避免脚本的加载和执行阻塞页面的渲染。

  4. 通过对 JavaScript 和 CSS 的文件进行压缩,来减小文件的体积。

# 前端优化

  1. 降低请求量(减少请求数量和大小):合并资源,减少HTTP 请求数,minify / gzip 压缩,webP 图片、压缩图片,lazyLoad,防抖和节流。
  2. 加快请求速度:预解析DNS,预加载资源,懒加载图片等,减少域名数,并行加载,CDN 分发。
  3. 缓存:HTTP 协议缓存请求,离线缓存 manifest,离线数据缓存localStorage。
  4. 渲染:JS/CSS优化,加载顺序,服务端渲染,pipeline。