在 html 中包含 javascript 而不是链接到外部文件有缺点吗？答案

【问题标题】：Is there a downside to including javascript in html instead of linking to an external file?在 html 中包含 javascript 而不是链接到外部文件有缺点吗？
【发布时间】：2020-09-05 17:05:28
【问题描述】：

我正在考虑加快我正在开发的网站的方法。我知道套接字连接很昂贵，所以我在想......在实际的 html/php 源代码中包含 css 和 javascript 代码而不是链接到它有什么缺点吗？

似乎我可以简单地将所有代码放在 html 源代码中，而不是对各种文件进行 10 次调用，而不是对外部文件进行任何套接字调用？

我知道我可以将所有内容放入 1 个 javascript 文件并调用它，但这仍会创建一个套接字调用。

我意识到这可能不会有太大的不同，可能只是一个思考练习，但是仅仅内联代码有什么真正的缺点吗？

【问题讨论】：

如果您在每个页面视图中加载相同的内容，那么缓存本可以节省时间和带宽。如果是 SPA，您可能会在所有方面获得更好的性能，但仍然需要一些平衡，而且我们无法为您制定一刀切的指导方针。有时，由于流水线，即使在单个页面上，外部也更快；当您从页面的域加载内容时，从 CDN 加载脚本；这完全取决于每个因素的大小和速度。
如果您在许多页面上使用相同的脚本，则会有一个缺点。如果您放置一个链接，那么浏览器将能够缓存该脚本，并且不会在每个页面上下载它。如果直接放到HTML里面，每次都会下载。
内容交付网络的工作原理相同——例如，您可以从 CDN 链接到 Vue。如果用户从同一个 CDN 访问了任何有 Vue 链接的页面，浏览器将已经将 Vue 缓存在内存中，因此不会再次下载它
由于某种原因没有考虑缓存。只见树木不见森林。

标签： javascript html sockets

【解决方案1】：

不同的资源（即 HTML、CSS、JS、图像...）不一定需要新的套接字连接。对于 HTTP/1.1，同一连接通常用于多个资源（但只能在彼此之后），而对于 HTTP/2，可以通过同一 TCP 连接并行加载多个资源。因此，与其尝试通过将 HTML、JS、CSS 组合到一个文件中来优化交付，不如使用 HTTP/2 来优化传输。

除此之外，脚本、CSS 和图像等资源通常在 HTML 页面之间共享。在这种情况下，一次又一次地提供相同的脚本等只是浪费。相反，适当的缓存可以重用页面之间的共享资源。

最后，内联脚本被认为是一个安全问题 - 只需查找 Cross Site Scripting。将脚本与内容分开允许使用严格的Content Security Policy 来防止此类攻击。

【讨论】：

也没有考虑安全性。看来我是个白痴。谢谢。

【解决方案2】：

这取决于不同的情况。例如（你的 js 文件的大小）。

如果你的 js 文件很大并且有很多代码，那么你应该考虑链接，因为有很多优点 -

(i) 可以被浏览器缓存在本地，以便用户下次访问时，您的网站会加载得更快。
如果你的 js 文件非常小，可以考虑将它嵌入到 HTML 中，因为它也有很多优势 -

(i) 您的服务器上的请求将会减少。

(ii) 如果你想动态分配一些变量，你应该在 HTML 中嵌入 js，因为它不能通过链接的 js 文件来完成。

等等……

【讨论】：