陈成的博客

优化资源文件的载入方式December 31, 2009

假如一个页面有4个CSS，1个JS，2张图片(CSS和JS在domain1，图片在domain2)。

工具准备：IE6/7，HttpWatch，不要开Fiddler。

我们通常会按以下顺序加载：css, css, css, css, js, img, img
测试页面，瀑布图如下

但是如果我们调整下顺序：css, css, css, js, css, img, img
测试页面，瀑布图如下

可以看得，载入时间由4段变成了3段(每段2秒)。

这是利用了“link方式引入css的异步载入特性”，让最后第四个CSS和图片同步载入，让第三个CSS和JS同步载入。

注意：
IE如果安装了使用Async Pluggable Procotol的插件(如debugger bar)，会导致link方式载入的CSS文件也同步下载。

参考：
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/