async和defer这两个的作用与异同之处。
-
引用语句中添加
async的状态<script async src="script.js"></script>，添加完成后，加载和渲染后续文档元素的过程将和script.js的加载与执行并行进行（异步）。 -
引用语句中添加
defer的状态<script defer src="script.js"></script>，添加完成后，载入续文档元素的过程将和script.js的加载并行进行（异步），但是script.js的执行要在所有元素解析完成之后，DOMContentLoaded事件触发之前完成。在正常情况下在浏览器读取html代码的时候如果遇到外部的script，那么接下来就会暂停解析过程去读那个script，等吧script都读完了以后才能接着去读html代码，如果一个页面中有很多个引入js放置在页面的
<head>标签中那么，就会严重影响页面的正常渲染，在简单的小页面中我们可以通过更改引入js代码的位置来解决这个问题，但是在相对复杂的环境中，或者代码量比较大的页面中时，通过不断更改引入代码位置是很麻烦的，这个时候,defer就可以大展身手啦！添加defer之后就实现了把引入代码放到页面底部的效果。async是html5中新增的属性，它的作用是能够异步的加载和执行脚本，不因为加载脚本而阻塞页面的加载，一旦加载到就会立刻执行。 -
相同点
- 加载js文件的时候都不阻塞页面的正常渲染
- 对于inline的script无效
- 使用这两个属性的脚本中不能调用document.write方法
- 有脚本的onload的事件回调
-
不同点
- html的版本html4.0中定义了defer；html5.0中定义了async
- async属性的脚本会在下载结束后立刻执行，同时会在window的load事件之前执行，所以就会出现顺序被打乱的情况；defer属性的脚本是在页面解析完成后，按照顺序执行，同时会在document的DOMContentLoaded之前执行。
注意：无论使用defer还是async属性，都需要首先将页面中的js文件进行整理，哪些文件之间有依赖性，哪些文件可以延迟加载等等，做好js代码的合并和拆分，然后再根据页面需要使用这两个属性。
网友评论