浏览器浅析（一）--文件加载和解析顺序

一    特别说明一下有关js文件的加载和解析过程

1.js加载

       js分类：

       （1）普通js，没有defer和async修饰

   （2）defer js，使用defer修饰的，在xhtml中，使用defer=‘defer’ 修饰；

    （3）async js，使用async修饰的，在xhtml中，会用 async=‘async’修饰

   （4）js片段，使用<script></script>包含的js代码，解析器解析到该代码时，会立即解析执行，并且会暂停文档的解析，直到脚本执行完毕。

     所有外部js下载不会阻塞其他文档（html/css）的下载。但一般而言下载外部js会阻塞html解析，并且下载后会等待前面的样式表文件加载完成，然后执行脚本并layout/paint，之后继续html解析;

   async的下载不会阻塞html解析，下载完成后等待样式表完成后执行脚本并且layout和paint，之后继续html解析过程；

defer js的下栽会阻塞html解析，但是defer的js会在domready之后，才开始执行;

普通js和async的唯一区别是，前者下载会阻塞html解析，但是后者不会。而普通js和deffer的区别是，后者会延迟到domready之后才执行。Async 和defer的区别是，前者下载不会阻塞html解析；两者执行的时间点不一样，前者会在下载完后，就执行，但是后者会延迟到domready之后。

Async和deffer都是用在script标签上，前者标识该脚本可以立即下载，但是等到html解析完成后才执行。但是async是html5新增的一个选项，可将脚本标识为异步，不会阻塞html的解析

    注意：Webkit 和 Firefox 都进行了预解析优化。在执行脚本时，其他线程会解析文档的其余部分，找出并加载需要通过网络加载的其他资源。通过这种方式，资源可以在并行连接上加载，从而提高总体速度。请注意，预解析器不会修改 DOM 树，而是将这项工作交由主解析器处理；预解析器只会解析外部资源（例如外部脚本、样式表和图片）的引用。并行文件下载由预加载线程支持。

2 css加载 

css加载不会阻塞其他资源（html，js）的加载，也不会阻塞html解析。css加载完成之后，进行样式计算，然后layout，paint

3.html加载

html是下载一段解析一段，遇到外部script或者css就启动线程进行下载，除了<table>只有等到</table>才会开始解析，