纯JS外部脚本函数调用疑问：无需就绪事件能否跨浏览器执行？

先给你拆解两种可能的场景，逐个说清楚：

场景1：外部JS文件内部定义函数后直接调用 #

如果你的外部脚本文件（比如my-script.js）内容是这样的：

function myfunction() {
  // 你的业务逻辑代码
}
// 直接在文件内调用函数
myfunction();

然后通过async属性引入到页面：

<body>
  <script type="text/javascript" async src="my-script.js"></script>
</body>

这种情况在所有浏览器里都能正常执行：

• 对于支持async属性的现代浏览器（IE10+、Chrome、Firefox、Safari等）：脚本会异步下载，下载完成后立刻执行，而函数定义在调用之前，所以执行不会有任何问题。
• 对于不支持async的旧浏览器（IE9及更早版本）：浏览器会直接忽略async属性，把这个脚本当成普通的同步脚本处理——也就是会暂时阻塞HTML解析，等脚本加载完成后执行，同样因为函数定义在前、调用在后，也能正常运行。

场景2：外部async脚本只定义函数，页面内另一个脚本调用 #

如果你的代码结构是这样的：

<body>
  <script type="text/javascript" async src="my-script.js"></script> <!-- 这个文件里只定义myfunction -->
  <script>
    // 页面里的另一个脚本直接调用函数
    myfunction();
  </script>
</body>

这种情况绝对没法保证在所有浏览器正常执行：

• async脚本是异步加载的，它的执行时机完全取决于下载速度，大概率页面里的第二个同步脚本会先跑起来，这时候myfunction还没被定义，直接就会抛出ReferenceError错误。
• 哪怕是现代浏览器，这种写法也充满随机性，完全不可靠；旧浏览器因为把async脚本当成同步的，反而可能碰巧正常执行，但这只是巧合，绝对不能依赖这种行为。

总结一下：如果是在外部脚本文件内部定义函数后直接调用，加async属性完全没问题；但如果是跨脚本调用，async会让脚本执行顺序不可控，这种写法一定要避免。

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