---恢复内容开始---
缓存对于前端性能优化来说是一个很重要的点,良好的缓存策略可以降低资源的重复加载,提高网页的整体加载速度
缓存主要有两种:
- 强缓存
- 协商缓存
1、强缓存
缓存期间不需要请求,status code为200
强缓存有两种实现方式:
- Expires:Wed,22 Oct 2019 08:41:00 GMT
- Cache-Control:max-age=30
区别:
1)Expires时HTTP/1.0的产物,表示缓存的过期时间,但是受限于本地时间,可能会造成缓存失效
2)Cache-Control出现于HTTP/1.1,优先级高于Expores,表示资源回在30s后过去
2、协商缓存
如果强缓存过期了,我们可以使用协商缓存解决问题。
协商缓存需要请求,如果缓存有效会返回304
协商缓存需要客户端和服务端共同实现
协商缓存有两种实现方式:
- Last-Modified和If-Modified-Since:Last-Modified表示本地文件最后修改日期,If-Modified-Since会将Last-Modifed的值发送给服务器,询问服务器在该日期后资源是否有修改,如果有就会将新资源发送回来。(但若在本地打开缓存文件,就会造成Last-Modified被修改)
- ETag和If-None-Match:ETag类似于文件指纹,If-None-Match会将当前ETag发送给服务器,询问服务器该资源ETag是否变动,若有变动就将新资源发送回来,且ETag优先级高于Last-Modified
3、选择合适的缓存策略
大部分情况都可以使用过强缓存配合协商缓存来使用,特殊情况如下:
- 对某些不需要缓存的资源,使用Cache-Contro:no-store,表示缓存不需要缓存
- 对于频繁变动的资源,使用Cache-Control:no-cache配合ETag使用,表示该资源已经被缓存,但每次都会发请求询问资源是否更细
- 对于代码文件来说,通常使用Cache-Control:max-age=31536000并配合策略缓存使用,对文件进行指纹处理,以但文件名更改就会立刻下载新文件。
---恢复内容结束---
缓存对于前端性能优化来说是一个很重要的点,良好的缓存策略可以降低资源的重复加载,提高网页的整体加载速度
缓存主要有两种:
- 强缓存
- 协商缓存
1、强缓存
缓存期间不需要请求,status code为200
强缓存有两种实现方式:
- Expires:Wed,22 Oct 2019 08:41:00 GMT
- Cache-Control:max-age=30
区别:
1)Expires时HTTP/1.0的产物,表示缓存的过期时间,但是受限于本地时间,可能会造成缓存失效
2)Cache-Control出现于HTTP/1.1,优先级高于Expores,表示资源回在30s后过去
2、协商缓存
如果强缓存过期了,我们可以使用协商缓存解决问题。
协商缓存需要请求,如果缓存有效会返回304
协商缓存需要客户端和服务端共同实现
协商缓存有两种实现方式:
- Last-Modified和If-Modified-Since:Last-Modified表示本地文件最后修改日期,If-Modified-Since会将Last-Modifed的值发送给服务器,询问服务器在该日期后资源是否有修改,如果有就会将新资源发送回来。(但若在本地打开缓存文件,就会造成Last-Modified被修改)
- ETag和If-None-Match:ETag类似于文件指纹,If-None-Match会将当前ETag发送给服务器,询问服务器该资源ETag是否变动,若有变动就将新资源发送回来,且ETag优先级高于Last-Modified
3、选择合适的缓存策略
大部分情况都可以使用过强缓存配合协商缓存来使用,特殊情况如下:
- 对某些不需要缓存的资源,使用Cache-Contro:no-store,表示缓存不需要缓存
- 对于频繁变动的资源,使用Cache-Control:no-cache配合ETag使用,表示该资源已经被缓存,但每次都会发请求询问资源是否更细
- 对于代码文件来说,通常使用Cache-Control:max-age=31536000并配合策略缓存使用,对文件进行指纹处理,以但文件名更改就会立刻下载新文件。