浅谈浏览器的资源和缓存加载机制

1.资源

不管是静态资源还是动态资源，在网页中我们大体分但是不限于这几类。

HTML

JavaScript

CSS、SCSS

图片

SVG

视频、音频和字幕

字体文件

类型	内部表示类
HTML	CachedRawResource
JavaScript	CachedScript
CSS、SCSS	CachedCSSStyleSheet
图片	CachedImage
SVG	CachedSVGDocument
视频、音频和字幕	CachedTextTrack
字体文件	CachedFont

2.缓存

浏览器在访问页面时会建立一个资源的缓存池（内存缓存），当需要请求资源时，会先从资源池中按照URL作为key去查找是否存在响应的资源。如果存在，则直接使用缓存池中的资源。如果不存在，则发送真正的请求加载资源，收到响应的资源后，webkit 会将其设置到上面提的到资源类中去。

3.资源加载器

原文https://www.cnblogs.com/inJS/p/9709499.html
webkit的三种资源加载器
针对每种资源类型的特定加载器，ImageLoader等
资源缓存机制的资源加载器，插入和查找缓存资源，CachedResourceLoader
通用资源加载器，当浏览器需要从文件系统或网络加载资源时，会使用该类加载器，但它只负责获取资源的数据，正因为如此，它也被所有的特定资源加载器所共享。其内部表示为：ResourceLoader

我们调试一个页面，

第一次

访问的时候资源状态码为200，

image.png

缓存中没有资源，从服务器端请求到资源成功。

第二次

访问的时候资源状态码为304，

image.png

缓存中储存在资源，服务器端表示文件资源没有变化，这里用的是缓存的资源。

我们试试百度的首页
我们从服务器端请求到了这个js文件，请求成功200，

image.png

然后不关闭页面，直接刷新访问

image.png

关闭页面Tab，新开页面重新刷新

image.png

我们发现，在同一个页面刷新重新请求资源会调用高速的内存缓存，新开页面的再请求则会变成磁盘请求（如果不清理缓存的话），这也是chrome浏览器的两种缓存：磁盘缓存和高速的内存缓存