(装载)

简要:添加Expires头能有效的利用浏览器的缓存能力来改善页面的性能,能在后续的页面中有效避免很多不必要的Http请求,WEB服务器使用Expires头来告诉Web客户端它可以使用一个组件的当前副本,直到指定的时间为止。

例如:Expires:Thu,15 Apr  2010  20:00:00  GMT;  他告诉浏览器缓存有效性持续到2010年4月15日为止,在这个时间之内相同的请求使用缓存,这个时间之外使用http请求。

Cathe-Control:max-age=315360000

Expires有一个非常大的缺陷,它使用一个固定的时间,要求服务器与客户端的时钟保持严格的同步,并且这一天到来后,服务器还得重新设定新的时间。

HTTP1.1引入了Cathe-Control,它使用max-age指定组件被缓存多久,从请求开始在max-age时间内浏览器使用缓存,之外的使用请求,这样就可以消除Expires的限制,

如果对浏览器兼容性要求很高的话,可以两个都使用。

这里对http 304 状态结合max-age做一个总结:

浏览器初次访问服务器---------------服务器返回200状态

如下图:

浏览器再次请求服务器时,浏览器会先判断max-age,如果到期则直接请求服务器,否则直接从缓存中取,

服务器收到请求后,判断文件是否被修改过,若是则直接返回200,否则返回304,浏览器将从缓存中获取文件。

若同步刷新页面,则浏览器并不会先判断max-age,而是直接发送请求,服务器接收到请求后,判断文件是否有变化,若有则返回200,若没有则返回304

修订文件名

浏览器利用max-age取出缓存有很大的缺陷,如果在max-age时间内,服务器文件有修改,这样用户就不能第一时间获取最新的信息,因此这里最有效的方法是修改请求的文件名。

但为了确保用户能获取组件最新版本,需要在整个项目中修改组件的文件名,这取决于你的html页面,这项工作可能很轻松也可能很痛苦,

这里先埋个伏笔:在生产环境中利用gulp和MD5加密自动化完成修订文件名功能^_^

Expires的更多相关文章

  1. nginx expires

    配置expiresexpires起到控制页面缓存的作用,合理的配置expires可以减少很多服务器的请求要配置expires,可以在http段中或者server段中或者location段中加入   1 ...

  2. Meta http-equiv属性与HTTP头的Expires中(Cache-control)详解

    一.概述 A.http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就 ...

  3. 浏览器缓存相关的Http头介绍:Expires,Cache-Control,Last-Modified,ETag

    转自:http://www.path8.net/tn/archives/2745 缓存对于web开发有重要作用,尤其是大负荷web系统开发中. 缓存分很多种:服务器缓存,第三方缓存,浏览器缓存等.其中 ...

  4. HTTP头的Expires与Cache-control

    HTTP头的Expires与Cache-control 1.概念 Cache-control用于控制HTTP缓存(在HTTP/1.0中可能部分没实现,仅仅实现了Pragma: no-cache) 数据 ...

  5. Nginx使用Expires增加浏览器缓存加速

    Max-age是指我们的web中的文件被用户访问(请求)后的存活时间,是个相对的值,相对Request_time(请求时间). Expires它比max-age要麻烦点,Expires指定的时间分&q ...

  6. 浏览器缓存详解:expires,cache-control,last-modified,etag详细说明

    最近在对CDN进行优化,对浏览器缓存深入研究了一下,记录一下,方便后来者 画了一个草图: 每个状态的详细说明如下: 1.Last-Modified 在浏览器第一次请求某一个URL时,服务器端的返回状态 ...

  7. Web前端性能优化教程03:添加Expires头

    本文是Web前端性能优化系列文章中的第三篇,主要讲述添内容:加Expires头.完整教程可查看:Web前端性能优化 什么是Expires头? Expires存储的是一个用来控制缓存失效的日期.当浏览器 ...

  8. Last-Modified、ETag、Expires和Cache-Control

    前言 在客户端通过浏览器发出第一次请求某一个URL时,根据 HTTP 协议的规定,浏览器会向服务器传送报头(Http Request Header),服务器端响应同时记录相关属性标记(Http Rep ...

  9. HttpCache ETag与Last-Modified与Expires

    Last-Modified 是检查一个资源最后修改时间.如果时间过期了则返回资源内容.如果没过期,返回304.当Last-Modified更新了,但是资源本质上没有更新,比如资源是A,Last-Mod ...

  10. Etag,Expires与Cache-control

    来介绍一下http中的这几个概念 先来介绍一下Etag: 看看百度来的简介:HTTP协议规格说明定义ETag为“被请求变量的实体值”.另一种说法是,ETag是一个可以与Web资源关联的记号(token ...

随机推荐

  1. hibernate抓取策略

    抓取策略(fetching strategy) 是指:当应用程序需要在(Hibernate实体对象图的)关联关系间进行导航的时候, Hibernate如何获取关联对象的策略.抓取策略可以在O/R映射的 ...

  2. Maven实战08_仓库

    何为Maven仓库 在Maven世界中.任何一个依赖.插件或者项目构建的输出,都可以称之为构件.例如依赖log4j-1.2.15.jar是一个构件,差价maven-compile-plugin-2.0 ...

  3. ThinkCMF框架任意内容包含漏洞复现

    1. 漏洞概述 ThinkCMF是一款基于PHP+MYSQL开发的中文内容管理框架,底层采用ThinkPHP3.2.3构建. 利用此漏洞无需任何权限情况下,构造恶意的url,可以向服务器写入任意内容的 ...

  4. linux操作mysql命令快速手记 — 让手指跟上思考的速度(二)

    这一篇是<mysql内建命令快速手记>的姐妹篇,废话不再赘述,直接上干货,跟老铁慢慢品 1.mysql -hlocalhost -uroot -proot,-h,-u,-p分别代表ip,u ...

  5. day69test

    目录 前端  vue main.js  vue CarTag.vue 小组件  vue Nav.vue小组件  vue Home.vue 页面  vue Car.vue 页面  vue CarDeta ...

  6. JS实用插件

    1. jQuery鼠标滚轮事件插件Mouse Wheel 下载链接:https://github.com/brandonaaron/jquery-mousewheel/ 使用方法: // using ...

  7. [转]8天玩转并行开发——第二天 Task的使用

    在我们了解Task之前,如果我们要使用多核的功能可能就会自己来开线程,然而这种线程模型在.net 4.0之后被一种称为基于 “任务的编程模型”所冲击,因为task会比thread具有更小的性能开销,不 ...

  8. JZOJ100048 【NOIP2017提高A组模拟7.14】紧急撤离

    题目 题目大意 给你一个01矩阵,每次询问从一个点是否可以走到另一个点. 每次走只能往右或者往下. 思考历程 这题啊,我想的时候真的是脑洞大开-- 首先,我一眼看下去,既然要询问是否联通,那么能不能求 ...

  9. ACM中Java使用注意事项

    1. String 类用来存储字符串,可以用charAt方法来取出其中某一字节,计数从0开始, 而不是像C/C++那样使用 []访问是每个字符. 2. 在主类中 main 方法必须是 public s ...

  10. vue项目打包部署到服务器,静态资源文件404

    js文件404问题        原因:打包的项目静态资源的路径需要设置为绝对路径.如果是相对路径会出错 解决办法:修改config/index.js文件,将 assetsPublicPath修改为' ...