【web前端性能优化】结合服务端的优化 缓存 服务端性能优化

一、缓存
浏览器与服务器之间通过http header传递缓存信息，通过设置http header配置缓存机制。

cache-control

1. cache-control可以在http request header中存在
2. 也可以在http response header中存在
3. 其作用就是让浏览器与服务器相互知道各自那边的缓存策略情况。

cache-control的属性

1. max-age:指定缓存的最大有效时间。在这段时间之内有效，浏览器不用再向服务器请求，直接从缓存中读。status:200(from memory cache)。expires是过期时间配置（http1.0），优先级没有max-age高。
2. 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。
3. no-cache:不会直接去浏览器缓存中读，会发请求到服务器，通过服务器的一些信息（比如：last-modified）来判断浏览器端的缓存是否过期，从而知道缓存策略。
4. 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的缺点

1. 某些服务端不能获取精确的修改时间，也就不能准确返回。
2. 文件修改时间改了，但文件内容却没有变

Etag的出现解决了该问题。

Etag / If-None-Match

1. 文件内容的hash值，能唯一标识文件，当文件内容改变，hash值会跟着变化。
2. Etag——response header
3. If-None-Match——request header
4. 需要与cache-control共同使用

实际上就是——分级缓存策略

通过对服务端的配置实现缓存策略。

二、缓存流程图

二、服务端性能优化

Vue渲染面临的问题是什么？为什么要用vue-ssr

多层次的优化方案

1. 构建层模板编译
   在webpack构建的时候将模板语法template编译成浏览器可以直接执行的html代码。
2. 数据无关的prerender的方式
   将每个用户看起来都一样的页面在webpack构建层直接编译成html代码，用户直接访问html，这样在浏览器端不会执行vue相关的代码。
3. 服务端渲染
   将浏览器端要做的运算移到服务端，是运算能力的平衡。
   在服务端获取数据渲染页面，返回给浏览器html，能直接渲染出页面。
   （vue-ssr:将首屏相关的一些数据在服务端直接生成html返回给客户端，客户端将html渲染出来，而不是在客户端执行相应的JS从而渲染出页面。所以，vue-ssr解决首屏渲染的问题）