前端性能优化你知道哪些？

前端性能优化总结：

1.减少 HTTP 请求数

前端开发80%以上的响应时间浪费在图片、样式、脚本等资源上传下载上，然而大多资源是必不可少的，我们减少 HTTP 请求数从以下方面进行：

①合并文件（JS/CSS文件/图片）

合并图片，当图片较多时，通过合并为一张大图，不仅能减少http请求数，还能利用缓存来提升性能。

合并CSS、JS文件，例如3个css文件可能会发出3此请求，用户等待时间较长，合并之后只需要发出一次请求，节省请求时间，加快页面的加载，用户体验感上升。

②行内图片（Base64 编码）

用 data: URL模式来把图片嵌入页面，会增加HTML文件的大小，通过编码的字符串将图片内嵌到网页文本中，会有效减少页面的大小。

③缓存策略

友好充分利用缓存，通过在请求头设置缓存属性，下次再次访问可以直接从本地获取资源，减少了不必要的数据传输，节省带宽、减少服务器的负担，提升网站性能、加快了客户端加载网页的速度。Expires 设置了一个时间，只要在这个时间之前，浏览器都不会请求文件，而是直接使用缓存。cache-control设置过期时间长度（秒），在这个时间范围内，浏览器就会直接读取缓存，当expires和Cache-Control都存在时，Cache-Control的优先级更大。

• 对于静态组件：通过设置一个遥远的将来时间作为 Expires 来实现永不失效
• 多余动态组件：用合适的 Cache-Control HTTP 头来让浏览器进行条件性的请求

2.使用CDN

CDN即内容分发网络，它是一组分布在多个不同地理位置的 Web 服务器，可以使用户就近取得所需内容，解决网络拥挤的状况，提高用户访问网站的响应速度。

3.优化资源加载位置

将 CSS 放在文件头部，JavaScript 文件放在底部，所有放在 head 标签里的 CSS 和 JS 文件都会堵塞渲染。如果这些 CSS 和 JS 加载和解析时间长，页面显示就是空白，将JS 文件要放在底部，会先解析HTML之后在解析JS。而CSS 文件还要放在头部，可以避免没有数据的页面被用户看到，体验不好。JS 文件如果想要放在头部，只要给 script 标签加上 defer 属性就可以了，异步下载，延迟执行。

4.开启GZIP

Gzip即数据压缩，用于压缩使用Internet传输的所有文本资源。将资源在服务端进行压缩，然后发送给浏览器后再进行解压，这样会降低文件传输大小，提高网页加载性能。开启GZIP的方法，到对应的web服务配置文件中设置。以Apache为例，在配置文件httpd.conf中添加：Accept-Encoding: gzip,deflate

例如，用 Vue 开发的项目构建后生成的 app.js 文件大小为 3.5MB，使用 Gzip 压缩后只有 1.4Mb。

5.图片优化

①尽可能的使用PNG格式的图片，它相对来说体积较小。

②对于不同格式的图片，在上线之前最好进行一定的优化。

③图片的延迟加载（懒加载）

在页面中，先不给图片设置路径，只有当图片出现在浏览器的可视区域时，才去加载真正的图片，这就是延迟加载。

④响应式图片

浏览器能够根据屏幕大小自动加载合适的图片。例如展示50*50大小的图片，用的是500*500的，应该展示适合的图片。

⑤降低图片质量

降低图片质量，图片100% 的质量和 90% 的质量通常看不出来区别，适当降低图片质量，不会影响页面展示。

⑥利用 CSS3 效果代替图片

CSS画的图片通常是原图图片大小的几分之一甚至几十分之一。有很多图片使用 CSS 效果（渐变、阴影等）就能画出来，这种情况选择 CSS3 效果更好。