JS和CSS执行顺序

一、脚本和样式表加载、执行顺序总结

1、脚本

web的模式是同步的，开发者希望解析到一个script标签时立即解析执行脚本，并阻塞文档的解析直到脚本执行完。如果脚本是外引的，则网络必须先请求到这个资源——这个过程也是同步的，会阻塞文档的解析直到资源被请求到。这个模式保持了很多年，并且在html4及html5中都特别指定了。开发者可以将脚本标识为defer，以使其不阻塞文档解析，并在文档解析结束后执行。Html5增加了标记脚本为异步的选项，以使脚本的解析执行使用另一个线程。

2、样式表（Style sheets）

样式表采用另一种不同的模式。理论上，既然样式表不改变Dom树，也就没有必要停下文档的解析等待它们，然而，存在一个问题，脚本可能在文档的解析过程中请求样式信息，如果样式还没有加载和解析，脚本将得到错误的值，显然这将会导致很多问题，这看起来是个边缘情况，但确实很常见。Firefox在存在样式表还在加载和解析时阻塞所有的脚本，而Chrome只在当脚本试图访问某些可能被未加载的样式表所影响的特定的样式属性时才阻塞这些脚本。

3、预解析（Speculative parsing）和prefetch 优化
Webkit和Firefox都做了这个优化，当执行脚本时，另一个线程解析剩下的文档，并加载后面需要通过网络加载的资源。这种方式可以使资源并行加载从而使整体速度更快。需要注意的是，预解析并不改变Dom树，它将这个工作留给主解析过程，自己只解析外部资源的引用，比如外部脚本、样式表及图片。

因此，可能你会看到在后面的脚本先下载，在前面的脚本才执行。

（个人对预解析和prefetch优化理解：预先解析 test.js：

console.log('hi');

test.css：

.body {font-size:12px;background-color:pink;}

打印结果是：2-->1-->3-->4

六、参考链接：

1、前端性能：http://www.cnblogs.com/chuaWeb/p/PerformanceMonitoring.html。主要参考这篇文章写的

2、网站前端性能优化之javascript和css：http://www.haorooms.com/post/web_xnyh_jscss。这篇文章写得很完善，推荐阅读