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>

我的实现

更具体地说，我正在实施 Adobe 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>

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

Mladen Ilić 回答了我的问题。

Scripts without async or defer attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page.

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

感谢您的回复！

Answer 1

<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> 将是 non-bloquant

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

Answer 2

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

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

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

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

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

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

Javascript - inline vs include - Is there a difference in loading or running?

adobe

analytics

inline

include