一、缓存
浏览器与服务器之间通过http header传递缓存信息,通过设置http header配置缓存机制。
cache-control
- cache-control可以在http request header中存在
- 也可以在http response header中存在
- 其作用就是让浏览器与服务器相互知道各自那边的缓存策略情况。
cache-control的属性
- max-age:指定缓存的最大有效时间。在这段时间之内有效,浏览器不用再向服务器请求,直接从缓存中读。status:200(from memory cache)。expires是过期时间配置(http1.0),优先级没有max-age高。
- s-maxage:如果既设置了max-age又设置了s-maxage。返回状态是304(去CDN拿的)。s-maxage只能指定public的缓存时间,比如CDN、代理服务器。
private缓存设备:只适用于当前用户访问并且读取信息。
public缓存设备:能被很多用户访问并且读取信息的。
s-maxage优先级高于max-age.
s-maxage对于public缓存设备来说才是有效的。
所以,s-maxage是对于CDN这样公共的public缓存设备来说的资源过期时间,浏览器从CDN取得资源,返回状态码304。 - no-cache:不会直接去浏览器缓存中读,会发请求到服务器,通过服务器的一些信息(比如:last-modified)来判断浏览器端的缓存是否过期,从而知道缓存策略。
- no-store:对资源不使用任何缓存策略。
Expires
Expire:缓存过期时间,用来指定资源的到期时间,是服务器端的具体时间点,告诉浏览器在过期时间前,浏览器可以直接从浏览器缓存取数据,而无需再次请求。
max-age也是这个意思,但max-age优先级高于expires,当没有设置max-age时,expires就生效。
expires和max-age都是浏览器端的缓存策略,在过期时间之前,都直接从浏览器缓存中读取数据。
但当服务器文件资源发生变化后,浏览器端并不会更新资源,这就引出了Last-Modified和If-Modified-Since这两字段。
Last-Modified、If-Modified-Since
- 基于客户端和服务端协商的缓存机制,可以取得最新的资源
- Last-Modified——response header
- If-Modified-Since——request header
- 需与cache-control共同使用
返回304,服务端资源没更新,客户端直接从缓存中读取资源。
返回200,服务端资源更新了,并发给客户端一份更新过的文件。
也就是说,当cache-control配了max-age,且max-age没有过期,会优先走max-age,从浏览器中读相关的文件,当max-age过期后,浏览器和服务器才会通过Last-Modified / If-Modified-Since进行协商,由服务端控制合理的缓存方式。
但Last-Modified有缺点。
Last-Modified的缺点
- 某些服务端不能获取精确的修改时间,也就不能准确返回。
- 文件修改时间改了,但文件内容却没有变
Etag的出现解决了该问题。
Etag / If-None-Match
- 文件内容的hash值,能唯一标识文件,当文件内容改变,hash值会跟着变化。
- Etag——response header
- If-None-Match——request header
- 需要与cache-control共同使用
实际上就是——分级缓存策略
通过对服务端的配置实现缓存策略。
二、缓存流程图
二、服务端性能优化
Vue渲染面临的问题是什么?为什么要用vue-ssr
多层次的优化方案
- 构建层模板编译
在webpack构建的时候将模板语法template编译成浏览器可以直接执行的html代码。 - 数据无关的prerender的方式
将每个用户看起来都一样的页面在webpack构建层直接编译成html代码,用户直接访问html,这样在浏览器端不会执行vue相关的代码。 - 服务端渲染
将浏览器端要做的运算移到服务端,是运算能力的平衡。
在服务端获取数据渲染页面,返回给浏览器html,能直接渲染出页面。
(vue-ssr:将首屏相关的一些数据在服务端直接生成html返回给客户端,客户端将html渲染出来,而不是在客户端执行相应的JS从而渲染出页面。所以,vue-ssr解决首屏渲染的问题)