Skip to content

Latest commit

 

History

History
79 lines (62 loc) · 5.68 KB

190403.md

File metadata and controls

79 lines (62 loc) · 5.68 KB
Raw

减少服务器的压力

减少服务器的压力的宗旨一：减少请求

一，合并资源

  1. 将js,css进行适当的合并，但是体积会增大，这就是 vue 首屏白屏的原因
  2. 使用sprite图：将一个页面涉及到的所有零星图片都包含到一张大图中
  3. 图片懒加载：对可视区域外的图片，只有下拉到可视区域才进行加载

二，设定浏览器缓存

  1. node设置缓存

1. 设定强制缓存

  1. http1.0使用Expires进行设置，http1.1:Cache-Control进行设置
  2. 不需要发送HTTP请求到服务器，直接从本地磁盘（200 from disk cache）或者内存（200 from memory cache）获取缓存过的资源
  3. 使用了强缓存，如果服务器的文件进行了改变，浏览器也会在强缓存的时间内只读取缓存文件而不会实时更新
Expires
  1. 该字段是HTTP/1.0时的规范
  2. 它的值是一个绝对时间的GMT格式的时间字符串，如Expires: Mon, 06 Feb 2018 08:26:48 GMT
  3. 这个时间是服务器时间，当把客户端时间修改，与服务器时间出现较大偏差，可能会造成缓存失效。
Cache-Control

http1.1的规范，为了规避Expires会缓存失效的问题，所以使用了第一次正确请求的相对时间，且Cache-Control优先级也比EXpires高；下面是其它规范：

  1. public：客户端和代理服务器都可缓存，如 Browser <-- proxy1 <-- proxy2 <-- Server，中间的 proxy 可以缓存资源，比如下次再请求同一资源 proxy1 直接把自己缓存的东西给 Browser 而不再向 proxy2 要。
  2. private：所有内容只有客户端可以缓存，Cache-Control的默认取值
  3. no-cache：客户端缓存内容，但是是否使用缓存则需要经过对比缓存来验证决定，不进行强缓存
  4. no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
  5. max-age：max-age=xxx (xxx is numeric) 表示缓存内容将在 第一次正确请求后的 xxx ms 后失效
  6. s-maxage：公共缓存服务器响应的最大Age值，但如果应用服务器将Cache-Control设为private，代理服务器就不会将其保存在共享缓存里。
// 代理服务器以及cdn都可以缓存31536000ms
1. Cache-Control: public, max-age=31536000
// 只进行协商缓存
2. cache-control: no-cache
// 设置浏览器缓存以及公共缓存（cdn）的相对时间
3. cache-control: max-age=2592000,s-maxage=3600

2. 设定对比（协商）缓存

对比缓存或者协商缓存，我更喜欢叫对比缓存；因为基本就是对比文件改变时间，文件的etag

对比文件改变时间:Last-Modified / If-Modified-Since
Last-Modified:

文件第一次正确请求，服务的返回的响应头（Response headers）会携带最后的文件修改时间：Last-Modified 来告诉浏览器

If-Modified-Since:

再次请求服务器时，通过请求头（Requset Headers）携带此字段通知服务器上次请求时-服务器返回的资源最后修改时间;服务器收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对。若资源的最后修改时间大于If-Modified-Since，说明资源又被改动过，则响应整片资源内容，返回状态码200；若资源的最后修改时间小于或等于If-Modified-Since，说明资源无新修改，则响应HTTP 304，告知浏览器继续使用所保存的cache。

对比文件的Etag：Etag / If-None-Match（优先级高于Last-Modified / If-Modified-Since）
Etag（浏览器当前资源在服务器的唯一标识）

文件第一次正确请求，服务的返回的响应头（Response headers）会携带文件的Etag 来告诉浏览器

If-None-Match

再次请求服务器时，通过请求头（Requset Headers）携带If-None-Match此字段。 服务器收到请求后发现有头If-None-Match 则与被请求资源的唯一标识进行比对， 不同，说明资源又被改动过，则响应整片资源内容，返回状态码200； 相同，说明资源无新修改，则响应HTTP 304，告知浏览器继续使用所保存的cache。

为什么会有Etag
  1. 一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了，而重新GET；
  2. 某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说1s内修改了N次)，If-Modified-Since能检查到的粒度是s级的，这种修改无法判断(或者说UNIX记录MTIME只能精确到秒)；
  3. 某些服务器不能精确的得到文件的最后修改时间。

强缓存与对比缓存的区别与配合

区别
  1. 强制缓存返回状态码：200；对比缓存返回状态码：304；
  2. 强制缓存不需要发送到浏览器，而对比缓存需要通过服务器来确定本地缓存是否可用，304可用，200重新获取和更新本地缓存
配合

为甚么会有了强制缓存还要有对比缓存

  1. 强制缓存虽说可以有效减少服务器的请求次数且减少请求时间，但当服务器文件更新的时候，不能及时更新，所以需要对比缓存，来判断是本地缓存是否可用。
  2. 强制缓存一般看你资源更新的频率，如果更新频率慢，强制缓存可以设定一天
  3. 但代码更新到线上后用户强制缓存浏览器不能自行更新，我们又不能要求客户在系统更新后都进行一次缓存清理的操作。这时该怎么做，针对 vue 来说可以将 index.html 文件不用强缓存，所以版本更新可以及时更新js