动态注入的<script>标签是否具备async特性？两种加载方式疑问

方法1：动态注入脚本 #

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

方法2：带async属性的脚本标签 #

<script async src="https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js" />

核心问题解答 #

方法1里通过JS动态创建并插入的脚本，默认就是异步加载模式，完全不会阻塞其他脚本的加载和执行，和方法2的async脚本行为一致。

原因很明确：浏览器对通过document.createElement('script')生成的脚本元素，默认就会启用异步加载逻辑——设置src后，脚本会立刻发起请求，但这个请求不会抢占页面其他资源的加载优先级，也不会卡住后续脚本的执行流程（除非手动给脚本设置async=false或者defer，但这段代码里并没有这么做）。

两者唯一的差异只是脚本的启动时机：方法1是在这个自执行函数运行时才插入并开始加载脚本，而方法2是HTML解析到对应标签时就启动加载，但加载过程本身都是异步无阻塞的。

内容的提问来源于stack exchange，提问作者Joseph