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

    正常script加载

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

    正常script加载

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

    含有defer属性

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

    含有defer属性

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

    含有async属性

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

    含有async属性

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

    defer,async属性混合

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

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

    defer,async属性混合

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

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

    defer和async相同点

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

    2.对于inline的script没有效果

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

    4.两个都有onload回调

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

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

    回到顶部
    我要评论

    所有评论

      相关文章