将 JavaScript 嵌入 HTML 或保存在外部有哪些优点和缺点？

What are some advantages and disadvantages for embedding JavaScript in HTML or saving it externally?

我正在寻找简单的要点答案。我试过到处寻找，谷歌搜索，这里的其他问题，但我永远找不到每种方法的优点和缺点。

使用外部 javascript 文件的最大优势可能是浏览器缓存 - 这可以显着提高性能。

假设您有一个使用 MyJsFile.js 的网站（一个随机的 50kb javascript 文件，可以为您的网站添加功能）。 您可以：

  1. 将它嵌入到每个页面中，并在每个页面请求中添加 50kb（不理想）
  2. link 它在每一页 (<script src="MyJsFile.js"></script>)

第二个选项通常是首选，因为大多数现代浏览器只会获取文件一次，并从浏览器缓存中提供它，而不是在每次请求时都下载它。

查看类似问题：

这是我从 W3Schools 那里得到的关于外部 javascript 文件的答案

优点

  • 它允许关注点分离 - 这在简单页面中不是什么大问题，但随着脚本变大，您可以拥有一个整体html 页。大文件通常不利于可维护性

  • 它允许缓存 - 当浏览器从外部加载脚本（无论是来自您的站点还是 cdn）时，它会缓存文件以备将来使用。这就是为什么 cdn 是常用脚本的首选。使浏览器使用缓存的脚本而不是每次加载页面时都构建一个新的脚本，这使得页面加载速度更快

  • 更具可读性的代码 - 这与第一个要点有关，但它仍然很重要。我们人类使用的文件越小越好。更容易发现错误，也更容易将火炬传递给下一个从事该项目或从中学习的开发人员。

缺点

  • 浏览器必须发出 http 请求才能获取代码

可能还有其他特定于浏览器的原因，但我认为主要原因是代码分离到不同的组件中。