微信号:cjscwe_2015

介绍:分享 学习 交流 原创 分享是学习的开始;学习不必要从头开始,是从现在开始;交流能沟通你我,提高你的学识;期待你的加入!!! web前端技术交流,JavaScript,HTML5,CSS3……

[S3-E385]Web缓存总结

2017-07-16 22:20 前端JavaScript

本文:【第3章第385回】 更多文章点击 目录 查看


web缓存作用

减少网络带宽消耗

降低服务器压力

减少网络延迟,加快页面打开速度


Web缓存的类型

数据库数据缓存:为了提供查询的性能,会将查询后的数据放到内存中进行缓存,下次查询时,直接从内存缓存直接返回,提供响应效率

代理服务器缓存:代理服务器是浏览器和源服务器之间的中间服务器,浏览器先向这个中间服务器发起Web请求,经过处理后(比如权限验证,缓存匹配等),再将请求转发到源服务器。

CDN缓存:浏览器先向CDN网关发起Web请求,网关服务器后面对应着一台或多台负载均衡源服务器,会根据它们的负载请求,动态将请求转发到合适的源服务器上。虽然这种架构负载均衡源服务器之间的缓存没法共享,但却拥有更好的处扩展性。从浏览器角度来看,整个CDN就是一个源服务器

浏览器端缓存

Web应用层缓存


哪些请求不能被缓存

HTTP信息头中包含Cache-Control:no-cache,pragma:no-cache,或Cache-Control:max-age=0等告诉浏览器不用缓存的请求

需要根据Cookie,认证信息等决定输入内容的动态请求是不能被缓存的

经过HTTPS安全加密的请求

POST请求无法被缓存

HTTP响应头中不包含Last-Modified/Etag,也不包含Cache-Control/Expires的请求无法被缓存


浏览器缓存的控制

Web开发者可以在HTML页面的<head>节点中加入<meta>标签,代码如下:


<meta http-equiv="Pragma" content="no-cache">

上述代码的作用是告诉浏览器当前页面不被缓存,每次访问都需要去服务器拉取。使用上很简单,但只有部分浏览器可以支持,而且所有缓存代理服务器都不支持,因为代理不解析HTML内容本身。


缓存有关的HTTP消息报头

Cache-Control与Expires的作用一致,都是指明当前资源的有效期,控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。只不过Cache-Control的选择更多,设置更细致,如果同时设置的话,其优先级高于Expires。

配置Last-Modified/ETag的情况下,浏览器再次访问统一URI的资源,还是会发送请求到服务器询问文件是否已经修改,如果没有,服务器会只发送一个304回给浏览器,告诉浏览器直接从自己本地的缓存取数据;如果修改过那就整个数据重新发给浏览器;

Etag的出现主要是为了解决几个Last-Modified比较难解决的问题:

Last-Modified标注的最后修改只能精确到秒级,如果某些文件在1秒钟以内,被修改多次的话,它将不能准确标注文件的新鲜度

如果某些文件会被定期生成,当有时内容并没有任何变化,但Last-Modified却改变了,导致文件没法使用缓存

有可能存在服务器没有准确获取文件修改时间,或者与代理服务器时间不一致等情形


Cache-Control/Expires的优先级要高于Last-Modified/ETag。即当本地副本根据Cache-Control/Expires发现还在有效期内时,则不会再次发送请求去服务器询问修改时间(Last-Modified)或实体标识(Etag)了。

使用Cache-Control/Expires会配合Last-Modified/ETag一起使用,因为即使服务器设置缓存时间, 当用户点击“刷新”按钮时,浏览器会忽略缓存继续向服务器发送请求,这时Last-Modified/ETag将能够很好利用304,从而减少响应开销。

当用户在按F5进行刷新的时候,会忽略Expires/Cache-Control的设置,会再次发送请求去服务器请求,而Last-Modified/Etag还是有效的,服务器会根据情况判断返回304还是200;而当用户使用Ctrl+F5进行强制刷新的时候,只是所有的缓存机制都将失效,重新从服务器拉去资源

总结一下浏览器请求的过程:

Etag发送过去的头名字叫:If-None-Match

Last-Modified发送过去的头名字叫:If-Modified-Since

参考文献:

Web缓存机制系列

http://www.alloyteam.com/2012/03/web-cache-1-web-cache-overview/

浏览器缓存机制

http://www.cnblogs.com/skynet/archive/2012/11/28/2792503.html


转自: https://segmentfault.com/a/1190000010207340

作者: angelayun


>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

如果文章不错,请转发的朋友圈!

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

 ==========阅读原文==========

 
前端JavaScript 更多文章 [S3-E384]HTML5上传图片文件(含拖拽、预览、上传、美化) [S3-E383]jsonp 跨域原理分析 [S3-E382]fetch使用方法 [S3-E381]ECMAScript简史 和 JavaScript的未来(译) [S3-E380]深入理解 JavaScript 中的作用域和上下文
猜您喜欢 数学之美:当代最伟大数学家回顾过去百年的数学 怎么样最有效的激励别人?读《Drive(驱动力)》给你答案 JAVA网站高并发解决方案 微信小程序营销战役打响!1 个公众号可关联 13 个小程序 用R语言写个贝叶斯模型 预测我的妻子是否怀孕