• 浏览器缓存策略


    1. 缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。

    2. 浏览器优先会把一些小文件放到浏览器Memory中存储,大文件直接放到disk中,内存占用不多的时候,会优先放Memory中,但到底哪些资源放内存,哪些放disk,由Browse自己决定。

    3. 强缓存:不会向服务器发送请求,直接从缓存中读取资源,在chrome控制台的Network选项中可以看到该请求返回200的状态码,并且Size显示from disk cache或from memory cache。强缓存可以通过设置两种 HTTP Header 实现:Expires 和 Cache-Control。

    http1.0中的响应头里会有Expires和Last-Modified 字段,expires告诉Browse这个时间之前不向服务器发新请求。若过期再发请求,这时请求头会有if-modified-since头。

    缺点:它受限于本地时间,如果修改了本地时间,可能会造成缓存失效。

    • 如果本地打开缓存文件,即使没有对文件进行修改,但还是会造成 Last-Modified 被修改,服务端不能命中缓存导致发送相同的资源
    • 因为 Last-Modified 只能以计时,如果在不可感知的时间内修改完成文件,那么服务端会认为资源还是命中了,不会返回正确的资源

    http1.1的响应头中会有Cache-Control头和ETag头。再次发起请求时,会使用前面响应头里的ETag字段,请求头里添加if-none-match字段。

    ETag 是一个服务端使用的hash签名算法,类似于Md5,sha1算法等,下图时一些cache-control头的说明。

      

     若都有这些头的时候,会优先使用http1.1中的头做缓存处理。

    4. 协商缓存,它就是当本地缓存失效后,会携带if-modified-since或者 if-none-match字段向服务器再次发请求,如果过期,返回200,若没有过期返回304,并更新浏览器缓存字段。

    总的浏览器缓存流程图

    注意

    • 性能上,Etag要逊于Last-Modified,毕竟Last-Modified只需要记录时间,而Etag需要服务器通过hash算法来计算出一个hash值。
    • 优先级上,服务器校验优先考虑Etag
    • 打开网页,地址栏输入地址: 查找 disk cache 中是否有匹配。如有则使用;如没有则发送网络请求
    • 普通刷新 (F5):因为 TAB 并没有关闭,因此 memory cache 是可用的,会被优先使用(如果匹配的话)。其次才是 disk cache。
    • 强制刷新 (Ctrl + F5):浏览器不使用缓存,因此发送的请求头部会带有 cache-control: no-cache(为了兼容,还带了 Pragma: no-cache),服务器直接返回 200 和最新内容。
  • 相关阅读:
    韦达定理+集合运算+整体运算
    最终评审及团队事后诸葛亮作业总结
    个人作业——软件评测
    团队作业第六次—软件著作权说明书
    团队第二次作业评分总结
    团队第一次作业评分总结
    团队作业第五次—项目冲刺
    团队作业第四次—项目系统设计与数据库设计
    结对第二次作业评测总结
    团队作业第一次—团队展示
  • 原文地址:https://www.cnblogs.com/roy1/p/13710238.html
Copyright © 2020-2023  润新知