要:添加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页面,这项工作可能很轻松也可能很痛苦,

今天在群里聊天。说道了Expires。这里来说明下这两个的区别吧。
1.概念
Cache-control 用于控制HTTP缓存(在HTTP/1.0中可能部分没实现,仅仅实现了 Pragma: no-cache)
Expires 表示存在时间,允许客户端在这个时间之前不去检查(发请求),等同max-age的效果。但是如果同时存在,则被Cache-Control的max-age覆盖。

缓存头Cache-Control的含义和使用

Cache-Control 的含义
可缓存性
public,http 请求返回的过程当中,在 cache-control 中设置这个值,代表 http 请求返回的内容所经过的任何路径当中(包括中间一些http代理服务器以及发出请求的客户端浏览器),都可以对返回内容进行缓存操作。

private,代表只有发起请求的浏览器才可以进行缓存

no-cache,可以在本地进行缓存,但每次发请求时,都要向服务器进行验证,如果服务器允许,才能使用本地缓存。

到期
max-age=,缓存多少秒后过期,过期之后浏览器才会再次发送请求。

s-maxage=,浏览器基本用不到,会代替 max-age,但只有在代理服务器中才会生效。在代理服务器中,如果都设置了 max-age,s-maxage,还是会读取 s-maxage。

max-stale=,浏览器基本用不到,当 max-age 过期后,如果返回资源中有 max-stale 的设置。max-stale 是发起请求方主动携带的头,即使 max-age 过期,只要 max-stale 没过期,可以继续使用缓存资源,不需要重新请求。浏览器主动设置这个头,只有在发起端才有用。

重新验证
must-revalidate,浏览器可能会用到,如果 max-age 过期,需要重新发送请求,获取这部分数据,再来验证数据是否真的过期,而不能直接使用本地缓存。

proxy-revalidate,用在缓存服务器中,指定缓存服务器过期后,必须向源服务器重新请求,不能直接使用本地缓存。

其他
no-store,本地和代理服务器都不可以存储缓存,每次都要重新请求,拿到内容。

no-transform,主要是用在 proxy 服务器,不允许进行格式转换。

Cache-Control 的使用
浏览器缓存

通过 Cache-Control 以及 max-age 设置,达到长缓存的效果。

启动服务器 node server.js,在 localhost:8888 打开,查看network,当设置 max-age 后,刷新页面,浏览器直接从缓存中进行读取,不去要再向服务器请求,达到缓存静态资源的目的。

存在的问题,服务端修改返回内容,客户端没有加载新的内容,因为请求 url 没变,浏览器会直接从缓存读取,不需要经过服务端验证,导致静态资源更新后,没有及时更新到客户端。

解决方案,打包静态资源时,根据内容进行 hash 计算,生成文件名的 hash 码。内容变,hash 码变,请求资源 url 变,浏览器重新请求加载资源,达到更新缓存的目的。

// server.js
const http = require('http')
const fs = require('fs') http.createServer(function (request, response) {
console.log('request come', request.url) if (request.url === '/') {
const html = fs.readFileSync('test.html', 'utf8')
response.writeHead(200, {
'Content-Type': 'text/html'
})
response.end(html)
} if (request.url === '/script.js') {
response.writeHead(200, {
'Content-Type': 'text/javascript',
'Cache-Control': 'max-age=200' // 浏览器缓存时间
})
response.end('console.log("script loaded twice")')
}
}).listen(8888) console.log('server listening on 8888')

max-age可以接收很多值,如 ‘Cache-Control’: ‘max-age=200, public’

缓存验证Last-Modified和Etag的使用
资源验证

验证头
Last-Modified

Etag

Last-Modified
上次修改时间。

配合If-Modified-Since或If-Unmodified-Since使用,通常浏览器使用前者。

服务器对比上次修改时间以验证资源是否需要更新。

Etag
数据签名,资源内容会对应有一个唯一的签名,如果资源数据更改,签名也会变。

配合If-Match或者If-None-Match使用,其值就是服务端返回的 Etag 值

对比资源的签名判断是否使用缓存

验证头的使用
服务器设置 Last-Modifed 和 Etag 的值,浏览器请求会携带这两个头,在请求头中,会有 If-Modified-since: Last-Modifed值 和 If-None-Match: Etag值。

这时 response 中是有内容的,这里希望服务器不返回实际的内容,只需要告诉浏览器直接读取缓存即可。通过在服务器端进行判断。

这时查看 respones 发现还是有内容,这个内容是 Chrome 浏览器 从缓存中读取显示出来的,服务器没有返回内容。

如何判断服务端通过验证,但是从缓存读取的呢,通过服务器设置 HTTP Code 304,Not Modified 表示资源没有修改,直接读缓存,这时就会忽略服务端返回的内容。

Chrome 浏览器 控制台 勾上 Disable cache,刷新页面,发送的请求中就不包括和缓存相关的头了

// server.js
const http = require('http')
const fs = require('fs') http.createServer(function (request, response) {
console.log('request come', request.url) if (request.url === '/') {
const html = fs.readFileSync('test.html', 'utf8')
response.writeHead(200, {
'Content-Type': 'text/html'
})
response.end(html)
} if (request.url === '/script.js') {
console.log(request.headers)
const etag = request.headers['if-none-match']
if(etag === '777') {
response.writeHead(304, {
'Content-Type': 'text/javascript',
'Cache-Control': 'max-age=2000000, no-cache',
'Last-Modified': '123',
'Etag': '777'
})
response.end('') // 这里不传任何内容,即使有内容,浏览器也不会读取
} else {
response.writeHead(200, {
'Content-Type': 'text/javascript',
'Cache-Control': 'max-age=2000000, no-cache', // 通过 no-cache,即使没过期浏览器也要向服务器验证,不会从缓存读取。
'Last-Modified': '123', // 随便设的值
'Etag': '777'
})
response.end('console.log("script loaded twice")')
}
}
}).listen(8888) console.log('server listening on 8888')

no-cache

不从缓存读取

'Cache-Control': 'max-age=2000000, no-cache', // 通过 no-cache,即使没过期浏览器也要向服务器验证,不会从缓存读取。

no-store
设置 no-store,即使服务器下发了缓存相关头,浏览器也会忽略任何和缓存相关的信息,发送请求不会携带相关头,直接去请求最新的数据。

Chrome浏览器->右上角->更多工具->清理浏览器缓存

'Cache-Control': 'max-age=2000000, no-store'

前端性能优化 —— 添加Expires头与Cache-control区别的更多相关文章

  1. 前端性能优化 —— 添加Expires头

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

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

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

  3. 前端性能优化:Add Expires headers

    前端性能优化:Add Expires headers Expires headers 是什么? Expires headers:直接翻译是过期头.Expires headers 告诉浏览器是否应该从服 ...

  4. Web 前端性能优化准则

    准则01:尽量减少http请求 “只有10%-20%的最终用户响应时间花在接收请求的HTML文档上,剩下的80%-90%时间花在HTML文档所引用的所有组件(图片,script,css,flash等等 ...

  5. Web前端性能优化全攻略

    网页制作poluoluo文章简介:Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多 ...

  6. Web前端性能优化全攻略[转载]

    1. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests) 作为第一条,可能也是最重要的一条.根据 Yahoo! 研究团队的数据分析,有很大一部分用户访问会因为这一条而取得最 ...

  7. Web前端性能优化——如何提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒, ...

  8. 【转】Web前端性能优化——如何提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒, ...

  9. Web前端性能优化——提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒, ...

随机推荐

  1. 几个大型网站的Feeds(Timeline)设计简单对比

    https://mp.weixin.qq.com/s?__biz=MjM5NzQ3ODAwMQ==&mid=404465806&idx=1&sn=3a68a786138538f ...

  2. 简单而强大的bitset

    简单而强大的bitset 介绍 有些程序需要处理二进制有序集,标准库提供了bitset 类型,事实上,bitset 是一个二进制容器,容器中每一个元素都是一位二进制码,或为 0,或为 1. 基础 bi ...

  3. R语言学习 第十一篇:日期和时间

    R语言的基础包中提供了三种基本类型用于处理日期和时间,Date用于处理日期,它不包括时间和时区信息:POSIXct/POSIXlt用于处理日期和时间,其中包括了日期.时间和时区信息.R内部在存储日期和 ...

  4. sql server数据字符串分割功能sql

    --分割字符串函数 create FUNCTION [dbo].[GetSplitStringValueInIndex] ( ), --要分割的字符串 ), --分隔符号 @index INT --取 ...

  5. css初始化标签属性--源码

    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote ...

  6. Beta 冲刺day3

    1.昨天的困难,今天解决的进度,以及明天要做的事情 昨天的困难:昨天主要是对第三方与企业复杂的逻辑关系进行分析和优化,以及进行部分模块的功能测试和代码测试. 今天解决的进度:根据前天得到的需求问题进行 ...

  7. 妙用this关键字

    妙用this关键字 ## this关键字一般this关键字都是指的是对象的本身,在类的所有方法.构造器都可以拿到this引用,这是jvm"偷偷"帮我们传递进来的引用,指向调用方法对 ...

  8. 【转】Python的下划线

    原文: 1. Python中的下划线(译文) 2. [转]关于python中带下划线的变量和函数的意义 总结: 1. 单下划线开头.保护变量,不可被其他包导入使用,除非在__all__声明可以显示引用 ...

  9. MySql 物理文件组成

    1.日志文件        MySQL 各类日志文件介绍 2.数据文件        MySQL 各类数据文件介绍

  10. MySQL 的性能(下篇)—— 性能优化方法

    简介 文中内容均为阅读前辈的文章所整理而来,参考文章已在最后全指明 本文分为上下两篇: 上篇:MySQL 的 SQL 执行分析 下篇:MySQL 性能优化 下面为下篇内容,分为以下部分: 一.创建表时 ...