Cache-Control 作为「响应头」,用以控制缓存策略,这也是前端 HTTP 缓存策略的基础。
强缓存中,当请求再次发出时,浏览器会判断目标资源是否“命中”强缓存,如果命中则直接从缓存中获取资源,不会再与服务端发生通信。
缓存是一个复合的概念,本文是http缓存系列文章之一,仅讨论Cache-Control这个字段的两个值:no-cache和max-age=0的区别。关于Cache-Control更全面的介绍,请点击这里。
一个好的HTTP缓存策略可以极大的提升web应用的性能和体验。主要使用的HTTP 的响应头Cache-Control来控制,也可以选择使用Last-Modified和ETag。 HTTP响应头Cache-Control建议私有缓存(例如,浏览器)和公有缓存(例如,代理)如何缓存HTTP响应以便日后重用。 ETag是又兼容HTTP/1.1的服务器返回的,用来检测一个URL的返回值是否有变化。可以被认为是Last-Modified更复杂的一个继承者。当server返回一个带有ETag的响应的时候,客户端可以在随后的GET请求中带上If-None-Match,如果内容未变,那么服务器就会返回: 304 Not Modified。
描述: 当我们访问某一个网页时浏览器第一次加载网页时,会将页面资源存储在 HTTP缓存中。下次浏览器访问该页面时,它可以在高速缓存中查找以前获取的资源,然后从磁盘检索它们,其速度通常比从网络上下载它们的速度快。
讲解了cache-control,及对其中的头和值的作用,及设置来控制response caching;
浏览器通过HTTP头部的字段来控制文件的缓存:要不要缓存以及缓存的过期时间。 Cache-Control/Expires Cache-Control和Expires控制文件的缓存,在缓存文件的有效时间内,浏览器直接使用本地文件,不与服务器交互。 Cache-Control的值是一个单位为秒的数字,表示缓存文件的有效时间有多少秒。 Expire的值是一个绝对时间点,表示缓存文件在某个时间点之前有效。 在Cache-Control和Expires同时存在的情况下,Cache-Control的优先级高于Expi
HTTP缓存( ETag、Cache-Control)——谷歌开发者 HTTP缓存有利于web性能优化
可复用性有几个优点。首先,由于不需要将请求传递到源服务器,因此客户端和缓存越近,响应速度就越快。最典型的例子是浏览器本身为浏览器请求存储缓存。
一.cache-control Cache-Control是http协议1.1中支持的缓存字段,指定请求和响应遵循的缓存机制。 详见rfc2616 14.9(Cache-Control) 其中一个最基础的策略是,在响应头中设定:
HTTP协议的Cache -Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置 Cache-Control并不会影响另一个消息处理过程中的缓存处理过程。 请求时的缓存指令包括: no-cache、no-store、max-age、 max-stale、min-fresh、only-if-cached等。 响应消息中的指令包括: public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age。
可根据实际业务场景设置合理的缓存策略,比如遵循源站、遵循CDN配置的缓存时间等,可针对不同的文件,或目录等灵活设置。在缓存时间内,CDN节点直接以缓存响应给客户端;若缓存过期,用户访问会触发节点回源校验文件是否更新。若文件缓存未过期,但源站更新了并希望用户立即访问到新文件,可提交刷新操作,强制清除CDN缓存,触发回源拉取。
我们的后端使用Spring Boot。Spring Boot跨域非常简单,只需书写以下代码即可。 @Configuration public class CustomCORSConfiguration { private CorsConfiguration buildConfig() { CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.addAllowedOrigin("*"); corsConfiguration.addAllowedHeader("*"); corsConfiguration.addAllowedMethod("*"); return corsConfiguration; } @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", buildConfig()); return new CorsFilter(source); } }
为了提高网站的访问速度和效率,我们需要设计各种各样的缓存,通过缓存可以避免不必要的额外数据传输和请求,从而提升网站的请求速度。对于HTTP协议来说,本身就自带有HTTP缓存。
导语 Http 缓存机制作为 web 性能优化的重要手段,对从事 Web 开发的小伙伴们来说是必须要掌握的知识,但最近我遇到了几个缓存头设置相关的题目,发现有好几道题答错了,有的甚至在知道了正确答案后依然不明白其原因,可谓相当的郁闷呢!!为了确认下是否只是自己理解不深,我特意请教了其他几位小伙伴,发现情况也或多或少和我类似。 为了不给大家卖关子,下面我贴出2道题,大家可以尝试解答下: 以下为 page.html 内容: <!DOCTYPE html><html xmlns="http://www.w3.or
在开发调试web的时候,经常会碰到因浏览器缓存(cache)而经常要去清空缓存或者强制刷新来测试的烦恼,提供下apache不缓存配置和nginx不缓存配置的设置。在常用的缓存设置里面有两种方式,都是使用add_header来设置:分别为Cache-Control和Pragma。
由于项目越来越大,即使了使用代码压缩工具减少文件大小,js文件还是不可避免的越变越大。而对于用户来说每次重新下载都有可能会消耗大量时间,让我们的首屏展示有较长时间的空白。为了提升网站性能,有效利用缓存能够提升用户体验,提高访问效率。
浏览器缓存有多种形式,持久化或者会话存储。以chrome为例,打开调试面板,找到Application选项卡,就可以看到它所支持的各种缓存模式
因为在接手的项目中用到过比较新的HTML5应用缓存,也用到了经典的缓存如设置max-age,Etag之类,而之前一直就是在用着没有去深究其中原理。周末天气不好,懒得出去了,正好找时间总结下。
本文介绍了HTTP缓存机制,包括客户端缓存和服务器缓存,以及如何使用HTTP缓存来提高Web性能。同时,还探讨了如何避免缓存带来的安全问题,以及如何使用HTTP缓存来减轻服务器负担,提高网站性能。
三.其它参数 忽略Cache-Control头部 location /images/ { proxy_cache my_cache; proxy_ignore_headers Cache-Control; proxy_cache_valid any 30m; ... } #NGINX会忽略所有/images/下的Cache-Control头。proxy_cache_valid命令强制规定缓存数据的过期时间,如果忽略Cache-Control头,则该命令是十分必要的。NGINX不会缓
如果你是做国际或者全球业务的, 会更有体会, 很多国家和地区的网络是非常差的, 说他们停留在 2G 时代也不过分的.
HTTP 缓存是一块重要的内容,这是作为一个前端工程师必须要掌握的优化技能,也能让自己明白自己的工作,此次主要分了几个点进行总结
在浏览器第一次请求某url获得的返回状态是200的响应头中,获取Last-Modified字段,这个字段标识此文件在服务器端的最后被修改时间,格式类似于:
随着Retrofit在项目中的使用,替换的以前使用的网络框架,相关的缓存机制也要进行替换,网络上大部分的Retrofit+okhttp缓存资料都是进行针对所有url的而且需要服务端的配合。有些时候是先有服务然后app去调用这些服务,所以这个时候没有服务端的配合我们在前端实现缓存比较空难但并不是很可以。(举个列子,有一个原来的服务更本不支持cache,但是我们在app中需要缓存这个服务的数据,这应该是前一段时间替换网络库时最后遇到的问题)。
最近对文件上传功能进行了优化改版,上线之后有同事反馈出来,自从上线之后所上传的图片,均没有设置浏览器端缓存,导致客户端每次都要去请求服务器上的图片资源,会导致页面加载速度变慢,用户体验不好诸类问题。之前从未接触过此类问题赶忙查阅了浏览器缓存的相关知识,并对问题进行了修复,现将一些所学进行整理归纳。
作为一个前端,了解http缓存是非常必要,它不仅是面试的必要环节,也更是实战开发中必不可少需要了解的知识点,本文作者将从缓存的概念讲到如何在业务中设计一个合理的缓存架构,带你一步一步解开http缓存的神秘面纱。
缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。当 web 缓存发现请求的资源已经被存储,它会拦截请求,返回该资源的拷贝,而不会去源服务器重新下载。缓存的种类有很多,其大致可归为两类:
编者按:本文作者高峰 http://verymuch.site/,奇舞团前端工程师,W3C性能工作组成员,同时在WOT工作组学习。
随着用户访问量越来越大,缓存变得越来越重要。HTTP文件缓存可以减少冗余数据的传输;缓解网络瓶颈;降低对原始服务器的请求;以及降低距离延迟。
强缓存是指在缓存期间,请求不会发送到服务器,浏览器直接返回缓存结果,需要设置 Header:
最近在项目开发中遇到一个需求:项目打包后,可以根据修改配置文件,进而动态替换页面上的文本。由于项目基本不涉及到后端,因此不考虑通过接口来修改。这就需要前端项目打包后需要暴露一个配置文件,每次页面刷新时会获取到最新的配置,达到动态替换页面文本的目的。
前面我们讲了apache设置ExpiresDefault启用浏览器缓存Leverage browser caching,如果是nginx服务器要如何设置呢?随ytkah一起来看看
引言 通过网络获取内容既缓慢,成本又高:大的响应需要在客户端和服务器之间进行多次往返通信,这拖延了浏览器可以使用和处理内容的时间,同时也增加了访问者的数据成本。因此,缓存和重用以前获取的资源的能力成为优化性能很关键的一个方面。 序 本文用于解决以下六个疑问。 与缓存相关的HTTP首部字段主要有哪些? 这些HTTP首部字段之间的联系与区别? HTTP缓存首部字段的优先级? HTTP缓存首部字段的特点与局限性? 用户不同的页面刷新行为的差别? 在实践中我们该用哪些报文头来控制缓存呢
通过网络获取内容既缓慢,成本又高:大的响应需要在客户端和服务器之间进行多次往返通信,这拖延了浏览器可以使用和处理内容的时间,同时也增加了访问者的数据成本。因此,缓存和重用以前获取的资源的能力成为优化性能很关键的一个方面。
HTTP协议的缓存是通过6个报文头完成的,通过两层协商使web资源能够不那么频繁地在服务器与客户端之间传递,从而节约了流量,提高浏览速度。以从客户端到服务器的顺序,第一层协商为Cache-Control与Expires;第二层协商为Last-Modified与Etag。
HTTP 缓存是前端面试必问的知识点,大多数前端也都能答出强缓存和协商缓存来,但如果换个问法呢?
1.静态的html页面想要设置使用缓存:<meta http-equiv="expires" content="utc时刻"/>,目前我只明确该方法可行。如果设置了<meta http-equiv="cache-control" content="max-age=时间"/>并不起缓存作用。 2.动态页面使用缓存:在页面上使用<meta http-equiv="expires" content="utc时刻"/>和<meta http-equiv="cache-control" content="ma
对于强制缓存来说,header中会有两个字段来标明失效规则(Expires/Cache-Control),指的是当前资源的有效期。
expires起到控制页面缓存的作用,合理的配置expires可以减少很多服务器的请求
Etag由服务器端生成,客户端通过If-None-Match这个条件请求来验证资源是否修改。请求一个文件的流程可能如下:
web缓存: 1.可以自动保存常见文档副本的HTTP设备,当web请求抵达缓存时,如果存在缓存副本,就直接从本地存储设备返回,而不是去源服务器获取 2.缓存命中和未命中 3.HTTP再验证,检测服务器上的内容是否发生了变化,新鲜度检测规则。缓存对副本进行再验证时,会向服务器发送一个小的再验证请求,如果没变化,服务器会返回304 Not Modified,get请求中添加if-modified-since会进行再验证 4.缓存命中率:由缓存提供服务的占比,命中率与缓存大小,用户兴趣相似点,数据的变化,缓
浏览器的缓存机制也就是我们说的HTTP缓存机制,其机制是根据HTTP报文的缓存标识进行的,所以在分析浏览器缓存机制之前,我们先使用图文简单介绍一下HTTP报文,HTTP报文分为两种:
领取专属 10元无门槛券
手把手带您无忧上云