script加载js的时候,有defer和async属性,现在来一起研究他们的作用和区别吧。

正常script加载

正常script加载是指没有defer和async的加载,这种在加载和执行的时候都会阻断页面的解析。

可以正常使用document.write在文档中写入。

含有defer属性

含有defer属性的,加载时不会阻断页面解析,运行时是在页面解析完成,DOMContentLoaded触发之前。

document.write写入失败,原理后面会说。同时这种方式会按照原来的顺序执行js。

含有async属性

含有async属性的,加载时不会阻断页面解析,运行是异步运行,一般在页面解析完成,window.onload触发之前。

document.write写入失败,原理后面会说。同时这种方式不一定按照原来的顺序执行js。

defer,async属性混合

如果含有defer和async属性的js混合执行的话,defer会守规矩的在DOMContentLoaded触发之前运行,但是async则可能在DOMContentLoaded触发之前或者之后执行,顺序也不确定,但是都会在window.onload之前执行。

如果一个js同时有关defer和async属性,那么会表现的如async属性一样。

图示正常,defer,async的加载,运行大致如下:

注意上面的async加载完后是异步运行,不会马上运行。

defer和async相同点

1.加载时都不会阻塞页面解析

2.对于inline的script没有效果

3.两个都不能执行document.write属性

4.两个都有onload回调

注意第3点,因为async和defer执行的时候,页面已经解析完成,文档流已经关闭,不能在用document.write写入内容了。如果我们用了,可能会看到如下报错:

defer属性比async属性出现的更早,兼容性更好。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字