• 注册
  • 前端后端 前端后端 关注:0 内容:26

    html标签 设置页面缓存

  • 查看作者
  • 打赏作者
    • 前端后端
    • Lv.14
      帅气冲天

      前言

      通过html头文件meta标签给页面设置缓存

      方案

      为了提高访问速度,一些浏览器会缓存浏览过的页面

      通过下面③句meta语句,可清除浏览器中的缓存,让浏览器不缓存该页面,使页面无法脱机浏览

      <meta http-equiv="Pragma" content="no-cache">
      <meta http-equiv="Cache-Control" content="no-cache">
      <meta http-equiv="Expires" content="0">

      第①个meta标签:Pragma 与 no-cache 用于定义页面缓存(意思是不缓存页面)

      第②个meta标签:访问此页面不会在Internet临时文件夹留下页面缓存

      第③个meta标签:ie浏览器必须从服务端下载最新的内容

      cache-control (指定请求和响应遵循的缓存机制)

      用法1:(指导浏览器如何缓存某个响应以及缓存多长时间)

      <meta http-equiv="cache-control" content="no-cache" />

      共有以下几种用法:

      no-cache:先发送请求,与服务器确认该资源是否被更改,如果未被更改,则使用缓存。

      no-store:不允许缓存,每次都要去服务器上,下载完整的响应。(安全措施)

      public:缓存所有响应(并非必须,因为 max-age 也可以做到相同效果)。

      private:只为单个用户缓存,因此不允许任何中继进行缓存。(比如说CDN就不允许缓存private的响应)

      max-age:表示当前请求开始,该响应在多久内能被缓存和重用,而不去服务器重新请求。例如,max-age=60 表示响应可以再缓存和重用 60 秒。

      默认为 private,其作用根据不同的重新浏览方式分为以下几种情况:

      1、[打开新窗口] – 值为 private、no-cache、must-revalidate,那么打开新窗口访问时都会重新访问服务器。 而如果指定了 max-age 值,那么在此值内的时间里就不会重新访问服务器,例如: Cache-control: max-age=5(表示当访问此网页后的5秒内再次访问不会去服务器)

      2、[在地址栏回车] – 值为 private或must-revalidate则只有第一次访问时会访问服务器,以后就不再访问。 值为 no-cache,那么每次都会访问。 值为max-age,则在过期之前不会重复访问。

      3、[按后退按扭] – 值为 private、must-revalidate、max-age,则不会重访问, 值为 no-cache,则每次都重复访问 

      4、[按刷新按扭] – 无论为何值,都会重复访问 Cache-control值为“no-cache”时,访问此页面不会在Internet临时文件夹留下页面备份。


      用法2: (禁止百度自动转码)

      用于禁止当前页面在移动端浏览时,被百度自动转码。虽然百度的本意是好的,但是转码效果很多时候却不尽人意。所以可以在 head 中加入下面例子中的这句话,就可以避免百度自动转码了。

      <meta http-equiv="Cache-Control" content="no-siteapp" />

      还有一个就是: expires(可设置网页到期时间)

      用于设定网页的到期时间,过期后网页必须到服务器上重新传输。

      <meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />

      指定Expires值为一个早已过去的时间,那么访问此网时若重复在地址栏按回车,那么每次都会重复访问: Expires: Fri, 31 Dec 1999 16:00:00 GMT

      比如:禁止页面在IE中缓存 http响应消息头部设置: CacheControl = no-cache Pragma=no-cache Expires = -1

      Expires是个好东东,如果服务器上的网页经常变化,就把它设置为0,表示立即过期。

      <meta http-equiv="expires" content="0" />

       

      说明

      请根据自己实际情况做相应修改

      请登录之后再进行评论

      登录

      我关注的论坛

      暂没有数据

    • 发布内容
    • 做任务
    • 实时动态
    • 偏好设置
    • 帖子间隔 侧栏位置: