响应头中设置 Expires的值为格林威治时间 就是告诉客户端,此资源的请求可以用到指定时间点,在此时间之前,都要重新发请求到服务器请求这个资源,强制读取缓存
在后端为了加速服务的访问速度,通常可以使用 Memcached、Redis 做数据缓存,那么在浏览器端又有哪些缓存策略呢?
最近把前端缓存重新整理了一下,从整体的层面上把前端所有能用的缓存方案梳理了一遍。同时,对于http缓存,使用了表格的方案,使得原先晦涩难记的特性变得清晰明了。特记录于此,若有什么欠缺,也望不吝指出。
expires起到控制页面缓存的作用,合理的配置expires可以减少很多服务器的请求
我们在优化Web服务的时候,对于静态的资源文件,通常都是通过客户端缓存、服务器缓存、CDN缓存,这三种方式来缓解客户端对于Web服务器的连接请求压力的。
什么是http缓存呢,当我们使用chrome浏览器,按F12打开控制台,在网络请求中有时候看到状态码是200,有时候状态码是304,当我们去看这种请求的时候,我们会发现状态码为304的状态结果是:Status Code: 304 Not Modified,而状态码为200的时候一般会有四种情况,一种是直接返回200,没有任何其他的标志,另一种是Status Code: 200 OK (from memory cache),还有一种是Status Code: 200 (from disk cache)。最后一种不是太常见,Status Code: 200 (from Service Worker).后面这三种状态码看到的效果是灰色的,其实从给出的信息也能看出来是从缓存中获取上数据。下面我们来详细介绍一下他们都分别是什么时候出现的。
HTTP 缓存是一块重要的内容,这是作为一个前端工程师必须要掌握的优化技能,也能让自己明白自己的工作,此次主要分了几个点进行总结
缓存的作用就是提升网页加载速度。浏览器加载一个完整的网页势必会引用外部资源(图片,js,css)。若每次加载网页都要去加载这些外部资源则会引起不必要的时间和资源浪费,且会影响用户体验。而解决上述问题需要一个优秀的缓存策略。除此之外,web缓存的优点还有很多,例如:减轻服务器压力
阅读量: 57 动静分离 为了加快网站的解析速度,可以把动态页面和静态页面由不同的服务器来解析,加快解析速度。降低原来单个服务器的压力。 动态页面与静态页面区别 静态资源(css、js、images、html等): 当用户多次访问这个资源,资源的源代码永远不会改变的资源。 动态资源(php、jsp等):当用户多次访问这个资源,资源的源代码可能会发送改变。 什么是动静分离 静分离是让动态网站里的动态网页根据一定规则把不变的资源和经常变的资源区分开来,动静资源做好了拆分以后,我们就可以根据静态资源的
打开apache安装目录,找到conf目录,用记事本打开httpd.conf 文件。
Web缓存是存在服务器和客户端之前的资源副本。客户端会缓存请求过的静态资源(图片,CSS 文件,JS文件等),当用户再次请求相同的url时,浏览器会根据缓存规则判断是否使用已经缓 存的静态资源文件,或者绕过资源缓存直接请求服务器重新获取资源。
毕竟对于前端来说,优化是躲不开的主题。在看200(cache)和304区别的时候,翻到了雅虎这边归纳出来的准则,虽然是十多年前的东西了吧,但是还是具有参考价值的,因此在原文基础上我进行了一些归纳翻译。
1 前言 在开发过程中经常碰到服务器上内容和客户端上内容不同步的问题.这是什么情况?请看下文。 2 服务器版本更新与客户端不同步的问题 http状态304表示请求的是缓存,200表示是从服
Nginx 缓存作为性能优化的一个重要手段,可以极大减轻后端服务器的负载。下面我们将介绍 Nginx 缓存配置的相关指令以及 http 缓存机制,以及 Nginx 缓存实践案例分析。
Ajax 即 “Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互网页应用的网页开发技术(用来向后台数据库请求获取数据的技术)。
一直以来,前端性能优化 都是前端程序员在业务开发过程中不得不考虑的一个点。前端同学也一直寄希望于服务器更大的吞吐量、更密集的cdn节点;更寄希望于浏览用户使用更优秀的浏览器及更大的带宽。。。然而随着上述几种情况一一被落实时,前端性能仍然没有达到一个让人满意的结果。。。
浏览器的缓存机制也就是我们要说的HTTP缓存机制,其机制是根据HTTP报文的缓存标识进行的,所以在分析浏览器缓存机制之前,我们先使用图文简单介绍一下HTTP报文,HTTP报文分为两种:
引言 稍微了解HTTP协议的前端同学,相比对Cache-Control不会感到陌生,性能优化时经常都会跟它打交道。 常见的值有有private、public、no-store、no-cache、mus
稍微了解HTTP协议的前端同学,相比对Cache-Control不会感到陌生,性能优化时经常都会跟它打交道。
引言 稍微了解HTTP协议的前端同学,相比对Cache-Control不会感到陌生,性能优化时经常都会跟它打交道。 常见的值有有private、public、no-store、no-cache、must-revalidate、max-age等。 各个取值所代表的含义,网上总结挺多的,这里就不打算再进行逐一介绍,感兴趣的可以一起探讨交流。 本文仅挑no-cache、must-revalidate 这两个进行值进行探究对比。在项目实践中,这两个值用的比较多,也比较容易搞混。 Cache-Control: no
在客户端通过浏览器发出第一次请求某一个URL时,根据 HTTP 协议的规定,浏览器会向服务器传送报头(Http Request Header),服务器端响应同时记录相关属性标记(Http Reponse Header),服务器端的返回状态会是200,格式类似如下:
在浏览器第一次请求某url获得的返回状态是200的响应头中,获取Last-Modified字段,这个字段标识此文件在服务器端的最后被修改时间,格式类似于:
Hello大家好,今天我们的主题是缓存!为什么要谈缓存,相信做前端开发的同学们都对缓存又爱又恨,因为它对于性能影响真的很大。优秀的缓存策略能够减少网页渲染延迟,但是缓存有常常会带来一些不必要的麻烦,下面我们就一同仔细探究一下缓存吧~
处理好浏览器缓存对提升系统的性能有很大的帮助,为什么要使用缓存,我们一般请求资源后直接使用,当我们再次请求资源时,还要继续从服务器拿到数据吗?答案不以为然,当第一次请求资源后,可以进行缓存,然后再次请求资源时可以直接从缓存中读取,提高了效率。
本文介绍了HTTP缓存机制,包括客户端缓存和服务器缓存,以及如何使用HTTP缓存来提高Web性能。同时,还探讨了如何避免缓存带来的安全问题,以及如何使用HTTP缓存来减轻服务器负担,提高网站性能。
编者按:本文作者高峰 http://verymuch.site/,奇舞团前端工程师,W3C性能工作组成员,同时在WOT工作组学习。
Cache-Control 作为「响应头」,用以控制缓存策略,这也是前端 HTTP 缓存策略的基础。
vue-cli里的默认配置,css和js的名字都加了哈希值,所以新版本css、js和就旧版本的名字是不同的,不会有缓存问题。 不过值得注意的是,把打包好的index.html放到服务器里去的时候,index.html在服务器端可能是有缓存的,这需要在服务器配置不让缓存index.html
前端发送请求主要经历以下三个过程,请求->处理->响应。 如果有多次请求就需要重复执行这个过程。
网络篇—浏览器缓存(一) 一、缓存类型 有两种,强缓存和协商缓存 强缓存 不会向服务器发送请求,直接从缓存中读取资源; 协商缓存 向服务器发送请求,服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存,如果命中,则返回304状态码并带上新的response header通知浏览器从缓存中读取资源; 异同 共同点:都是从客户端缓存中读取资源; 区别:强缓存不会发请求,协商缓存会发请求; 二、和缓存有关的header 强缓存 Expires:response he
1 H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性。离线存储(也可称为缓存机制)是其中一个非常重要的特性。H5 引入的离线存储,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。 H5 应用程序缓存为应用带来三个优势: 离线浏览 用户可在应用离线时使用它们 速度 已缓存资源加载得更快 减少服务器负载 浏览器将只从服务器下载更新过或更改过的资源。 根据标准,到目前为止,H5 一共有6种缓存机制,有些是之前已有,有些是 H5 才新加入的。 浏览器缓存机制
很多网站的资源后面都加了版本号,这样做的目的是:每次升级了JS或者CSS文件后,为了防止浏览器进行缓存,强制改变版本号,客户端浏览器就会重新下载新的JS或CSS文件,以保证用户能及时获得网站的最新更新。
生产环境中,不需要打印日志。通过对webpack进行配置,打包时自动去掉console.log
Cache-Control 比Expires比较要内涵,具备更多的属性,其中包括如下
Cache 的设计是个基础计算机理论,也是程序员的重要基本功之一。Cache 几乎无处不在,CPU 的 L1 L2 L3 Cache、iOS 系统的 clean page 和 dirty page 机制、HTTP 的 tag 机制等等,这些背后都是 Cache 设计思想的应用。 上一篇介绍了关于 HTTP 的基础知识,本篇对 HTTP Cache 做一个完整的介绍。
缓存对于Web服务至关重要,尤其对于大型高负载Web站点。缓存作为性能优化的一个重要手段,可以在极大程度上减轻后端服务器的负载。通常对于静态资源,即不经常更新的资源,如图片,CSS或JS等进行缓存,而不用每次都向服务器请求,这样就可以减轻服务器的压力。
强制缓存:根据Expires(response header里的过期时间)判断,浏览器再次加载资源时,如果在这个过期时间内,则命中强缓存,并不会向服务端发起请求,展示为200状态。
浏览器缓存有多种形式,持久化或者会话存储。以chrome为例,打开调试面板,找到Application选项卡,就可以看到它所支持的各种缓存模式
本文说的是HTTP中控制客户端缓存的头有哪些。网上这方面的文章很多了,这里就说下个人的理解。
互联网有一项著名的8秒原则。用户在访问Web网页时,如果时间超过8秒就会感到不耐烦,如果加载需要太长时间,他们就会放弃访问。大部分用户希望网页能在2秒之内就完成加载。
说真的,当自己还很小白的时候,明明修改了JS的内容了,但是就是没有加载成功,那时候感觉好神奇,好没道理。后来知道了这是因为缓存的原因。
实操 Web Cache 摘要 写这篇文章的原因,是我看到网上很多谈这类的文章,多是人云亦云,不求实事,误导读者。 下面文中我会一个一个做实验,并展示给你,说明为什么会这样。只有自己亲自尝试才能拿出有说服力的真凭实据。 2014-03-12 首次发布 2015-08-27 修改,增加特殊数据缓存 ---- 目录 1. 测试环境 2. 文件修改日期 If-Modified-Since / Last-Modified 2.1.1. if_modified_since 2.1. 静态文件 2.2. 通过rewri
本文首发于政采云前端团队博客:图解 HTTP 缓存 https://www.zoo.team/article/http-cache
HTTP 的缓存机制,可以说这是前端工程师需要掌握的重要知识点之一。本文将针对 HTTP 缓存整体的流程做一个详细的讲解,争取做到大家读完整篇文章后,对缓存有一个整体的了解。
描述: 当我们访问某一个网页时浏览器第一次加载网页时,会将页面资源存储在 HTTP缓存中。下次浏览器访问该页面时,它可以在高速缓存中查找以前获取的资源,然后从磁盘检索它们,其速度通常比从网络上下载它们的速度快。
平时生活当中缓存一集电视剧,下载一首歌;这些资源是可以直接离线观看的,没有去请求网络,资源在本地。
Web 缓存大致可以分为:数据库缓存、服务器端缓存(代理服务器缓存、CDN 缓存)、浏览器缓存。
领取专属 10元无门槛券
手把手带您无忧上云