浏览器script标签加载顺序

  • script标签(不带defer或async属性)的会阻止文档渲染。相关脚本会立即下载并执行。
  • document.currentScript可以获得当前正在运行的脚本(Chrome 29+, FF4+)
  • 脚本顺序在默认情况下和script标签出现的顺序一致

async属性

由脚本插入的script标签默认是async的。对內联脚本设置async属性是没有意义的,也不产生其他效果。其包含的脚本总是立即执行的。

defer属性

带有defer属性的脚本,同样会推迟脚本的执行,并且不会阻止文档解析。
defer属性是会确保脚本在文档解析完毕后执行的——即使这个脚本在文档解析过程中就已经下载完毕变成可执行的状态,浏览器也会推迟这个脚本的执行,直到文档解析完毕,并在DOMContentLoaded之前。

带有defer的脚本彼此之间,能保证其执行顺序。

  • 仅有async属性,脚本会异步执行
  • 仅有defer属性,脚本会在文档解析完毕后执行
  • 两个属性都没有,脚本会被同步下载并执行,期间会阻塞文档解析
  • 被延迟的脚本进行document.write写入时, 由于document已经关闭, 所以 document.write 没有效果

参考: Script标签和脚本执行顺序 – 文档加载 – 面向浏览器编程

    原文作者:KeKeMars
    原文地址: https://www.jianshu.com/p/4e7c8a39e3e5
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞