async & defer
浏览器在执行HTML的时候如果遇到会继续渲染页面。故浏览器在执行js文件的时候,浏览器表现为一片空白,为了解决这个问题ECMAScript定义了defer和async两个属性用于控制JS的下载和执行。
1.defer详解
红宝书上的解释
这个属性的用途是表明脚本在执行时不会影响页面的构造,也就是说,脚本会被延迟到整个页面都解析完毕后再运行。因此在
HTML5规范要求脚本按照他们出现的先后顺序执行,因此第一个延迟脚本会先于第二个延迟脚本执行,而这两个脚本会先于DOMContentLoaded事件执行,也不一定会在DOMContentLoaded事件触发前执行,因此最好只包含一个延迟脚本。
MDN上的解释
defer,这个布尔属性被设定用来通知浏览器该脚本将在文档完成后解析,触发DOMContentLoaded事件前执行,如果缺少src属性,就不会本使用,因此这种情况下它不起作用
2.async详解
红宝书的解释
这个属性与defer类型,都用于改变处理脚本行为,async只适用于外部脚本,并告诉浏览器立即下载文件。但与defer不同的是,标记async的脚本并不保证按照他们的先后顺序执行。(也就是说第二个脚本文件可能会在第一个脚本文件之前执行,所以两者之间互不依赖非常重要)
MDN解释
async,该布尔属性只是浏览器是否在允许的情况下异步执行该脚本,该属性对于内联脚本无作用。
3.区别
相同点
* 加载文件时不阻赛页面渲;
* 对于inline的script无效,当script标签中间有代码时,连个属性都不会起作用;
* 使用这两个属性的脚本中不能调用document.write方法;
* 有脚本的onload的事件回调
不同点
* html4.0定义了defer,html5.0定义了async,所以浏览器支持不同
* 每一个async属性的脚本都在它下载结束之后立刻执行,同时会在window的load事件之前执行,所以就有可能出现脚本顺序被打乱的情况;而每一个defer属性的脚本都是在页面解析完毕之后,按照原来的顺序执行,同时会在document的DOMContentloaded之前执行;
* 当一个script标签内同时含有defer和async属性时,只会触发async,不会触发defer,除非浏览器不兼容