在部署网站时内联所有JavaScript是否有益

Question

在我们的HTML页面中，我们有一个标记列表，可以加载许多（小）JavaScript源文件。

对于部署，我们计划将各个JavaScript文件连接到一个包含在HTML页面中的包中，以节省“昂贵的”HTTP请求。

但是，将所有JavaScript直接写入HTML文件中的内联Javascript标记会更有益吗？

Answer 1

如果JavaScript代码在每个请求（“标签”？）上发生变化，那么是的，这是有益的。

否则：否，因为浏览器无法缓存JS文件。

Answer 2

文件比将整个内容写入HTML更好，因为您可以缓存来自服务器的javascript文件，但除非您缓存所有.html文件，否则您将无法获得此优势（即浏览器必须保留重新加载html文件中的所有内联脚本）

Answer 3

  

但是，将所有JavaScript直接写入HTML文件中的内联Javascript标记会更有益吗？

没有！您将增加每个请求的大小并破坏可缓存性。一个大的（但外部的）JS文件是要走的路。

确保JS文件正在发出正确的缓存标头，并且每个客户端只会加载一次。除非你的JS非常小（并且你的描述听起来不那么），否则这几乎是最佳的。

Answer 4

最好的方法是连接它们，但不将它们直接放入你的html文件中。这样，js文件可以独立于（可能）更改html-source缓存。

Answer 5

我建议您将所有javascript编译成一个文件，并使用一个<script>标记加载它。是的，HTTP请求需要一些时间，浏览器会限制并发请求的数量（到一个域）。

我不会把所有的javascript都放在HTML中，因为这是混合逻辑和表示，防止缓存（javascript）等等。避免这种情况。

这是我遵循的一般规则：通常会从很少更改的内容更改的单独内容。这样就可以有效地缓存静态内容。并且您可以优化“流体”内容（gzip，minify等），以便加载时间更短。

Answer 6

我假设你的意思是'嵌入<script>块'，而不是嵌入HTML元素中的'on *'属性。如果情况并非如此，答案肯定是肯定的 - “on *”属性难以维护，通常对可访问性不利。

通常答案是否定的，因为虽然用户的第一个请求如果必须获取外部资源将会更加昂贵，但这些资源将被缓存，因此将来的请求会更便宜。如果您嵌入了所有内容，则用户每次加载页面时都必须加载它们。

所以这取决于一些事情，其中​​最重要的可能是：

• 用户是否浏览多个页面？他们会回来吗？如果两个问题的答案都是“否”，那么缓存没有任何好处，因此嵌入式JavaScript可以更快。
• JavaScript是静态的吗？如果它是动态的 - 如每个页面加载的变化，那么再次，缓存是无关紧要的。您可以改进JavaScript体系结构，将静态位与动态分开。

您可以混合JavaScript以便链接静态JavaScript，同时嵌入动态或特定于页面的JavaScript。这对于库来说尤其有用 - 它可能已经从其他站点缓存在客户端中，但如果没有，你仍然可以从像谷歌这样的CDN加载，所以它非常快。

Answer 7

我不会这么想。

我总是只包含文件并尝试让我的基本html看起来尽可能干净。

Answer 8

顽固的人会说不要这样做，将内容与样式和脚本分开，我同意。但是如果它不是很多JS，你可以节省任何额外的HTTP请求。是的，浏览器不会缓存它，但这是因为它不需要。在SEO的基础上，页面排名得到改善，页面加载速度更快，可能在第一次访问时确定，而不是在缓存之后。