对于Web前端而言,cache可以说是无处不在,通常是2个环节之间,就会引入一个cache做为提升整体效率的角色。例如A和B两者之间的数据交换,为了提升整体的效率,引入角色C,而C被用于当做热点数据的存储,或者是某种中间处理的机制。

也就是我们常常说的“空间换时间”,牺牲一部分代价,来换取整体效率的提升。

那么我们一起来看看前端当中,有那些比较关键的缓存?它们又是怎样协调工作的呢?我们一起来看看哈。

1. 域名转为IP地址(域名服务器DNS缓存)

我们知道url其实只是一个别名,真实的服务器请求地址,实际上是一个IP地址。获得IP地址的方式,就是查询DNS映射表。虽然这是一个非常简单的查询,但如果每次用户访问一个url都去查询DNS一次,未免显得太频繁。DNS会告诉你,你别老是经常过来,万一我挂了,我们就无法愉快地玩耍了。

各个浏览器的缓存时间,会有一定的差别。而在chrome浏览器中查看dns的缓存时间的方式:chrome://net-internals/#dns

因此,浏览器一般会在本地会建立一个DNS缓存,在一段比较长的时间里,都是使用本地的缓存映射。例如,在win7系统的cmd里,可以通过“ipconfig /flushdns ”的方式来刷新本地DNS。

优点:url映射为IP非常快。

成本:消耗一定的浏览器空间来存储映射关系

2. 访问服务器,获取静态内容(地理位置分布式服务CDN)

有同学可能会说,这个CDN不是缓存。其实,CDN的原则就是将离你很远的东西,放在离你很近的地方,通过这种方式提高用户的访问速度。从这个角度,它也可以理解为牺牲空间成本换取了时间,本质上也带有cache的嫌疑,我们权且当做一种特殊的cache吧。

优点:解决用户离服务器太远的时候,网络路由中跳来跳去的严重耗时。

成本:全国各地部署多套静态存储服务,管理成本比较高,发布新文件的时候,需要等待全国节点的更新等。

3. 浏览器本地缓存(无网络交互类型)

在雅虎前端优化的14条原则中,其中一条就是尽量消灭请求,以达到降低服务器压力和提升用户体验的效果。静态文件,例如Js、html、css、图片等内容,很多内容可以1次请求,然后未来就直接访问本地,不再请求web服务器。

常用的实现方法是通过Http协议头中的expire和max-age来控制,这两者的使用方法和区别,我这里就不赘叙了哈。还有一种最近HTML5中很火的,则是localStorage,尤其在移动端也被做为一个强大的缓存,甚至当做一种本地存储来广泛使用。

优点:减少网络传输,加快页面内容展示速度,提升用户体验。

成本:占用客户端的部分内存和磁盘,影响实时性。

4. 浏览器和web服务协议缓存(有网络交互类型)

浏览器的本地缓存是存在过期时间的,一旦过期,就必须重新向服务器请求。这个时候,会有两种情形:

(1)服务器的文件或者内容没有更新,可以继续使用浏览器本地缓存。

(2)服务器的文件或者内容已经更新,需要重新请求,通过网络传输新的文件或者内容。

这里的协商方式也可以通过Http协议来控制,Last-Modified和Etag,这个时候请求服务器,如果是内容没有发生变更的情况,服务器会返回304 Not Modified。这样的话,就不需要每次访问服务器都通过网络传输一个比较大的文件或者数据包,只要简单的http应答就可以达到相同的请求文件效果。

优点:减少频繁的网络大数据包传输,节约带宽,提升用户体验。

成本:增加了的服务器处理的步骤,消耗更多的CPU资源。

5. 浏览器中间代理

上面的几种cache机制,实际上都是非常常见。但是,在移动互联网时代,流量昂贵是很多用户心中的深深的痛。于是,又出现了一种新型的中间chache,也就是在浏览器和web服务器再架设一个中间代理。这个代理服务器会帮助手机浏览器去请求web页面,然后将web页面进行处理和压缩(例如压缩文件和图片),使页面变小,然后再传输给手机端的浏览器。

部分手机浏览器(例如chrome),号称可以节省流量,实际上就是上述做法。但是,也分为两种情况:

(1)用户的网络和手机配置都比较差,因为页面被压缩变小,加载和传输速度变快,并且节约了流量。

(2)用户的网络和手机配置都比较好,本身直连速度已经很快了,反而因为设置了中间代理,加载速度变慢,也可节约流量。

优点:节约用户流量,大部分情况下提升了加载速度。

成本:需要架设中间代理服务器,对各种文件进行压缩,有比较高的服务器维护成本。

6. 预加载缓存机制

这种加载方式也是主要流行在移动端,为了解决手机网速慢和浏览器加载性能的问题,浏览器会判断页面的关联内容,进行“预加载”。也就是说,在用户浏览A页面的时候,就下载并且加载B页面的内容。给用户的体验就是,B页面一瞬间就出现了,中间没有任何延迟的感觉,从而带来更好的极佳的用户体验。

这种实现机制,往往由浏览器来实现,当然,手机页面本身,也可以通过JS来自身实现。而这种机制也存在一些问题,浏览器需要预判用户的浏览行为,在一些场景下,这个预判算法本身不一定准确,如果不准确则带来一定的流量、内存和系统资源的浪费。、

优点:给用户带来极佳的页面展示体验。

缺点:预判实现比较复杂,占据一定的内存和手机系统资源,可能产生流量和资源浪费。

前端的chache当然不仅仅如此简单,如果细致到每一个小环节和组成部分,我们会发现实际上是无处不在的,例如浏览器的渲染行为、网络网卡的传输环节,小环节和小环节之间也有无数这种类型的cache角色。

这个就如同几何分形学中的自相似性:从整体上看符合某种组成规律或者特性,同时,从局部看,仍然符合某种组成的规律或者特性。

Web前端的缓存机制(那些以代价换来的效率)的更多相关文章

  1. Web浏览器的缓存机制

    Web缓存的工作原理 所有的缓存都是基于一套规则来帮助他们决定什么时候使用缓存中的副本提供服务(假设有副本可用的情况下,未被销毁回收或者未被删除修改).这些规则有的在协议中有定义(如HTTP协议1.0 ...

  2. 【Web缓存机制系列】2 – Web浏览器的缓存机制

    Web缓存的工作原理 所有的缓存都是基于一套规则来帮助他们决定什么时候使用缓存中的副本提供服务(假设有副本可用的情况下,未被销毁回收或者未被删除修改).这些规则有的在协议中有定义(如HTTP协议1.0 ...

  3. 【Web缓存机制系列】2 – Web浏览器的缓存机制-(新鲜度 校验值)

    Web缓存的工作原理 所有的缓存都是基于一套规则来帮助他们决定什么时候使用缓存中的副本提供服务(假设有副本可用的情况下,未被销毁回收或者未被删除修改).这些规则有的在协议中有定义(如HTTP协议1.0 ...

  4. HTML5之应用缓存---manifest---缓存使用----Web前端manifest缓存

    相信来查这一类问题的都是遇到问题或者是初学者吧! 没关系相信你认真看过之后就会知道明白的 这是HTML5新加的特性 HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连 ...

  5. 自学WEB前端能不能找到一份前端开发工作

    关于自学WEB前端能不能通过社招找到一份互联网公司WEB前端开发的工作,有无数的人问出这样的问题,答案没有标准的,只能从概率去考虑.有的人可以,有的人不可以,有的人自学就业的概率就是高,有的概率就是低 ...

  6. 自学web前端能不能找到一份前端的工作吗

    关于自学web前端能不能通过社招找到一份互联网公司web前端开发的工作,有无数的人问出这样的问题,答案没有标准的,只能从概率去考虑.有的人可以,有的人不可以,有的人自学就业的概率就是高,有的概率就是低 ...

  7. H5 缓存机制浅析 移动端 Web 加载性能优化

    腾讯Bugly特约作者:贺辉超 1 H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5 引入的离线存储, ...

  8. Web App时代的缓存机制新思路

    Web App常见架构 以WebQQ例,WebQQ这个站点的所有内容都是一个页面里面呈现的,我们看到的类似windows操作系统的框架,是它的顶级容器和框架,由AlloyOS的内核负责统筹和管理,然后 ...

  9. WEB请求过程(http解析,浏览器缓存机制,域名解析,cdn分发)

    概述 发起一个http请求的过程就是建立一个socket通信的过程. 我们可以模仿浏览器发起http请求,譬如用httpclient工具包,curl命令等方式. curl "http://w ...

随机推荐

  1. BZOJ4942 NOI2017整数(线段树)

    首先把每32位压成一个unsigned int(当然只要压起来能过就行).如果不考虑进/退位的话,每次只要将加/减上去的数拆成两部分直接单点修改就好了.那么考虑如何维护进/退位.可以发现进位的过程其实 ...

  2. LOJ #2434. 「ZJOI2018」历史(LCT)

    题意 click here 题解 我们首先考虑答案是个什么样的东西, 不难 发现每个点可以单独计算它的贡献. 令每个点 \(i\) 崛起次数为 \(a_i\) . 假设一个点子树的 \(\sum a_ ...

  3. 10 Zabbix Item类型之Zabbix IPMI类型

    点击返回:自学Zabbix之路 Zabbix Item类型之Zabbix IPMI类型 一般使用zabbix IPMI 监控硬件信息,比如说温度. 在编译安装zabbix server的时候,一定要加 ...

  4. ORMLite学习入门笔记

    ORMLite学习入门笔记 使用原始的SQLiteHelper来操作维护数据库有点过于繁琐,重复工作量较大.所以会想到使用一个比较方便的ORM来维护我们本地的数据库,各位业界前辈都给我推荐了ORMLi ...

  5. strace命令,read,write

    strace + 运行的程序,可以查看程序运行的过程中调用的系统函数 read.write函数常常被称为Unbuffered I/O.指的是无用户及缓冲区.但不保证不使用内核缓冲区.

  6. poj 3678(SCC+2-SAT)

    传送门:Problem 3678 https://www.cnblogs.com/violet-acmer/p/9769406.html 难点: 题意理解+构图 题意: 有n个点 v[0,2..... ...

  7. SQL Server sp_executesql介绍和使用

    execute相信大家都用的用熟了,简写为exec,除了用来执行存储过程,一般都用来执行动态Sql sp_executesql,sql2005中引入的新的系统存储过程,也是用来处理动态sql的, 如: ...

  8. Prometheus MySQL_exporter

    MySQL Exporter mysqld_exporter是用来搜集mysql的性能指标的,适用于mysql5.5及其以上版本 程序安装 下载地址:https://prometheus.io/dow ...

  9. POJ1742Coins(多重背包)

    Coins Time Limit: 3000MS   Memory Limit: 30000K Total Submissions: 32309   Accepted: 10986 Descripti ...

  10. 安装完office后 在组件服务里DCOM配置中找不到

    这个主要是64位系统的问题,excel是32位的组件,所以在正常的系统组件服务里是看不到的 可以通过在运行里面输入 comexp.msc -32 来打开32位的组件服务,在里就能看到excel组件了