• 304和浏览器http缓存


    浏览器虽然发现了本地有该资源的缓存,但是不确定是否是最新的,于是想服务器询问,若服务器认为浏览器的缓存版本还可用,那么便会返回304。

    浏览器缓存分为强缓存和协商缓存。
    1.浏览器请求某资源,通过header判断是否强缓存,若是强缓存,则从本地直接获取缓存文件,不发请求到浏览器
    2.若不是强缓存,发送请求到服务器,服务器通过一些request header确定是否是协商缓存,如果是,服务器将请求返回,但不返回资源,而是让客户端从本地缓存获取资源
    3.强缓存和协商缓存,资源都是本地,只是强缓存不会发送请求到服务器,协商缓存会发送请求到服务器。
    4.不是协商缓存,则浏览器将资源发送客户端。
    http缓存
    强缓存:服务端第一次响应请求时,告知浏览器还存在本地,设定时间,时间之内还获取该资源就从本地获取。
    Expires Cache-Control两个响应首部字段告知过期时间和最大生命周期。再次请求从缓存中找资源,若请求时间比Expires设定时间早则可用本地资源。
    http1.1 Cache-Control缓存资源最大生命周期,秒为单位。一起使用以Cache-Control为主。
    协商缓存:文件最后修改时间,服务器判断资源是否更新,未更新返回304表示not modified,浏览器从缓存加载。
    LastModified:资源最后更新时间,随服务器返回。if-modified-Since请求首部字段,通过比较两个时间判断资源是否修改。没有修改则协商缓存。
    1.浏览器第一次请求资源,服务器响应,返回资源,响应头加Last-Modified。
    2.浏览器再次请求资源,在请求头加上if modified since,该值为上次Last-Modified的值
    3.服务器接受请求,将ifmodifiedsince值和资源最后修改值做对比,若一致则返回304,协商缓存。
    Etag周期性重写资源,但资源没变化,加注释等无关紧要信息。用Etag区分两个资源是否一致,随response返回和请求头的if-none-match相比较,判断资源在两次请求中是否修改,未修改则协商缓存。
     还有三种缓存方式:application cache,cookie,localstorage,sessionstorage
     
     
     
     
     
     
     
     
     
     
     
  • 相关阅读:
    vue loading 插件编写与实战
    vue tab切换的几种方式
    IOS安卓常见问题
    vue.js 跨域的解决方法(转载)
    vue 根据设计稿rem适配
    vuex 文件夹目录整理
    vue项目优化之路由懒加载
    flutter 环境配置-01
    锚点 定位 导航 滑动
    居中 子元素无固定 宽高
  • 原文地址:https://www.cnblogs.com/ziqian9206/p/7123634.html
Copyright © 2020-2023  润新知