当前位置: 首页 > Web前端 > HTML5

网页缓存总结

时间:2023-04-05 19:59:52 HTML5

网页缓存功能减少网络带宽消耗,减轻服务器压力,减少网络延迟,加快页面打开速度。Web缓存的种类数据库数据缓存:为了提高查询性能,将查询到的数据缓存在内存中,下次查询时,直接从内存缓存中返回,提供响应效率。代理服务器缓存:代理服务器是浏览器和源服务器之间的中间服务器。授权验证、缓存匹配等),然后将请求转发给源服务器。CDN缓存:浏览器??首先向CDN网关发起Web请求,网关服务器对应一台或多台负载均衡的源服务器,这些服务器会根据自己的负载请求动态转发请求到合适的源服务器。这种架构负载均衡中源服务器之间的缓存虽然不能共享,但是具有更好的可扩展性。从浏览器的角度来看,整个CDN是一个源服务器浏览器端缓存Web应用层缓存,请求不能被缓存HTTP头包含Cache-Control:no-cache,pragma:no-cache,或者Cache-Control:max-age=0等告诉浏览器不缓存的请求需要根据cookies、认证信息等来判断,输入内容的动态请求不能缓存。无法缓存HTTPS安全加密请求。HTTP响应头不包含Last-Modified/Etag,不包含Cache-Control/Expires的请求不能被浏览器缓存。Web开发人员可以将标记添加到HTML页面的节点。代码如下:以上代码的作用是告诉浏览器当前页面没有缓存,需要从每次访问服务器。使用起来很简单,但是只有部分浏览器可以支持,所有的缓存代理服务器都不支持,因为代理本身并不解析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/标签。即当根据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发送的header名称为:If-None-MatchLast-Modifiedsent过去的header名称为:If-Modified-Since参考资料:Web缓存机制系列浏览器缓存机制