前端性能优化简单归类

前端性能优化的目的是什么？

1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的产品体验

2. 从服务商角度而言，优化能够减少页面请求数、或者减少请求所占带宽，能够节省可观的资源。

应该从那些方面进行性能优化

• 网络层面
• 渲染层面
• 性能监控
• webview

网络层面

DNS 解析、TCP 连接

• 这两个步骤，前端能做的努力非常有限。因此暂不研究。

http 请求/响应有两个大的方向可进行优化

1. 减少请求次数
2. 减少单次请求所花费的时间

减少请求次数

1.HTTP 缓存机制

如果前端想减少请求次数，可利用好浏览器的 HTTP 缓存机制，HTTP 缓存机制分为强缓存和协商缓存。

浏览器与服务器通信的方式为应答方式，即是：浏览器发起 HTTP 请求 - 服务器响应该请求。那么浏览器第一次向服务器

发起该请求后拿到你请求结果，会根据响应报文中 HTTP 头的缓存标识，决定是否缓存结果。是则将请求结果和缓存标识存入浏览器缓存中。

由上图可以看出

• 浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识

• 浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中

以上两点结论就是浏览器缓存机制的关键，他确保了每个请求的缓存存入与读取，只要我们再理解浏览器缓存的使用规则，那么所有的问题就迎刃而解了。为了方便理解，这里根据是否需要向服务器重新发起 HTTP 请求将缓存过程分为两个部分，分别是强制缓存和协商缓存。

强缓存 强缓存就是向浏览器缓存查找该请求结果，并根据结果的缓存规则来决定是否能使用该缓存结果的过程。当浏览器向服务器发起请求时，服务器会将

缓存规则放入 HTTP 响应报文的 HTTP 头中和请求结果一起返回给浏览器，控制强缓存的字段分别是 Expires 和 Cache-Control，其中Cache-control优先级比 Expires 高。

强制缓存的情况主要有三种：

1. 不存在该缓存结果和缓存标识，强制缓存失效，则直接向服务器发起请求（跟第一次发起请求一致）。
2. 存在该缓存结果和缓存标识，但该结果已失效，强制缓存失效，则使用协商缓存。
3. 存在该缓存结果和缓存标识，且改结果尚未失效，强制缓存生效，直接返回该结果。

协商缓存 协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识觉得是否使用缓存的过程，同样，协商缓存

的标识也是在响应报文中的 HTTP 头中和请求结果一起返回给浏览器的，控制协商缓存的字段分别有：Last-Modified / If-Modified-Since

和 Etag / If-None-Match,其中Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高

协商缓存的情况主要有以下两种情况：

1. 协商缓存生效，返回 304
2. 协商缓存失效，返回 200 和请求结果 2.MemoryCache

3.Service Worker Cache

4.Push Cache

5.本地存储

减少单次请求所花费的时间

1.webpack 性能优化调优与 Gzip 原理

1.图片优化，质量与性能的博弈

参考 1 (opens new window)