深入浏览器缓存机制

深入浏览器缓存机制文章封面

话不多说直接步入正题...全程手打加載中...



DNS缓存

什么是DNS:
    全称 Domain Name System(域名系统),万维网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,DNS协议运行在UDP协议之上,端口号为53。

DNS解析:
    通过域名最终得到该域名对应的IP地址的过程叫做域名解析(主机解析)
    slmblog.com (域名) -> DNS解析 -> 111.222.33.255 (IP地址)
DNS缓存:
    存在DNS的地方都会被做一定程度的缓存,如:浏览器、操作系统、根域名服务器、Local DNS

DNS

    DNS查询过程:

  1. 搜索浏览器吱声是否存在DNS缓存,存在则域名解析完成
  2. 尝试读取操作系统的Hosts文件是否存在映射关系, 存在则域名解析完成
  3. 查找本地的DNS服务器(IPS服务器/ 手动设置的DNS服务器) , 存在则域名解析完成
  4. 最后还是没解析完成,则会向根服务器发起请求递归查询


CDN缓存

什么是CDN:

    CDN全称 Content Delivery Network (内容分送网络),DNS的缓存服务器承包商。帮助用户得到"离"最近的CDN节点用最短的时间去解析,这样分送式的解析就可以减轻DNS的负担起到一定的分流作用,同时又到达最短最快的解析。(一头雾水这里不是很好表达加載中...)。


CDN缓存:

    在浏览器本地缓存失效或清除后,浏览器会向CDN发起请求,CDN会根据一套缓存机制,缓存策略因服务商的不同而不同,但一般会遵守HTTP标准协议,HTTP响应头中Cache-control: max-age; 来设置缓存时间。

    得到缓存时间后判断是否过期,若缓存没有过期则返回缓存给客户端,否则,CDN会向服务器发出回源请求,从服务器拉取最新的数据更新并缓存到本地,并返回给客户端。


CDN优势:
  1. CDN节点解决了跨运营商和跨地域范文的问题,访问延迟大大降低。
  2. 大部分请求在CDN边缘节点完成,CDN起到了分流的作用,减轻了源服务器(DNS)的负载


浏览器缓存-HTTP缓存


上来就是一张流程图加載中...

什么是浏览器缓存:

    浏览器缓存就是浏览器得到CDN的数据后,根据请求响应头写入硬盘/内存(后面会介绍),下次要用时先判断本地是否有缓存,有则判断过期实践后判断后是否调用,没有则去CDN边缘节点请求缓存是否存在,CDN进行缓存机制判断后返回数据给浏览器,浏览器再从本段开头开始执行....


浏览器缓存在哪?

    缓存位置为 内存 (memory cache) / 硬盘 (disk cache) 

    三级缓存原理(访问优先级):

  1. 优先在内存中查找,如果有则直接加载 (众所周知内存最快)
  2. 内存中不存在则在硬盘中查找,如果有则直接加载
  3. 如果硬盘中没有则进行网络请求(CDN)


什么资源该存在内存中?什么资源该存在硬盘中?
名称相同点不同点
存储资源
内存缓存
只能存储派生类的资源
退出进程后数据会被清除[关闭窗口]js、字体、图片会存在内存中
硬盘缓存
只能存储派生类的资源
退出进程后数据不会被清除
非脚本会存在硬盘中,如CSS

    因为CSS文件加载过一次后就会渲染出来,不会频繁的去读取它,所以不适合写在内存中,但是js脚本随时可能执行,如果写在硬盘中在执行时候频繁的去读取IO开销就增大了,有可能会导致浏览器失去响应。

派生类 :HTML中内嵌的图片或脚本连接 

实战截图

内存缓存 (在加载完网页后,再次刷新,status code后方就会显示 from memory cache即内存缓存)

 


硬盘缓存 (在加载完网页后,关闭窗口再次打开,status code后方就会显示 from disk cache即硬盘缓存)

 


无缓存 (未打开过网站第一次打开或缓存过期,status code后方就啥也没有 即未调用缓存)

 


本次深入就到这了加載中...如果还有问题欢迎评论区讨论,,,纯属手打,本篇文章写了两小时零三分。

    留言 (0)
    音乐封面 点击展开工具栏