WebKit/Blink 如何加载网页资源？

[本文属原创，如有转载，请注明出处http://blog.csdn.net/yl02520/article/]

在浏览器渲染网页并呈现给用户之前，首先需要通过网络加载网页资源，这里把资源分成两种，一种是类似Frame的主资源文件，另外一种为类似图片，JavaScript，音频或视频的子资源文件。

从WebKit的官方博客上https://www.webkit.org/blog/1188/how-webkit-loads-a-web-page/可以得知，WebKit加载这两种资源的方式不同，在代码中采用两种不同的路径来获取资源文件。对于Frame类型的文件，WebKit通过一个DocumentLoader的类来加载。而对于图片，脚本类似的资源文件，WebKit通过一个DocLoader的类来加载，与Frame加载不同的是，DocLoader首先会从缓存中询问是否有资源的备份，如果存在，直接返回备份的资源，这大大减少了文件的下载时间，如果是图片或音视频文件，还可以减少解压时间。如果缓存中不存在文件备份，就新创建一个该文件的备份，为下次加载时使用，这将减少网页重新加载（Reload/Refresh）的时间。

后来Google的工程师对WebKit的这种加载机制做了改进，尽管Frame主资源和图片类的子资源文件有所不同，但是加载的过程实质上类似，所以WebKit/Blink就把两者合并，都采用ResourceFetcher来加载。在网页的加载过程中一般只存在一个ResourceFetcher的实例，当一个网页比较复杂时，需要的加载的资源文件可能会很多，例如网页可能是多个Frame组成的，网页中可能包含图片、JS脚本、CSS脚本、音视频文件和Worker脚本文件等，另外由于网络带宽的影响，资源加载的时间可能会很长，那么如何能快速的让主界面显示给用户来提高用户体验呢（尤其在资源受限的移动设备上）？这里WebKit/Blink对资源文件设定了优先级，把优先级分为五类，即最高优先级，高优先级，中等优先级，低优先级和最低优先级。很明显Frame作为主资源文件享有最高优先级，其他子资源中CSS资源享有高优先级，JS脚本、字体文件被设为中等优先级。