精华内容
下载资源
问答
  • Web前后端缓存技术

    千次阅读 2018-08-26 15:49:55
    Web缓存技术 一、缓存概述 缓存原本是一个硬件的概念:缓存就是数据交换的缓冲区...在一个Web应用中,应用到缓存的地方很多,主要浏览器缓存,页面缓存,服务器缓存,数据库缓存等。 缓存的作用主要: ...

    Web缓存技术

    一、缓存概述

    缓存原本是一个硬件的概念:缓存就是数据交换的缓冲区(称作Cache),当某一硬件要读取数据时,会首先从缓存中查找需要的数据,如果找到了则直接执行,找不到的话则从内存中找。由于缓存的运行速度比内存快得多,故缓存的作用就是帮助硬件更快地运行。

    在一个Web应用中,应用到缓存的地方有很多,主要有浏览器缓存,页面缓存,服务器缓存,数据库缓存等。

    缓存的作用主要有:

    • 加快页面打开速度
    • 减少网络带宽消耗
    • 降低服务器压力

    缓存结构

    二、浏览器缓存

    浏览器端缓存规则主要在HTTP协议头和HTML的meta标签中定义。他们分别从新鲜度和校验值两个维度来规定浏览器是否可以直接使用缓存中的副本,还是需要去源服务器获取更新的版本。

    新鲜度(过期机制):也就是缓存副本有效期。一个缓存副本必须满足以下条件,浏览器会认为它是有效的,足够新的:

    • 含有完整的过期时间控制头信息(HTTP协议报头),并且仍在有效期内;
    • 浏览器已经使用过这个缓存副本,并且在一个会话中已经检查过新鲜度
    • 满足以上两个情况的一种,浏览器会直接从缓存中获取副本并渲染。

    满足以上两个情况的一种,浏览器会直接从缓存中获取副本并渲染。

    校验值(验证机制):服务器返回资源的时候有时在控制头信息带上这个资源的实体标签Etag(Entity Tag),它可以用来作为浏览器再次请求过程的校验标识。如过发现校验标识不匹配,说明资源已经被修改或过期,浏览器需求重新获取资源内容。

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

    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    • 1

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

    在HTTP请求和响应的消息报头中,常见的与缓存有关的消息报头有:

    缓存结构

    HTTP缓存机制

    缓存行为主要由缓存策略决定,而缓存策略由内容拥有者设置。这些策略主要通过特定的HTTP头部来清晰地表达。

    当一个用户发起一个静态资源请求的时候,浏览器会通过以下几步来获取资源:

    • 本地缓存阶段:先在本地查找该资源,如果有发现该资源,而且该资源还没有过期,就使用这一个资源,完全不会发送http请求到服务器;
    • 协商缓存阶段:如果在本地缓存找到对应的资源,但是不知道该资源是否过期或者已经过期,则发一个http请求到服务器,然后服务器判断这个请求,如果请求的资源在服务器上没有改动过,则返回304,让浏览器使用本地找到的那个资源;
    • 缓存失败阶段:当服务器发现请求的资源已经修改过,或者这是一个新的请求(在本来没有找到资源),服务器则返回该资源的数据,并且返回200, 当然这个是指找到资源的情况下,如果服务器上没有这个资源,则返回404。

    用户操作行为与缓存的关系

    用户操作与缓存的关系

    浏览器中的操作对缓存的影响:

    • 强制刷新 – 当按下ctrl+F5来刷新页面的时候, 浏览器将绕过各种缓存(本地缓存和协商缓存), 直接让服务器返回最新的资源;
    • 普通刷新 – 当按下F5或者点击刷新按钮来刷新页面的时候,浏览器将绕过本地缓存来发送请求到服务器, 此时, 协商缓存是有效的
    • 回车或转向 – 当在地址栏上输入回车或者按下跳转按钮的时候, 所有缓存都生效

    本地缓存阶段

    Expires

    指定缓存到期GMT的绝对时间,如果设了max-age,max-age就会覆盖expires。如果expires到期需要重新请求。

    Cache-Control

    Cache-Control是http 1.1中为了弥补 Expires 缺陷新加入的。对已缓存的内容进行控制:

    • Cache-control: public表示缓存的版本可以被代理服务器或者其他中间服务器识别。
    • Cache-control: private意味着这个文件对不同的用户是不同的。只有用户自己的浏览器能够进行缓存,公共的代理服务器不允许缓存。
    • Cache-control: no-cache意味着文件的内容不应当被缓存。这在搜索或者翻页结果中非常有用,因为同样的URL,对应的内容会发生变化。

    其他相关控制字段

    • max-age: 指定缓存过期的相对时间秒数,max-ag=0或者是负值,浏览器会在对应的缓存中把Expires设置为1970-01-01 08:00:00。
    • s-maxage: 类似于max-age,只用在共享缓存上,比如proxy。
    • public: 通常情况下需要http身份验证的情况,响应是不可cahce的,加上public可以使它被cache。
    • no-cache: 强制浏览器在使用cache拷贝之前先提交一个http请求到源服务器进行确认。这对身份验证来说是非常有用的,能比较好的遵守 (可以结合public进行考虑)。它对维持一个资源总是最新的也很有用,与此同时还不完全丧失cache带来的好处),因为它在本地是有拷贝的,但是在用之前都进行了确认,这样http请求并未减少,但可能会减少一个响应体。
    • no-store: 告诉浏览器在任何情况下都不要进行cache,不在本地保留拷贝。
    • must-revalidate: 强制浏览器严格遵守你设置的cache规则。
    • proxy-revalidate: 强制proxy严格遵守你设置的cache规则。
    • cache:使用本地缓存,不发生请求。

    用法举例: Cache-Control: max-age=3600, must-revalidate

    协商缓存阶段

    Last-Modified & if-modified-since

    Last-Modified与If-Modified-Since是一对报文头,属于http 1.0。 
    last-modified是WEB服务器认为对象的最后修改时间,比如文件的最后修改时间,动态页面的最后产生时间。

    ETag & If-None-Match

    ETag与If-None-Match是一对报文,属于http 1.1。

    ETag可以用来解决这种问题。ETag是一个文件的唯一标志符。就像一个哈希或者指纹,每个文件都有一个单独的标志,只要这个文件发生了改变,这个标志就会发生变化。

    ETag机制类似于乐观锁机制,如果请求报文的ETag与服务器的不一致,则表示该资源已经被修改过,需要发最新的内容给浏览器。

    同时使用这两个报文头,在完全匹配If-Modified-Since和If-None-Match即检查完修改时间和Etag之后,如都与服务器的相符,服务器返回304,否则,发送最新内容给浏览器。

    Etag/lastModified过程如下:

    1. 客户端请求一个页面(A)。
    2. 服务器返回页面A,并在给A加上一个Last-Modified/ETag。
    3. 客户端展现该页面,并将页面连同Last-Modified/ETag一起缓存。
    4. 客户再次请求页面A,并将上次请求时服务器返回的Last-Modified/ETag一起传递给服务器。
    5. 服务器检查该Last-Modified或ETag,并判断出该页面自上次客户端请求之后还未被修改,直接返回响应304和一个空的响应体。

    304:通过If-Modified-Since If-Match判断资源是否修改,如未修改则返回304,发生了一次请求,但请求内容长度为0,节省了带宽。 如果有多台负载均衡的服务器,不同服务器计算出的Etag可能不同,这样就会造成资源的重复加载。

    Etag 主要为了解决 Last-Modified 无法解决的一些问题:

    1、一些文件也许会周期性的更改,但是他的内容并不改变(仅仅改变的修改时间),这个时候我们并不希望客户端认为这个文件被修改了,而重新GET;

    2、某些文件修改非常频繁,比如在秒以下的时间内进行修改,(比方说1s内修改了N次),If-Modified-Since能检查到的粒度是s级的,这种修改无法判断(或者说UNIX记录MTIME只能精确到秒);

    3、某些服务器不能精确的得到文件的最后修改时间。

    其他标签

    Content-Length:尽管并没有在缓存中明确涉及,Content-Length头部在设置缓存策略时很重要。某些软件如果不提前获知内容的大小以留出足够空间,则会拒绝缓存该内容。

    Vary:缓存系统通常使用请求的主机和路径作为存储该资源的键。当判断一个请求是否是请求同样内容时,Vary头部可以被用来提醒缓存系统需要注意另一个附加头部。它通常被用来告诉缓存系统同样注意Accept-Encoding头部,以便缓存系统能够区分压缩和未压缩的内容。

    总结

    浏览器第一次请求时:

    浏览器第一次请求时

    浏览器再次请求时:

    浏览器再次请求

    Question: 设置了一个月才过期的缓存,如果服务器端更新了css代码,要怎么让用户更新缓存呢?

    三、页面缓存

    页面缓存是将动态页面直接生成静态的页面放在服务器端,用户调取相同页面时,静态页面将直接下载到客户端,不再需要通过程序的运行和数据库的访问,大大节约了服务器的负载。每次访问页面时,会检测相应的缓存页面是否存在,若不存在,则连接数据库得到数据渲染页面并生成缓存页面文件,这样下次访问的页面文件就发挥作用了。

    MemCache的缓存策略:(visio不能用了,自己画的,略丑慎看)

    页面缓存

    四、数据库缓存

    数据库的缓存一般由数据库提供,可以对表建立高速缓存。数据库中,用户可能多次执行相同的查询语句,为了提高查询效率,数据库会在内存划分一个专门的区域,用来存放用户最近执行的查询,这块区域就是缓存。

    数据库缓存的使用必须在一定的应用环境下:查询的数据库表不会经常变动、有大量相同的查询(如订单信息查询)。

    PS:这个缓存策略也可以用在前端,比如订单信息不变的情况下,可以在前端设置一个对象,保存请求的地址、参数、结果,第一次请求时会保存请求的地址、参数和结果,再次请求时,如果请求的地址、参数一样,则查询该对象直接返回请求的结果。

    五、缓存的同步、复制与分发

    缓存的同步指的是写命中缓存的时候,如果保持缓存与磁盘上数据一致性的问题。一般有两种方案:

    • 直写式WT(Write Through):当CPU要将数据写入内存时,除了更新缓冲内存上的数据外,也将数据写在磁盘中以维持主存与缓冲内存的一致性,当要写入内存的数据多起来的话,速度自然就慢了下来。
    • 回写式WB(Write Back):当CPU要将数据写入内存时,只会先更新缓冲内存上的数据,随后再让缓冲内存在总线不塞车的时候才把数据写回磁盘,所以速度会快得多。

    两种方式各有利弊,直写缓存方法利用了高速缓存中的数据始终与主存储器中数据匹配的特点。但是,需要的总线周期却非常耗时,从而降低性能。回写缓存可以维持性能,因为写入始终是在“爆发”中进行的,因而运行所需的总线周期将大大减少。 
    两个CPU,或者CPU与DMA同时共享一块物理内存时,writer在写完后,要write back,这样另一个reader才能看到它写入的数据;在writer变为reader的时候,需要invalidate,否则看不到另一个 writer写入的数据。所以在共享的时候,需要同时做writeback和invalidate。

    六、与缓存相关的算法

    • 先进先出算法(FIFO):如果一个数据最先进入缓存中,则应该最早淘汰掉。如果服务器接受到的数据请求与时间高度相关,可以考虑使用FIFO算法。
    • 最不经常使用算法(LFU):这个缓存算法使用一个计数器来记录条目被访问的频率。通过使用LFU缓存算法,最低访问数的条目首先被移除。这个方法并不经常使用,因为它无法对一个拥有最初高访问率之后长时间没有被访问的条目缓存负责。
    • 最近最少使用算法(LRU):这个缓存算法将最近使用的条目存放到靠近缓存顶部的位置。当一个新条目被访问时,LRU将它放置到缓存的顶部。当缓存达到极限时,较早之前访问的条目将从缓存底部开始被移除。这里会使用到昂贵的算法,而且它需要记录“年龄位”来精确显示条目是何时被访问的。此外,当一个LRU缓存算法删除某个条目后,“年龄位”将随其他条目发生改变。
    • 自适应缓存替换算法(ARC):在IBM Almaden研究中心开发,这个缓存算法同时跟踪记录LFU和LRU,以及驱逐缓存条目,来获得可用缓存的最佳使用。
    • 最近最常使用算法(MRU):这个缓存算法最先移除最近最常使用的条目。一个MRU算法擅长处理一个条目越久,越容易被访问的情况。

    应用:图片缓存的预载与分发

    图片的预加载

    为了防止图片在需要的时候才加载,而付出的时间开销,可以将图片进行预加载。代码如下:

    <html>
    <script>
        var img = new Image();
        image.src = "b.jpg";
    </script>
    <body>
        <img src="a.jpg" alt="pic" onmouseover="this.src='b.jpg'">
    </body>
    </html>
    • 图片的分发

    网页传输过程中,图片会占用大量的数据量,是影响网站性能的主要因素,因此大部分网站会将图片存储从网站中分离出来,假设一个或多个图片服务器来存储图片,将图片放到一个虚拟目录中,而网页上仍然用同一个URL地址指向服务器上的某一个图片的地址。这样可以大大提高网站的性能。

    转自:https://blog.csdn.net/LeeSirbupt/article/details/54409931

    展开全文
  • 如何进行清除web端缓存

    千次阅读 2018-11-05 11:55:16
    //meta标签清理缓存 //标签: //如果需要在html页面上设置不缓存,这在标签中加入如下语句: //用于设定禁止浏览器从本地机的缓存中调阅页面内容 //Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应...

    对于一个html页面,缓存分3部分,一个是页面内容,一个是css样式,一个是JS文件
    1、进行清除页面内容
    //meta标签清理缓存
    //标签:

    //如果需要在html页面上设置不缓存,这在标签中加入如下语句:

    //用于设定禁止浏览器从本地机的缓存中调阅页面内容 //Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。 //可以用于设定网页的到期时间

    //清除浏览器中的缓存,它和其它几句合起来用,就可以使你再次进入曾经访问过的页面时,浏览器必须从服务端下载最新的内容,达到刷新的效果。

    2、CSS和JS文件

    就是只要在每次修改后改一下版本号即可,这样比较麻烦。 可以通过gulp和webpack工具进行添加版本号。 gulp有个通用与简单项目自动加版本号的方法:安装方法如下 $ npm install gulp-rev-append-all --save-dev

    执行文件gulpfile.js如下

    var rev = require(‘gulp-rev-append-all’);

    gulp.task(‘rev’, function() {
    gulp.src(’./index.html’)
    .pipe(rev())
    .pipe(gulp.dest(’.’));
    });

    展开全文
  • Web页面浏览器设置JS Cookie缓存

    千次阅读 2019-01-30 15:24:36
    Web浏览器时常需要缓存一些信息,这时候需要用到cookie,Cookie 是一些数据, 存储于你电脑上的文本文件中。当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。 JavaScript 可以使用 ...

    Web浏览器端时常需要缓存一些信息,这时候需要用到cookie,Cookie 是一些数据, 存储于你电脑上的文本文件中。当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。

    JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。

    1.创建Cookie
    JavaScript 中,创建 cookie 如下所示:

    document.cookie="username=John Doe";

    还可以为 cookie 添加一个过期时间(以 UTC 或 GMT 时间)。默认情况下,cookie 在浏览器关闭时删除:

    document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

    还可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下,cookie 属于当前页面。

    document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

    2.读取 Cookie
    在 JavaScript 中, 可以使用以下代码来读取 cookie:

    var x = document.cookie;

    3.删除 Cookie
    删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可,如下所示,设置为 Thu, 01 Jan 1970 00:00:00 GMT:

    document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";


    注意,当您删除时不必指定 cookie 的值。

    完整实例

    function setCookie(name,value,expireHours){
        var cookieString=name+"="+escape(value);
    	if(expireHours>0){
    		var date = new Date();
    		date.setTime(date.getTime()+(expireHours*3600*1000));
    		cookieString=cookieString+"; expires="+date.toGMTString();
    	}
    	document.cookie=cookieString;
    }
    function getCookie(cname){
        var name = cname + "=";
    	var ca = document.cookie.split(';');
    	for (var i = 0; i < ca.length; i++) {
    		var c = ca[i];
    		while (c.charAt(0) == ' ') c = c.substring(1);
    		if (c.indexOf(name) != -1) {
    			return c.substring(name.length, c.length)
    		}
    	}
    	return "";
    }
    function delCookie(){
        var date = new Date();
    	date.setTime(date.getTime()-10000);
    	document.cookie=name+"=v; expires="+date.toGMTString();
    }

     

    展开全文
  • web前端缓存

    千次阅读 2017-10-15 11:27:32
    说说web缓存 网上关于WEB缓存的文章很多,今天汇总一下。 为什么要用缓存 一般针对静态资源如CSS,JS,图片等使用缓存,原因如下: 请求更快:通过将内容缓存在本地浏览器或距离最近的缓存服务器(如CDN...

    说说web缓存

    网上关于WEB缓存的文章很多,今天汇总一下。

    为什么要用缓存

    一般针对静态资源如CSS,JS,图片等使用缓存,原因如下:

    • 请求更快:通过将内容缓存在本地浏览器或距离最近的缓存服务器(如CDN),在不影响网站交互的前提下可以大大加快网站加载速度。

    • 节省带宽:对于已缓存的文件,可以减少请求带宽甚至无需请求网络。

    • 降低服务器压力:在大量用户并发请求的情况下,服务器的性能受到限制,此时将一些静态资源放置在网络的多个节点,可以起到均衡负载的作用,降低服务器的压力。

    缓存分类

    缓存分为服务端侧(server side,比如 Nginx、Apache)和客户端侧(client side,比如 web browser)。
    常用的服务端缓存有CDN缓存,客户端缓存就是指浏览器缓存。

    浏览器缓存机制详解

    缓存类型

    浏览器缓存分为强缓存协商缓存
    强缓存:浏览器在加载资源时,先根据这个资源的一些http header判断它是否命中强缓存,强缓存如果命中,浏览器直接从自己的缓存中读取资源,不会发请求到服务器。比如某个css文件,如果浏览器在加载它所在的网页时,这个css文件的缓存配置命中了强缓存,浏览器就直接从缓存中加载这个css,连请求都不会发送到网页所在服务器;
    协商缓存:当强缓存没有命中的时候,浏览器一定会发送一个请求到服务器,通过服务器端依据资源的另外一些http header验证这个资源是否命中协商缓存,如果协商缓存命中,服务器会将这个请求返回(304),但是不会返回这个资源的数据,而是告诉客户端可以直接从缓存中加载这个资源,于是浏览器就又会从自己的缓存中去加载这个资源;若未命中请求,则将资源返回客户端,并更新本地缓存数据(200)。

    强缓存与协商缓存区别:强缓存不发请求到服务器,协商缓存会发请求到服务器。

    如何设置缓存

    1 HTML Meta标签控制缓存(非HTTP协议定义)
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    上述代码的作用是告诉浏览器当前页面不被缓存,每次访问都需要去服务器拉取。这种方法使用上很简单,但只有部分浏览器可以支持,而且所有缓存代理服务器都不支持,因为代理不解析HTML内容本身。
    2 HTTP头信息控制缓存
    HTTP头信息控制缓存是通过Expires(强缓存)、Cache-control(强缓存)、Last-Modified/If-Modified-Since(协商缓存)、Etag/If-None-Match(协商缓存)实现,下面详细介绍。

    1)Expires是http1.0提出的一个表示资源过期时间的header,它描述的是一个绝对时间,由服务器返回,用GMT格式的字符串表示,如:Expires:Thu, 31 Dec 2016 23:55:55 GMT,

    读取缓存数据条件:缓存过期时间(服务器的)< 当前时间(客户端的

    缺点:Expires是较老的强缓存管理header,由于它是服务器返回的一个绝对时间,这样存在一个问题,如果客户端的时间与服务器的时间相差很大(比如时钟不同步,或者跨时区),那么误差就很大,所以在HTTP 1.1版开始,使用Cache-Control: max-age=秒替代。
    2)Cache-Control描述的是一个相对时间,在进行缓存命中的时候,都是利用客户端时间进行判断,所以相比较Expires,Cache-Control的缓存管理更有效,安全一些。

    读取缓存数据条件:上次缓存时间(客户端的)+max-age < 当前时间(客户端的)

    Cache-Control值可以是public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age

    各个消息中的指令含义如下:
    Public指示响应可被任何缓存区缓存。
    Private指示对于单个用户的整个或部分响应消息,不能被共享缓存处理。这允许服务器仅仅描述当前用户的部分响应消息,此响应消息对于其他用户的请求无效。
    no-cache指示请求或响应消息不能缓存,该选项并不是说可以设置”不缓存“,而是需要和服务器确认
    no-store在请求消息中发送将使得请求和响应消息都不使用缓存,完全不存下來。
    max-age指示客户机可以接收生存期不大于指定时间(以秒为单位)的响应。上次缓存时间(客户端的)+max-age(64200s)<客户端当前时间
    min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应。
    max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值,那么客户机可以接收超出超时期指定值之内的响应消息。
    

    注意:这两个header可以只启用一个,也可以同时启用,当response header中,Expires和Cache-Control同时存在时,Cache-Control优先级高于Expires:

    3)Last-Modified/If-Modified-Since:Last-Modified/If-Modified-Since要配合Cache-Control使用。

    Last-Modified:标示这个响应资源的最后修改时间。web服务器在响应请求时,告诉浏览器资源的最后修改时间。
    If-Modified-Since:当资源过期时(强缓存失效),发现资源具有Last-Modified声明,则再次向web服务器请求时带上头 If-Modified-Since,表示请求时间。web服务器收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对。若最后修改时间较新,说明资源又被改动过,则响应整片资源内容(写在响应消息包体内),HTTP 200;若最后修改时间较旧,说明资源无新修改,则响应HTTP 304 (无需包体,节省浏览),告知浏览器继续使用所保存的cache。
    缺点

    • Last-Modified标注的最后修改只能精确到秒级,如果某些文件在1秒钟以内,被修改多次的话,它将不能准确标注文件的修改时间(无法及时更新文件)

    • 如果某些文件会被定期生成,当有时内容并没有任何变化,但Last-Modified却改变了,导致文件没法使用缓存,有可能存在服务器没有准确获取文件修改时间,或者与代理服务器时间不一致等情形(无法使用缓存)。

    HTTP1.1中Etag解决了上述问题。

    4)Etag/If-None-Match:Etag/If-None-Match也要配合Cache-Control使用。
    Etag:web服务器响应请求时,告诉浏览器当前资源在服务器的唯一标识(生成规则由服务器决定)。Apache中,ETag的值,默认是对文件的索引节(INode),大小(Size)和最后修改时间(MTime)进行Hash后得到的。
    If-None-Match:当资源过期时(使用Cache-Control标识的max-age),发现资源具有Etage声明,则再次向web服务器请求时带上头If-None-Match (Etag的值)。web服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对,决定返回200或304。
    Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符,能够更加准确的控制缓存。Last-Modified与ETag一起使用时,服务器会优先验证ETag。
    Etag

    2 浏览器请求流程图
    浏览器第一次请求流程图

    浏览器再次请求时

    3、用户行为与缓存

    浏览器缓存行为还有用户的行为有关,引用文章浏览器 HTTP 协议缓存机制详解的结论

    CDN缓存

    CDN缓存属于Cache服务器的一种。
    CDN的全称是Content Delivery Network,即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络"边缘",使用户可 以就近取得所需的内容,解决Internet网络拥塞状况,提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等 原因,解决用户访问网站的响应速度慢的根本原因。

      通过上图,我们可以了解到,使用了CDN缓存后的网站的访问过程为:
      1)、用户向浏览器提供要访问的域名;
      2)、浏览器调用域名解析库对域名进行解析,由于CDN对域名解析过程进行了调整,所以解析函数库一般得到的是该域名对应的CNAME记录,为了得到实际IP地址,浏览器需要再次对获得的CNAME域名进行解析以得到实际的IP地址;在此过程中,使用的全局负载均衡DNS解析,如根据地理位置信 息解析对应的IP地址,使得用户能就近访问。
      3)、此次解析得到CDN缓存服务器的IP地址,浏览器在得到实际的IP地址以后,向缓存服务器发出访问请求;
      4)、若请求文件并未修改,返回304(充当服务器的角色)。若当前文件已过期,则缓存服务器根据浏览器提供的要访问的域名,通过Cache内部专用DNS解析得到此域名的实际IP地址,再由缓存服务器向此实际IP地址提交访问请求
      5)、缓存服务器从实际IP地址得得到内容以后,一方面在本地进行保存,以备以后使用,二方面把获取的数据返回给客户端,完成数据服务过程;
      6)、客户端得到由缓存服务器返回的数据以后显示出来并完成整个浏览的数据请求过程。

    参考文章:
    浏览器 HTTP 协议缓存机制详解
    CDN的实现原理
    写给后端程序员的HTTP缓存原理介绍

    展开全文
  • Web缓存

    千次阅读 2015-11-17 15:01:43
    Web缓存的作用与类型 前言&摘要 这段时间的工作内容主要是为一个客户端类型的产品增加文档在线存储和文档在线预览相关特性。由于测试的同事比较细心和专业...虽然以前也一些关于Web缓存的意识,但并没有很系
  • web缓存技术

    2014-06-07 21:00:58
    1 web缓存的简介 1.1 采取Web加速技术措施  采取Web加速技术,减少用户访问的延迟。如采用Web缓存[8](Web Caching )技术、Web预取(Web Prefetching)技术、CDN ( Content...典型的缓存体系结构IRCache, Summary C
  • WEB页面的客户端缓存

    千次阅读 2016-04-20 09:28:37
    对于web页面中的js和css文件,浏览器并不是每次都请求完整的内容,时候会直接利用本地的缓存一些页面,我们不会经常性的更新,页面内容比较固定,那么如果我们每次请求的时候都要重新加载一遍静态文件,这...
  • web测试_浏览器缓存

    2018-10-11 14:55:54
    web测试_浏览器缓存 本地缓存不用更新的时候,http返回的是304,只需要返回header部分,body为空
  • web缓存原理分析

    千次阅读 2018-03-22 14:29:18
    为什么2月份会停更一个月的博客呢? … 过年是一个原因, ... 上班真的很辛苦, 每天感觉挺累的, 书也好久没有看了, 今天恰逢没有新需求, 项目在提测之际来写下一遍转载的文章, 主要记录一下在各处搜索到的关于web缓存...
  • web缓存技术总结

    千次阅读 2014-04-10 14:55:31
    1 web缓存的简介 1.1 采取Web加速技术措施  采取Web加速技术,减少用户访问的延迟。如采用Web缓存[8](Web Caching )技术、Web预取(Web Prefetching)技术、CDN ( Content...典型的缓存体系结构IRCache, Summary C
  • web 缓存优化

    千次阅读 2011-07-13 15:55:10
    首页 | 技术文档 问题讨论-->| 在线定单 | 关于我们标题:WEB 缓存优化这是一篇知识性的文档,主要目的是为了让Web缓存相关概念更容易被开发者理解并应用于实际的应用环境中。为了简要起见,某些实现方面的细节被...
  • 一)什么是Web缓存Web缓存是指一个Web资源(如html页面,图片,js,数据等)存在于Web服务器和客户端(浏览器)之间的副本。缓存会根据进来的请求保存输出内容的副本;当下一个请求来到的时候,如果是相同的URL...
  • 手机页面设置缓存

    千次阅读 2018-08-07 08:15:19
    设置缓存 &lt;meta http-equiv="Cache-Control"content="no-cache"/&gt; 手机页面通常在第一次加载后会进行缓存,然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用...
  • Web 开发人员需知的 Web 缓存知识

    千次阅读 2013-06-14 15:11:29
    翻译正文(2013-05-20 – 2013-05-23) ...Web缓存如何工作如何控制缓存和不缓存: HTML Meta标签 vs. HTTP头信息;Pragma HTTP头信息(以及为什么不起作用);使用Expires HTTP头信息控制不过期;Ca
  • web缓存机制;缓存清除
  • web缓存详解

    千次阅读 2008-03-14 17:12:00
    这是一篇知识性的文档,主要目的是为了让Web缓存相关概念更容易被开发者理解并应用于实际的应用环境中。为了简要起见,某些实现方面的细节被简化或省略了。如果你更关心细节实现则完全不必耐心看完本文,后面参考...
  • 说说web缓存

    千次阅读 2016-11-30 10:24:04
    为什么要用缓存一般针对静态资源如CSS,JS,图片等使用缓存,原因如下: 请求更快:通过将内容缓存在本地浏览器或距离最近的缓存服务器(如CDN),在不影响网站交互的前提下可以大大加快网站加载速度。 节省带宽:对于...
  • Web缓存技术概述

    千次阅读 2005-08-05 00:26:00
    Web缓存技术概述王世克 吴集 金士尧(国防科技大学计算机学院并行与分布国家...本文首先描述了Web缓存系统的基本要素及理想属性,然后介绍目前围绕Web缓存技术已经开展的研究,最后讨论Web缓存技术需要进一步研究的问
  • WEB前端缓存解决方案

    千次阅读 2018-11-09 16:38:49
    WEB前端缓存解决方案问题描述页面缓存js/css缓存 问题描述 使用angularjs(1.5.0)+gulp(3.9.0)做SPA开发时,修改js后,使用gulp-rev(6.0.1)对文件名进行了修改,但是刷新界面后修改的文件并没有加载,必须使用CRLT+F5...
  • web缓存与304

    千次阅读 2017-12-19 11:05:20
    细说缓存与304 写在最前 在平时的前端开发中我们经常会遇到这种操作。明明我代码更新了,咋刷出来还是以前的呢?是不是缓存了?快清下缓存看看!你看页面是304,怪不得没更新!等等很多情况。作者起初也不是很了解...
  • WEB缓存_如何解决缓存的一致性

    千次阅读 2017-12-09 15:44:56
    时候要做到这一点是很困难的,似乎听起来很可笑,但是当系统规模达到一定程度的时候,这个问题就会凸显。在一个大的团队中,每个开发都在系统里面提交自己的代码,很可能某段代码修改了数据库,但是忘了清缓存,...
  • 基于Spring的Web缓存

    千次阅读 2016-04-30 13:16:57
    Spring作为一个成熟的java web 框架,自身一套完善的缓存机制,同时,Spring还未其他缓存的实现提供了扩展。今天让我们在一个简单的应用中尝试spring的数据库缓存、应用层缓存、页面缓存的实现。
  • HTTP web缓存策略

    千次阅读 2012-09-28 15:08:46
     HTTP协议中设计web缓存主要以下几个作用:首先缓存能减少冗余数据的传输,可以减少网络成本; 其次缓存能减少客户端对远server的依赖,从而提高了客户端装载页面的速度。下面着重阐述的是缓存的一些基本知识...
  • 大型web系统数据缓存设计

    千次阅读 2016-09-18 09:21:52
    所以接下来将讨论一下应用系统缓存的设计方面应该注意哪些东西,包括缓存的选型、常见缓存系统的特点和数据指标、缓存对象结构设计和失效策略以及缓存对象的压缩等等,以期让需求的同学尤其是初学者能够快速、系统...
  • Web系统中缓存的应用

    千次阅读 2015-07-29 18:35:06
     缓存就是数据交换的缓冲区,在web系统中,从浏览器到服务器,从服务器到数据库,从服务器到资源服务器,每一步都可以设置缓存来避免直接的I/O操作,从而提高网站性能。 二、什么时候用缓存 预读取 通过算法...
  • web 服务器有哪些

    万次阅读 多人点赞 2018-08-27 16:53:49
    什么是web服务器 "网络服务"(Web Service)的本质,就是通过网络调用其他网站的资源。 Web Service架构和云 如果一个软件的主要部分采用了"网络服务",即它把存储或计算环节"外包"...
  • php-web开发中的缓存

    千次阅读 2016-12-14 17:03:11
    开发中的缓存缓存的作用:减少内存,cpu资源的...客户端缓存,http协议中使用缓存HTML Meta标签控制缓存 http控制缓存的机制–如果有缓存 http缓存头信息图 1 先读取Etag- —-if-not-match 2 last-Modified——if-

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 209,984
精华内容 83,993
关键字:

web端有哪些缓存