平博体育下载
  咨询电话:15556257358

平博亚洲

聊聊浏览器(webkit)资源加载机制

一些准备

在开始这个话题之前,我们有必要简单回顾一下 浏览器(webkit)的网页渲染过程(如果想要详细了解这个过程,可以戳我几年前写的一篇文章。):

我们知道,浏览器在渲染过程中,如遇到节点需要依赖其他资源(比如:图片、CSS、JavaScript、video等),浏览器会通过网络去加载它们。这其中大部分的资源是异步加载的,不会阻塞渲染,除了 JavaScript(未被标记为异步的方式)。

 

网页的加载和渲染依赖网络与资源加载,网页本身是一种资源,它所依赖的 js、css、图片、视频等也是资源。而资源的加载涉及网络和资源的缓存等机制,而且它们充斥着整个渲染过程。

 

一、资源

HTML 中支持的资源主要包括以下类型:

HTML:HTML 页面,包括各种各样的 HTML 元素JavaScript:JavaScript 代码,可以内嵌在 HTML 文件中,也能以单独的文件存在CSS 样式表:CSS 样式资源,可内嵌在 HTML 文件中,也可以单独的单独文件形式存在CSS Shader图片:各种编码格式的图片资源SVG:用于绘制 SVG 的 2D 矢量图形表示视频、音频和字幕:多媒体资源和支持音视频的字幕文件(TextTrack)字体文件:CSS3 引入的自定义字体文件XSL 样式表:使用 XSLT 语言编写的 XSLT 代码文件

在 webkit 内部,会使用不同的类去表示它们,其对应关系:

资源类型内部表示类
HTMLCachedRawResource
JavaScriptCachedScript
CSS 样式表CachedCSSStyleSheet
CSS ShaderCachedShader
图片CachedImage
SVGCachedSVGDocument
字幕CachedTextTrack
字体文件CachedFont
XSL 样式表CachedXSLStyleSheet

 

 

 

 

 

 

 

以上内部表示类均继承自 CachedResource 类。 聪明的你一定发现了, 这些类名都是以 “Cached” 开头,这其实是考虑到效率问题二引入的缓存机制。所有对资源的请求都会先获取缓存中的信息,以决定是否向服务器发起资源请求。

 

二、资源缓存 

资源的缓存机制是提高资源使用效率的有效方法。在 webkit 内部,它的基本思想是建立一个资源的缓存池(内存缓存),当需要请求资源时,会先从资源池中查找是否存在响应的资源。如果存在,则直接使用缓存池中的资源。如果不存在,则发送真正的请求加载资源,收到响应的资源后,webkit 会将其设置到上面提的到资源类中去。

 

这些资源,在 webkit 内部是以 URL 作为 key 去查找的。因为 URL 是标记资源的唯一性的特征。

 

三、资源加载器

webkit 总共有 3 种资源加载器:

针对每种资源类型的特定加载器,该类资源加载器只加载某一种资源。其内部表示有:ImageLoader、FontLoader 等资源缓存机制的资源加载器,特定资源加载器都共享它来插入和查找缓存资源。其内部表示为:CachedResourceLoader通用资源加载器,当浏览器需要从文件系统或网络加载资源时,会使用该类加载器,但它只负责获取资源的数据,正因为如此,它也被所有的特定资源加载器所共享。其内部表示为:ResourceLoader

以 ImageLoader 这个特定资源加载器为例,大致可用下图描述:

结合 chrome 浏览器调试工具,以访问百度首页为例,来观察百度 logo 的请求情况。为防止之前的缓存,采用 “清除缓存并硬性重新加载” 方式访问。表现如下:

再正常不过的 200, 没有 from * cache 标识意味着来源于网络。新开 tab, 再次访问百度首页:

发现在 size 列(倒数第二列)多了 “(from disk cache)” 字样。在此基础上(不关闭 tab),正常刷新该页面: 

聪明的你一定发现 了原来 size 列的 “from disk cache” 变为了 “from memory cache”。顾名思义,两张图片的加载方式由从 磁盘缓存读取 变为了 从内存缓存读取。摘一段官网上的文档(文档地址):

简单翻译:Chrome 使用两种缓存:磁盘缓存和高速的内存缓存。内存缓存(memory cache)依附于渲染进程,我们可以大致认为一个渲染进程就等于一个 tab。

因此,“from memory cache” 只有在正常刷新的情况下,才会命中。这也解释了前面示例中新打开的 tab 访问百度首页,得到的是 “from disk cache”。

 

四、过程

经过前面的介绍,我们建立起了对 资源、资源缓存、资源加载器 的认知。接下来详细聊聊资源的加载过程。还是以图片加载为例:

 

 

我们都知道,在网页加载时,如遇到 script 标签(未声明异步),会阻塞渲染。在这种情况下,webkit 会启动另外一个去遍历后面的 HTML 网页,收集需要的资源的 URL,然后发送请求,以此来避免阻塞。

回到资源缓存的话题,前面提到,在 webkit 内部是存在一个 “缓存池” 。为了保证在有限空间的缓存池内能够持续的插入新的缓存,它使用 LRU 算法来管理缓存。