提问

如何做前端性能优化？

前端性能优化主要是为了提高页面的加载速度，优化用户的访问体验。

为了能够提高页面的加载速度，就需要从资源的数量、大小、加载方式、加载时间等方面去优化，包括：

• 资源压缩与合并

  对HTML、CSS、JS进行压缩和文件合并； 对图片进行压缩、使用雪碧图等；

  资源压缩后可以减少资源的大小，从而提高加载速度；

  而对文件进行合并，可以减少网站http请求的次数，让更多的资源能够并发完成加载。

• 对非核心代码使用异步加载。

  对于首屏渲染不需要使用到的代码，使用异步加载的方式，等待首屏渲染完成后，再进行加载。 可以使用 defer、 async 属性，或者动态脚本的方式进行脚本的异步加载。

• 避免使用 @import 加载 CSS资源

• 使用CDN服务，对内容进行分发，提高用户对资源请求的相应速度。

  还可以更细致的将 js、css资源放在一个CDN域名，将图片资源放在另一个CDN域名， 通过多个域名并发加载更多的资源，以减少最终等待时间。

• 利用 浏览器/HTTP 缓存

  对 JS、CSS、图片等资源，使用强缓存策略，使用打包工具对这些资源文件进行哈希重命名。 强缓存过的资源，二次访问时不会再发起网络请求，而是直接从浏览器缓存区读取。

• 服务器开启 GZip/Brotli 压缩，进一步减少请求文件大小