在浏览器内核WebKit中并行加载外部脚本

WebKit作为Safari, Chrome等浏览器内核真收到越来越多人的关注，就连国内的浏览器厂商也开始将WebKit内核添加的自己的浏览器中，并且可以和IE浏览器内核共存随意切换。为此，WebKit内核可以说这几年经历了快速的发展。 现在WebKit正在向HTML5标准迈进，在WebKit 正式版中已经正式支持HTML5中 在下载脚本时，浏览器会被阻塞，不做其它任何事情（比如解析HTML，执行其它脚本以及渲染网页布局等）。尽管通过WebKit的预加载扫描器能够利用网页显示的空闲时间预先下载资源，在一定程度上改善了浏览器的阻塞状况，但是网络延迟依然会导致网页加载缓慢。 虽然围绕性能优化的问题已经有了很多不错的技术（参见：延迟加载，异步加载），但是他们都无法避免地引入了额外的代码，或是针对浏览器的Hacks写法。作为更好的办法，现在我们可以把不需要以同步方式执行的脚本标记为 async 或者 defer。以下是具体的做法： 标记为 async 或者 defer 的脚本都会立刻开始下载，不阻塞浏览器的其它解析工作，而且它们都支持可选的 onload 事件，这样就能在脚本加载完成时开始执行依赖于该脚本的代码。async 和 defer 之间的不同之处在于执行的时机。async 脚本会在自身被下载完、window.load 事件执行前立刻被执行，这意味着 async 脚本有可能（应该说很可能）不会按照它们在页面中出现的顺序被执行；而 defer 脚本则一定是按照它们在页面中出现的先后顺序执行，准确地说，是在整个页面被解析完成之后，文档的DOMContentLoaded事件之前执行。 这里有个例子，在这个例子中一个外部脚本下载需要1秒钟，紧跟在这个外部脚本后面是一段执行需要1秒钟的内嵌脚本。我们可以看到这个页面加载花费了2秒钟时间。 还是同一个例子，只是是其中的外部脚本被标记为 defer。由于签入的脚本可以在外部脚本被下载的同时执行，因此我们看到这个页面加载的速度大约比之前快两倍。 除了WebKit核心的浏览器以外，Firefox早就支持 defer 和 onload 属性，async 属性从 3.6 版本开始支持。 IE浏览器也很早就支持 defer 属性，IE9 增加了对 onload 属性的支持，但是 async 属性依然还不支持。 作者：Tony Gentilcore 翻译：小李刀刀

标签:浏览器内核Webkit浏览器相关