zoukankan      html  css  js  c++  java
  • 浏览器缓存问题原理以及解决方案

    1. 浏览器缓存问题:

      简单来说,浏览器缓存就是把一个已经请求过的Web资源(如html页面,图片,js,数据等)拷贝一份副本储存在浏览器中。缓存会根据进来的请求保存输出内容的副本。当下一个请求来到的时候,如果是相同的URL,缓存会根据缓存机制决定是直接使用副本响应访问请求,还是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过网站的网页,当再次访问这个URL地址的时候,如果网页没有更新,就不会再次下载网页,而是直接使用本地缓存的网页。只有当网站明确标识资源已经更新,浏览器才会再次下载网页。

      为什么使用缓存:

      (1)减少网络带宽消耗

      (2)降低服务器压力

      (3)减少网络延迟,加快页面打开速度

      浏览器端的缓存规则:

      新鲜度(过期机制):也就是缓存副本有效期。

      校验值(验证机制):资源的实体标签Etag(EntityTag)

      解决方法:

      (1)使用HTMLMeta标签

      Web开发者可以在HTML页面的<head>节点中加入<meta>标签,代码如下

                   <metahttp-equiv="Pragma"content="no-cache">

      事实上这种禁用缓存的形式用处很有限:

                a.仅有IE才能识别这段meta标签含义,其它主流浏览器仅识别“Cache-Control:no-store”的meta标签。

                b.在IE中识别到该meta标签含义,并不一定会在请求字段加上Pragma,但的确会让当前页面每次都发新请求(仅限页面,页面上的资源则不受影响)

      (2)使用缓存有关的HTTP消息报头

                在HTTP请求和响应的消息报头中,常见的与缓存有关的消息报头有:

    2. 规则

      消息包头

      值/示例

      类型

      作用

      新鲜度

      Pragma

      no-cache

      响应

      告诉浏览器忽略资源的缓存副本,每次访问都需要去服务器拉取【http1.0中存在的字段,在http1.1已被抛弃,使用Cache-Control替代,但为了做http协议的向下兼容,很多网站依旧会带上这个字段】

      Expires

      Mon,15Aug201603:56:47GMT

      响应

      启用缓存和定义缓存时间。告诉浏览器资源缓存过期时间,如果还没过该时间点则不发请求【http1.0中存在的字段,该字段所定义的缓存时间是相对服务器上的时间而言的,如果客户端上的时间跟服务器上的时间不一致(特别是用户修改了自己电脑的系统时间),那缓存时间可能就没啥意义了。在HTTP1.1版开始,使用Cache-Control:max-age=秒替代】

      Cache-Control

      no-cache

      响应

      告诉浏览器忽略资源的缓存副本,强制每次请求直接发送给服务器,拉取资源,但不是“不缓存”

      no-store

      响应

      强制缓存在任何情况下都不要保留任何副本

      max-age=[秒]

      响应

      指明缓存副本的有效时长,从请求时间开始到过期时间之间的秒数

      public

      响应

      任何路径的缓存者(本地缓存、代理服务器),可以无条件的缓存改资源

      private

      响应

      只针对单个用户或者实体(不同用户、窗口)缓存资源

      Last-Modified

      Mon,15Aug201603:56:47GMT

      响应

      告诉浏览器这个资源最后的修改时间。服务器将资源传递给客户端时,会将资源最后更改的时间以“Last-Modified:GMT”的形式加在实体首部上一起返回给客户端【只能精确到秒级,如果某些文件在1秒钟以内,被修改多次的话,它将不能准确标注文件的修改时间】

      If-Modified-Since

      Mon,15Aug201603:56:47GMT

      请求

      其值为上次响应头的Last-Modified值,再次向web服务器请求时带上头If-Modified-Since。web服务器收到请求后发现有头If-Modified-Since则与被请求资源的最后修改时间进行比对。若最后修改时间较新,说明资源又被改动过,则响应整片资源内容(写在响应消息包体内),包括更新Last-Modified的值,HTTP200;若最后修改时间较旧,说明资源无新修改,则响应HTTP304(无需包体,节省浏览),告知浏览器继续使用所保存的cache

      校验值

      ETag

      "fd56273325a2114818df4f29a628226d"

      响应

      告诉浏览器当前资源在服务器的唯一标识符(生成规则又服务器决定)

      If-None-Match

      "fd56273325a2114818df4f29a628226d"

      请求

      当资源过期时(使用Cache-Control标识的max-age),发现资源具有Etage声明,则再次向web服务器请求时带上头If-None-Match(Etag的值)。web服务器收到请求后发现有头If-None-Match则与被请求资源的相应校验串进行比对,决定返回200或304

  • 相关阅读:
    Entity Framework Core 2.0 新特性
    asp.net core部署时自定义监听端口,提高部署的灵活性
    asp.net core使用jexus部署在linux无法正确 获取远程ip的解决办法
    使用xshell连接服务器,数字键盘无法使用解决办法
    使用Jexus 5.8.2在Centos下部署运行Asp.net core
    【DevOps】DevOps成功的八大炫酷工具
    【Network】Calico, Flannel, Weave and Docker Overlay Network 各种网络模型之间的区别
    【Network】UDP 大包怎么发? MTU怎么设置?
    【Network】高性能 UDP 应该怎么做?
    【Network】golang 容器项目 flannel/UDP相关资料
  • 原文地址:https://www.cnblogs.com/silent-190/p/9015564.html
Copyright © 2011-2022 走看看