什么时候在html和外部.js中包含javascript比较合适？

在html中有标记似乎并不少见，但将所有js都放在一个外部文件中，然后在html中引用，不是更整洁吗？

---

它在应用上有区别吗？有很多行链接到很多js文件会更混乱吗

根据我的小经验，人们习惯于将HTML和JS分开。最近有一项将它们结合在一起的举措。我认为它们之所以分开是因为关注点的分离，但HTML和JS并不是真正不同的“关注点”；HTML是名词，JS是动词。这一举措至少在一定程度上得到了政府的推动

---

因此，为了回答您的问题，什么时候合适，这将是非常固执己见的，但我可以看到一个HTML和JS总是结合在一起的世界，只要文件大小小且易于管理，生活可能会很好。

这取决于含义，您希望优化速度。例如，如果您有一些页面需要轻量级javascript，那么使用一些

…

标记要比使用外部文件快得多

---

另一方面，如果你有许多复杂的算法/过程需要在许多页面上完成，那么从外部文件获取信息将更容易提高页面的性能和加载速度，而不是让页面加载你需要的数百行代码。

这实际上取决于你的应用程序的大小

• 几行代码？把它放在脚本标签之间
• 小项目？引用外部文件是可以的
• 更大/生产水平？您需要一个模块绑定器-查找网页包

---

两者都有效，下面是一些外部文件的优点和缺点

优点：

您可以划分代码。当您可能有一个主JavaScript文件，然后有一些小的JavaScript来执行不同的不相关的事情时，这尤其有用

它使版本控制更容易

通过将代码放在单独的文件中，更容易找到特定位的确切位置

缺点：

外部文件意味着更多的文件请求，降低了速度

对于少量代码，可能不需要整个文件

通过内联脚本，更容易精确控制脚本的执行时间

需要注意的是，对于需要在页面末尾执行的脚本（如在末尾

标记之前放置

），您可以使用以下方法：

<script src="myscript.js" defer></script>

---

就我个人而言，我通常更喜欢将代码放在单独的文件中，因为我发现这样更容易管理，但请参考上面的利弊来做出决定。

内联JavaScript

• 赞成：不需要额外的HTTP请求，因此初始加载可能更快
• 缺点：无法独立于HTML缓存JavaScript，因此在连续访问时可能不需要下载代码
• Con：（与前一点相关）所有JavaScript代码可能每次都必须下载，因为HTML文件通常不会缓存（但这可能取决于您的服务器设置）
• 缺点：无法跨HTML页面共享代码

外部JavaScript文件

• Pro：可以独立于其他资源缓存JavaScript文件
• Pro：可以跨多个HTML页面共享JavaScript代码
• 缺点：外部JavaScript文件越多，HTTP请求越多，加载页面所需的时间就越长（至少在第一次加载时）。这可以通过将JavaScript文件捆绑在一起来缓解。例如，将不经常更改以进行长期缓存的文件绑定到单个文件中，并将所有文件绑定到另一个文件中

---

除了前面提到的所有内容之外，还有两种情况下我使用内联

标记。我只在找不到替代方案或替代方案很麻烦时才这样做

一种情况是，我需要根据php代码的评估设置

javascript

变量。例如，当数据发生更改时，页面刷新-我设置了

Javascript

“dirty”标志，以便在用户试图退出页面而不保存时发出警告：

if ($dataHasChanged){
    echo "<script>dirtyFlag.value = true;</script>";
}

---

如果您将代码与webpack之类的东西捆绑在一起，那么您只需要一个

bundle.js

，也许还需要CDN的几个库。一点也不混乱。我同意@JakeWeary将您的外部文件捆绑到ftw。这可能也适用于你的样式表。这一定是重复的，但我找不到以前的样式表。“它会快得多”这里的“它”是什么？显然，“它”与页面的速度有关<代码>它不是火箭科学。我不太清楚。你也可以参考开发时间（将所有内容转储到一个文件中比创建多个文件并链接它们要快）。人们习惯于将HTML（标记）、样式和javascript都放在一个文件中，分散在整个文件中，然后复制粘贴到页面上。做一个改变或修复一个bug完全是一场噩梦，因为你必须在那些重复的地方寻找。然后他们学会了。分离关注点，构建可重复使用的部分；更改发生在一个地方，并且由于代码和样式是共享的，所以在任何地方都是固定的。现在人们（又一次）忘记了这一点，又回到把所有的东西都扔在同一个罐子里，又把自己复制粘贴死。

    $result = updateDb($data);
    if ($result === false) {
        echo "<script> document.write( parent.document.getElementById('status').innerHTML = 'Error')</script>";
    }