[译]WebKit中的CSS预加载扫描器

原文:http://ariya.ofilabs.com/2013/04/css-preload-scanner-in-webkit.html

在WebKit中,预加载扫描器指的是一个副解析器,当HTML主解析器被一个同步的script标签阻塞时,预加载扫描器就会启动.然后,它会马上找出接下来即将需要获取的资源(比如样式表,脚本,图片等资源)的URL,然后尽可能早的发起网络请求,而不用等到主解析器恢复运行,从而提高了整体的加载时间.那么,除了HTML文件中的依赖资源,还有样式表中的呢?幸运的是,WebKit已经有了一个叫CSS预加载扫描器的东西了.

在WebKit实现符合HTML5标准的解析器的时候,预加载扫描器被分成了两部分.其中大部分代码分出来成为了HTML预加载扫描器,剩下的一小部分成为了独立的CSS预加载扫描器.CSS预加载扫描器的任务是扫描并尽早加载样式表(且只能是style标签中内联的样式表)中的外部资源.目前,它只能扫描到@import规则中用到的外部资源.

让我们看看下面这个示例,在这个代码片段中(只为演示使用,代码并不符合最佳实践),有一个script标签和一个style标签:

<p>The quick brown fox jumps over the lazy dog.</p>
<script>
    setTimeout(function () {
        document.title = document.title
    }, 1000);
</script>
<p>The quick brown fox jumps over the lazy dog.</p>
<style>
    @import url("another-style.css");
    body {
        background-color: white
    }
</style>

当执行到那个同步的script标签时,WebKit解析器会就会启动CSS预加载扫描器.预加载扫描器会快速的找到@import后面的URL,然后下载这个another-style.css文件.

CSS预加载扫描器是非常简单的,因为它不需要解析所有的CSS语法,其中还有一个专门的代码优化,就是如果发现没有@import,扫描器会尽快跳出这个样式表,这样就能在CSS文件很大的时候节约对CPU的消耗.

很多人不推荐使用@import(比如Steve Souder的不要使用@import一文).随着现在以及未来对浏览器引擎的不断改进,这条最佳实践应该时不时的被重新考量了.当然,我并不推荐在你的网站上到处乱用@import.使用一些调试工具来分析页面的网络性能,然后你就能得出一个明智的决定.

注: 特别感谢Google的Ilya Grigorik帮我审查这篇文章.