script标签加载顺序

    今天中了window.onload的陷阱, 以前一直认为通过async和defer来控制的script标签不会对onload和DOMContentLoaded有影响, 今天才发现原来不是这么一回事, 最后知道真相的我眼泪掉下来!

    首先正常情况下的script标签,不管是src还是里面写着代码, 如果什么都不加的话会阻塞浏览器渲染, 这点是完全没有异议的. 然后再说加了属性的script标签, ie9以下包括ie9可以使用defer属性来控制文件加载, 使加载异步进行, 这样一来script不会阻塞浏览器渲染, 对于IE9来说, 已经实现了DOMContentLoaded事件, 使用defer的script标签会在DOMContentLoaded之前运行更会在onload之前运行, 也就是说defer的script标签会影响到onload事件, 根据实验, 在script中的代码 包括ajax也影响onload, 是否影响DOMContentLoaded暂时不太清楚, 还有一点要说的是加了defer属性的script代码是在页面运行渲染结束之后运行的.

    然后说说async, 除了IE外其他浏览器都支持async属性的script标签IE10以上不明, async和defer一样会把script标签设置成异步的, 那么他们两个的差别是什么? 在chrome和firefox中使用了async的script标签是没有顺序可言的, 哪个先载入哪个先执行, 还有一个IE中是在DOMContentLoaded之前运行而async是在之后运行的. 

    还有一个问题就是如果使用appendChild方式来载入script标签的都是async的,对于IE来说目测也不会影页面的渲染, 也就是影响DOMContentLoaded, 但会影响onload, 对于IE来说, 这就是不一定的事情了, 试了很多次 似乎appendChild上去的script都是在onload之后才触发的, 在IE9下经过尝试之后和白天的结果来看最后猜想是appendChild的方式加载的script对onload并没有影响