资讯专栏INFORMATION COLUMN

浏览器的缓存机制

LeanCloud / 1401人阅读

摘要:从浏览器角度来看,整个就是一个源服务器,从这个层面来说,浏览器和服务器之间的缓存机制,在这种架构下同样适用。如果命中,则返回,告诉浏览器资源未更新,可使用本地的缓存。

缓存类型

缓存在宏观上可以分成两类:私有缓存和共享缓存。共享缓存就是那些能被各级代理缓存的缓存。私有缓存就是用户专享的,各级代理不能缓存的缓存。

微观上可以分下面几类:

浏览器缓存

缓存存在的意义就是当用户点击back按钮或是再次去访问某个页面的时候能够更快的响应。尤其是在多页应用的网站中,如果你在多个页面使用了一张相同的图片,那么缓存这张图片就变得特别的有用。浏览器先向代理服务器发起Web请求,再将请求转发到源服务器。其中浏览器缓存包括强缓存和协商缓存,下文有详细介绍。本文主要侧重点就是针对于浏览器缓存。

2.CDN缓存
  CDN缓存一般是由网站管理员自己部署,为了让他们的网站更容易扩展并获得更好的性能。通常情况下,浏览器先向CDN网关发起Web请求,网关服务器后面对应着一台或多台负载均衡源服务器,会根据它们的负载请求,动态将请求转发到合适的源服务器上。从浏览器角度来看,整个CDN就是一个源服务器,从这个层面来说,浏览器和服务器之间的缓存机制,在这种架构下同样适用。

3.代理服务器缓存
  代理服务器是浏览器和源服务器之间的中间服务器,代理转发响应时,缓存代理会预先将资源的副本(缓存)保存到代理服务器上。当代理再次接收到对相同资源的请求时,就可以不从源服务器那里获取资源,而是将之前缓存的资源作为响应返回。

4.数据库缓存
  数据库缓存是指,当web应用的关系比较复杂,数据库中的表很多的时候,如果频繁进行数据库查询,很容易导致数据库不堪重荷。为了提供查询的性能,将查询后的数据放到内存中进行缓存,下次查询时,直接从内存缓存直接返回,提供响应效率。

5.应用层缓存
  应用层缓存是指我们在代码层面上做的缓存。通过代码逻辑,把曾经请求过的数据或资源等,缓存起来,再次需要数据时通过逻辑上的处理选择可用的缓存的数据。

浏览器缓存

浏览器缓存就是把一个已经请求过的 web 资源拷贝一份存储在浏览器中,当下次请求相同的资源时,浏览器会根据缓存机制决定直接使用副本响应访问请求还是再次向服务器发送请求。

优点

1.减少了冗余的数据传输
2.减少了服务器的负担,大大提升了网站的性能
3.加快了客户端加载网页的速度

缓存位置

Memory Cache

Disk Cache

from memory cache与from disk cache

强缓存和协商缓存

两者的主要区别是使用本地缓存的时候,是否需要向服务器验证本地缓存是否依旧有效。

强缓存

浏览器在加载资源时,会先根据本地缓存资源的 header 中的信息判断是否命中强缓存,如果命中则直接使用缓存中的资源不会再向服务器发送请求。

协商缓存

当强缓存没有命中的时候,浏览器会发送一个请求到服务器,服务器根据 header 中的部分信息来判断是否命中缓存。如果命中,则返回 304 ,告诉浏览器资源未更新,可使用本地的缓存。
前端缓存最佳实践
一文读懂前端缓存
从前端角度理解缓存

禁用浏览器缓存

在 Network 中有个 Disable cache ,钩上就可以了,钩上后浏览器会忽略掉文档过期验证和服务器再验证的过程,直接向服务器请求最新的资源。

用户行为影响

地址栏访问,链接跳转是正常用户行为,将会触发浏览器缓存机制;

F5刷新,浏览器会设置max-age=0,跳过强缓存判断,会进行协商缓存判断;

ctrl+F5刷新,跳过强缓存和协商缓存,直接从服务器拉取资源。

题外话:
大公司的静态资源优化方案:

配置超长时间的本地缓存 —— 节省带宽,提高性能

采用内容摘要作为缓存更新依据 —— 精确的缓存控制

静态资源CDN部署 —— 优化网络请求

更资源发布路径实现非覆盖式发布 —— 平滑升级

作者:张云龙
链接:https://www.zhihu.com/questio...
感觉讲的非常棒!!!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/62082.html

相关文章

  • Web缓存相关知识整理

    摘要:缓存缓存,也叫网关缓存反向代理缓存。浏览器先向网关发起请求,网关服务器后面对应着一台或多台负载均衡源服务器,会根据它们的负载请求,动态将请求转发到合适的源服务器上。虽然这种架构负载均衡源服务器之间的缓存没法共享,但却拥有更好的处扩展性。 一、前言  工作上遇到一个这样的需求,一个H5页面在APP端,如果勾选已读状态,则下次打开该链接,会跳过此页面。用到了HTML5 的本地存储 API ...

    rickchen 评论0 收藏0
  • H5 缓存机制浅析 - 移动端 Web 加载性能优化

    摘要:根据标准,到目前为止,一共有种缓存机制,有些是之前已有,有些是才新加入的。首次请求缓存有效期内请求缓存过期后请求一般浏览器会将缓存记录及缓存文件存在本地文件夹中。 腾讯 Bugly 特约作者:贺辉超 1. H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性。离线存储(也可称为缓存机制)是其中一个非常重要的特性。H5 引入的离线存储,这意味着 web ...

    alin 评论0 收藏0
  • 览器缓存是什么?它机制又是什么?

    摘要:对于浏览器缓存,相信很多开发者对它真的是又爱又恨。那么浏览器缓存究竟是个什么样的神奇玩意呢什么是浏览器缓存简单来说,浏览器缓存就是把一个已经请求过的资源如页面,图片,,数据等拷贝一份副本储存在浏览器中。 对于浏览器缓存,相信很多开发者对它真的是又爱又恨。一方面极大地提升了用户体验,而另一方面有时会因为读取了缓存而展示了错误的东西,而在开发过程中千方百计地想把缓存禁掉。那么浏览器缓存究竟...

    jsummer 评论0 收藏0
  • 览器缓存是什么?它机制又是什么?

    摘要:对于浏览器缓存,相信很多开发者对它真的是又爱又恨。那么浏览器缓存究竟是个什么样的神奇玩意呢什么是浏览器缓存简单来说,浏览器缓存就是把一个已经请求过的资源如页面,图片,,数据等拷贝一份副本储存在浏览器中。 对于浏览器缓存,相信很多开发者对它真的是又爱又恨。一方面极大地提升了用户体验,而另一方面有时会因为读取了缓存而展示了错误的东西,而在开发过程中千方百计地想把缓存禁掉。那么浏览器缓存究竟...

    godruoyi 评论0 收藏0

发表评论

0条评论

LeanCloud

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<