async和defer自身理解

asyncdefer这两个的作用与异同之处。

  • 引用语句中添加 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中新增的属性,它的作用是能够异步的加载和执行脚本,不因为加载脚本而阻塞页面的加载,一旦加载到就会立刻执行。

  • 相同点

    1. 加载js文件的时候都不阻塞页面的正常渲染
    2. 对于inline的script无效
    3. 使用这两个属性的脚本中不能调用document.write方法
    4. 有脚本的onload的事件回调
  • 不同点

    1. html的版本html4.0中定义了defer;html5.0中定义了async
    2. async属性的脚本会在下载结束后立刻执行,同时会在window的load事件之前执行,所以就会出现顺序被打乱的情况;defer属性的脚本是在页面解析完成后,按照顺序执行,同时会在document的DOMContentLoaded之前执行。

注意:无论使用defer还是async属性,都需要首先将页面中的js文件进行整理,哪些文件之间有依赖性,哪些文件可以延迟加载等等,做好js代码的合并和拆分,然后再根据页面需要使用这两个属性。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容