Javascript - 内联与包含 - 加载或运行有区别吗？

Question

一般问题

我一直在研究在呈现页面时如何加载 javascript。特别是，我发现这非常有帮助：

Where should I put <script> tags in HTML markup?

但是，我似乎找不到任何有关内联 javascript 与 javascript 包含之间差异的信息。

假设 helloWorld.js 使用相同的代码，它们的加载或运行方式有什么不同吗？

<script language="JavaScript" type="text/javascript" src="helloWorld.js"></script>

<script language="JavaScript" type="text/javascript">alert("hello world");</script>

---

我的实现

更具体地说，我正在实施 Adob​​e Analytics。实施指南建议将代码放在页面上如下：

<script language="JavaScript" type="text/javascript">
    var s_code=s.t();if(s_code)document.write(s_code)
</script>

将其作为包含而不是内联会产生任何影响吗？

<script language="JavaScript" type="text/javascript" src="sCall.js"></script>

---

编辑：我相信我的问题最终有所不同，因为“类似问题”线程中没有人提到阻塞。

Mladen Ilić 回答了我的问题。

没有异步或延迟属性的脚本，以及内联脚本， 在浏览器继续执行之前立即获取并执行 解析页面。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

感谢您的回复！

Answer 1

无论您如何包含它，在这两种情况下，代码都将被以相同的方式处理并具有相同的效果。

唯一的影响是维护和性能方面。

虽然很明显维护单独文件中的 JS 代码更容易，但在性能方面，有两点需要考虑：

1. 如果您有单独的文件，浏览器将能够缓存它。
2. 如果您将它与 html 放在同一个文件中，由于 TCP 启动慢，下载会稍微快一些。

我个人的偏好是始终将 JS 分开保存。

Answer 2

<script language="JavaScript" type="text/javascript" src="sCall.js"></script> 将阻止加载页面，而 <script language="JavaScript" type="text/javascript"> var s_code=s.t();if(s_code)document.write(s_code) </script> 将是非 bloquant

但是，您也可以将async 属性设置为内联声明...这取决于您！你更喜欢在哪里看到它？