此页内容

约 451 字大约 2 分钟

2022-04-14

提问

如何做前端性能优化?

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

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

  • 资源压缩与合并

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

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

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

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

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

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

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

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

  • 利用 浏览器/HTTP 缓存

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

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