前端性能优化
约 449 字
提问
如何做前端性能优化？
前端性能优化主要是为了提高页面的加载速度，优化用户的访问体验。
为了能够提高页面的加载速度，就需要从资源的数量、大小、加载方式、加载时间等方面去优化，包括：
资源压缩与合并
对HTML、CSS、JS进行压缩和文件合并； 对图片进行压缩、使用雪碧图等；
资源压缩后可以减少资源的大小，从而提高加载速度；
而对文件进行合并，可以减少网站http请求的次数，让更多的资源能够并发完成加载。
对非核心代码使用异步加载。
对于首屏渲染不需要使用到的代码，使用异步加载的方式，等待首屏渲染完成后，再进行加载。 可以使用 defer、 async 属性，或者动态脚本的方式进行脚本的异步加载。
避免使用
@import加载 CSS资源使用CDN服务，对内容进行分发，提高用户对资源请求的相应速度。
还可以更细致的将 js、css资源放在一个CDN域名，将图片资源放在另一个CDN域名， 通过多个域名并发加载更多的资源，以减少最终等待时间。
利用 浏览器/HTTP 缓存
对 JS、CSS、图片等资源，使用强缓存策略，使用打包工具对这些资源文件进行哈希重命名。 强缓存过的资源，二次访问时不会再发起网络请求，而是直接从浏览器缓存区读取。
服务器开启 GZip/Brotli 压缩，进一步减少请求文件大小