从输入一个URL地址到浏览器完成整个渲染的过程
-
浏览器查找当前URL是否存在缓存(http缓存机制)
缓存过程分析
浏览器与服务器通信的方式为应答模式,即客户端发起请求-服务器响应请求。
-
浏览器每次向服务器请求的结果和标识,都会存入浏览器缓存中
-
浏览器向服务器发起请求后,会先从缓存中查找缓存结果和缓存标识,再进行下一步判断是否需要再次向服务器发起请求。
HTTP请求缓存分为两个部分,强制缓存和协商缓存。
强制缓存
强制缓存就是浏览器向缓存中查看结果,并根据缓存结果和缓存规则决定是否使用该缓存结果。
- 强制缓存失效,不存在缓存结果跟缓存标识。直接向服务器发起请求(等同于第一次请求)。
- 强制缓存失效,存在缓存结果跟缓存标识。采取协商缓存。
- 强制缓存生效,存在缓存结果跟缓存标识,未失效。直接使用浏览器缓存。
强制缓存规则
控制强制缓存的字段为Expires和Cache-Control,其中Cache-Control的优先级比Expires高。
协商缓存
协商缓存就是在缓存结果和缓存标识存在但是失效的情况下,由服务器根据收到的缓存标识决定是否使用缓存的过程。
- 服务器发现资源无更新,协商缓存生效,返回状态码304。
- 服务器发现资源已更新,协商缓存失效,返回新的内容,状态码200。
协商缓存规则
控制协商缓存的字段有:Last-Modified/If-Modified-Since和Etag/If-None-Match。
- Last-Modified是该资源在服务器中最后一次修改的时间。
- If-Modified-Since是客户端在请求服务器时,携带Last-Modified字段,告诉服务器上次返回的资源的最后修改时间。服务器收到该字段后,与该资源在服务器最后被修改的时间做对比,如果不一致,则重新返回资源,否则使用缓存文件。
- Etag是服务器响应资源时,返回的该资源的唯一标识。
- If-None-Match是客户端再次发起请求时,携带资源的Etag字段,服务器收到请求后,发现有If-None-Match字段,与该资源在服务器上的Etag字段的值作比较,若相等则返回304表示无更新,不相等则返回新资源。
注:Etag / If-None-Match优先级高于Last-Modified / If-Modified-Since,同时存在则只有Etag / If-None-Match生效。
浏览器缓存存放
浏览器缓存有两个来源:from disk cache/form memory cache
from disk cache代表硬盘中的缓存;
form memory cache代表内存中的缓存。
在浏览器中,会在js和图片文件解析执行后存入内存缓存中;而css文件则会存入硬盘中。
-
继续更新