一 特别说明一下有关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>才会开始解析,