zoukankan      html  css  js  c++  java
  • 【转】Http Cache最基本的一些东西



    Http的Cache机制总共有4个组成部分: 

    Cache-Control: max-age=N(seconds) 
    Last-Modified: Date, If-Modified-Since: Date 
    Etag: "xxxx" 
    Expires: Date 

    它们都存在于Request或者Response的Header中 

    按照作用来分可以分为浏览器端和服务器端。 

    浏览器端: 
    注:刷新都会无视浏览器端的Cache 

    Cache-Control: max-age=N(seconds) 

    Expires: Date 

    Cache-Control的max-age优先级高于Expires(至少对于Apache是这样的),即如果定义了Cache-Control: max-age,则完全不需要加上Expries,因为根本没用。例如:你在浏览A页面时,A页面加载了一个名为B的JS文件,该JS文件的Response Header中有Cache-Control: max-age=60,如果你再访问任何其他用到B文件的页面时,60秒内浏览器完全不会向服务器发送请求,直接使用Cache中的内容。60秒以后,Cache失效。想每一次都发送请求,则max-age设为0 

    Cache-Control在Apache中的设置为 
    Header set Cache-Control "max-age: 60" 

    Expires是相同的功能,不过参数是个绝对的日期,不是一个相对的值 

    Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT" 
    如果使用mod_expires.so也可以根据相对值计算出绝对值 

    服务器端: 

    Last-Modified: Date, If-Modified-Since: Date 
    ETag 

    继续刚才上面的例子,当max-age超过以后,浏览器会向服务器端发送请求。在B文件上一次的Response Header中会带有Last-Modified: Date,这时新请求的Header中会有If-Modified-Since: Date。服务器端在收到请求后,将B的最后修改日期和Header中的日期进行对比,如果相同则说明B没有被修改过,返回304 Not Modified,否则返回200和B的内容 

    如果只设置了Last-Modified而没有设置Cache-Control,则不同浏览器的表现会不同: 1. IE中也许有个默认的非常大的max-age或者压根就是无限,服务器端修改的内容,IE中不会反映出来 2. FF和Webkit请求的比较随机,貌似刚刚变更后请求的会比较频繁,然后逐渐放大请求的间隔,但是服务器端修改了内容,我还没试出来浏览器不更新的... 

    Etag和Last-Modified也是类似的,只不过检查的不是最后修改的时间,而是被请求内容的Hash 

    Etag和Last-Modified在Apache中默认都是打开的,关闭的方法是 

    Header unset Etag 
    Header unset Last-Modified 

    综上所述: 

    对于静态的内容:如果引用静态文件时可以根据文件的修改时间生成动态的文件名,并rewrite到实际的文件,则可以设置max-age: 5184000(2个月,其实可以更长,比如1年),这样的话可以省去大量的http请求。否则的话,只能设置Last-Modified(或者Etag,Etag估计比较耗cpu) + max-age: 0,则每次都会发送请求,并且大多数会得到304 Not Modified 

    对于变更不频繁的动态内容:可以在response中加上Cache-Control: max-age=0 + Last-Modified(ETag),可以让很多200的请求变成304的请求 
     
    转自:http://alricren.iteye.com/blog/550753
  • 相关阅读:
    《java入门第一季》之面向对象(static关键字)
    《java入门第一季》之面向对象(面向对象案例详解)
    《java入门第一季》之面向对象面试题(面向对象都做了哪些事情)
    《java入门第一季》之面向对象(成员方法)
    《android入门第一季》之android目录结构详解
    Vue 中的 Props 与 Data 细微差别,你知道吗?
    使用Vue 3.0做JSX(TSX)风格的组件开发
    vue中Axios的封装和API接口的管理
    在 Vue.js 中制作自定义选择组件
    webpack打包原理
  • 原文地址:https://www.cnblogs.com/DarkMaster/p/4046237.html
Copyright © 2011-2022 走看看