同步和异步JavaScript脚本加载之间的性能差异是什么？

Question

我的问题很简单：同步和异步JavaScript脚本加载之间的性能差异是什么？

从我收集的内容中，同步代码会阻止加载页面和/或其余代码执行。这发生在两个级别。

首先，在实际加载的脚本级别，其次，在JavaScript代码本身内。

例如，在页面上：

同步：<script src="demo_async.js" type="text/javascript"></script>

异步：<script async src="demo_async.js" type="text/javascript"></script>

修改：删除了无效的代码示例

那么使用这些不同的加载方法和JavaScript模式的性能差异究竟是什么呢？

Answer 1

对于您的第一个问题/代码段，它更多地是关于 control-flow 而不是性能。表现只是隐含的结果。

传统上，

<script>标记阻止 HTML呈现器如果遇到它们。这意味着，如果您在标记的最顶部加载带有阻塞<script>标记的巨大 javascript文件，则只要脚本为用户，用户就不会在页面上看到任何进展加载和评估。

相反，如果我们使用 async 和/或 defer 等属性标记<script>标记，浏览器将不再停止 HTML渲染进程，但加载并评估脚本块异步。一个实现如何做到这一点，不是你的担心（它是否使用真正的线程或只是顺序处理它）。

---

您的第二个代码段实际上不是 asyncronous 代码。它只是调用自己的函数表达式。这仍然被认为是同步执行。

Answer 2

当您以异步方式加载内容时，浏览器同时可以加载页面的其他部分。

除此之外，如果您只是比较自己的脚本负载，两种方法的性能相同。