从输入一个URL地址到浏览器完成整个渲染的过程

  1. 浏览器查找当前URL是否存在缓存(http缓存机制)

    缓存过程分析

    浏览器与服务器通信的方式为应答模式,即客户端发起请求-服务器响应请求。

    1. 浏览器每次向服务器请求的结果和标识,都会存入浏览器缓存中

    2. 浏览器向服务器发起请求后,会先从缓存中查找缓存结果和缓存标识,再进行下一步判断是否需要再次向服务器发起请求。1635426147(1)

    HTTP请求缓存分为两个部分,强制缓存和协商缓存。

    强制缓存

    强制缓存就是浏览器向缓存中查看结果,并根据缓存结果和缓存规则决定是否使用该缓存结果。

    1. 强制缓存失效,不存在缓存结果跟缓存标识。直接向服务器发起请求(等同于第一次请求)。1635428961(1)
    2. 强制缓存失效,存在缓存结果跟缓存标识。采取协商缓存。1635429639(1)
    3. 强制缓存生效,存在缓存结果跟缓存标识,未失效。直接使用浏览器缓存。1635429785(1)

    强制缓存规则

    控制强制缓存的字段为Expires和Cache-Control,其中Cache-Control的优先级比Expires高。

    协商缓存

    协商缓存就是在缓存结果和缓存标识存在但是失效的情况下,由服务器根据收到的缓存标识决定是否使用缓存的过程。

    1. 服务器发现资源无更新,协商缓存生效,返回状态码304。1635470627(1)
    2. 服务器发现资源已更新,协商缓存失效,返回新的内容,状态码200。1635470737(1)

    协商缓存规则

    控制协商缓存的字段有: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文件则会存入硬盘中。


继续更新

posted @ 2021-10-29 09:50  达不刘-  阅读(96)  评论(0编辑  收藏  举报