web缓存原理

2016-07-20

web缓存在网站开发有很大的益处,可以提高网站的访问速度,减轻服务器的压力,减少带宽的占用。

浏览器缓存

浏览器都自带http缓存的实现,我们只需要提供正确的请求头,浏览器和服务器会根据请求来做对应的缓存策略。例如,百度对jquery静态文件的一个http请求如下

从上面看出,一个响应头的缓存策略控制包括 cache-control etag expires last-modified

Cache-Control

每一个资源请求都可以通过cache-control来控制缓存,一般设置 max-age 来控制静态文件的缓存时间

max-age=120的意思是,从现在开始120s后缓存失效,在缓存的有效期内,浏览器请求资源时候,不需要向服务器请求,而是从浏览器缓冲中拉取缓存内容

实现的方法:服务器通过设置响应头,浏览器会根据这个策略来实现缓存

Cache-Control 标头是在 HTTP/1.1 规范中定义的,取代了之前用来定义响应缓存策略的标头(例如 Expires)。所有现代浏览器都支持 Cache-Control,因此,使用它就够了。

Expires

expires也是设置过期时间,浏览在超过这个时间失效,但是用cache-control在的话此请求头会被忽略

expires:Sun, 23 Apr 2017 17:59:47 GMT

Etag

客户端请求资源,服务器会根据请求url生成一串随机字符串

ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
ETag: W/"0815"

然后发送给客户端,下次请求,配合If-None-Match发送etag字符串

If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"

如果匹配,服务器返回304,缓存再可以用120s,如果不匹配重新下载资源,返回200

Last-Modified

last-modified服务器会返回文件的最后修改时间,配合请求头字段last-modified-since字段使用

客户端请求资源,服务器返回文件随后修改时间

Cache-Control:public, max-age=31536000
Last-Modified: Mon, 03 Jan 2017 17:45:57 GMT

客户端再次请求,附加请求头

If-Modified-Since: Mon, 03 Jan 2011 17:45:57 GMT

同etag一样,不过这个字段是基于时间的,如果在文件未修改,返回304,已修改,重新传输新的资源200

总结

浏览器请求资源,首先判断cache-control或者expires(当两个一起存在时候,expires忽略),如果未失效,使用缓存,返回 200(from cache)

如果失效,向服务器发送请求,判断etag或者Last-Modified是否改变,如果未改变,返回 304 Not Modified

参考文档:

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers

标签: css3 优化

如果本文对您有所帮助,可以扫下面二维码给我支持,您的鼓励是我前进的动力!

微信

支付宝

目录

评论

*
*

正在加载验证码......

最新评论

  • 无评论
相关推荐
真机h5页面调试工具weinre
weinre是什么 weinre是网页远程审查工具,可以在pc端调试真机的浏览器页面,但是不能用来调试js wein...
css高性能动画
浏览器渲染流程 要优化动画性能,首先要了解浏览器是如何进行元素渲染的,浏览器的渲染流程有以下三步 计算元素的样式...
前端错误监控
前端错误监控在前端领域越来越重要,很多常见的bug,jquery is not define,Script error,...