包含（）资源（css，js）或让浏览器执行另一个请求会更好吗？

Posted 2023-05-07

【中文标题】包含（）资源（css，js）或让浏览器执行另一个请求会更好吗？

【英文标题】：Would it be better to include() resources (css,js) or to let the browser do another request?

【发布时间】：2011-03-01 01:34:13

【问题描述】：

包含一个 javascript 文件并将其作为 <script> 输出到 html 中，还是只使用 src 属性并让浏览器发出另一个请求会更快吗？

简单地输出它而不是让浏览器发出另一个请求显然意味着更少的请求和可能更少的服务器负载，但它会使其更快吗？包含文件并输出它们不会让浏览器缓存它们。

【参考方案1】：

如果包含它，每个不同的页面都会有重新下载脚本的开销。

如果您从外部链接到它，并发送未来的到期标头并使用带有缓存破坏器的版本控制（用于更改），您的文件将根据需要下载一次。在性能方面，请务必缩小或打包您的生产使用 JavaScript。

当然，这与您的 JavaScript 非常相关。如果它只有几行并且可能不会更改，也许您可以保存那个 HTTP 请求并将其置于内联。

但是，在 99% 的情况下，最佳做法是保存在外部文件中。

【参考方案2】：

这是一个相当复杂的答案。显然，生产环境和开发环境的技术不同。

最后一个非常简单：让您的脚本原样包含进来。

生产环境：将需要的js文件拼接成一个文件，压缩压缩。您可以从公共 cdn 检索库以提高下载性能并减轻服务器负载。

增加的服务器负载（http头）应该通过缓存来平衡

要提高用户感知的性能，您应该将 js 文件链接到页面底部，而不是链接到 head 部分

你也应该知道deferred execution，它让浏览器在下载javascript文件的同时下载其他资源（默认情况下，浏览器一次下载一个javascript，因为它不知道他下载的javascript是否会改变dom）。

最后，如果你的脚本很短，如果你把它直接包含在网页中，你会得到更好的性能

最后，如果您有类似的问题，您应该喜欢阅读以下内容： http://developer.yahoo.com/performance/rules.html

【讨论】：

感谢您的回答。我会为这些页面添加书签并稍后阅读：D

【参考方案3】：

我同意@alex。此外，链接允许在解析页面时并行下载脚本文件。大多数浏览器在解析主页内容时使用多个线程来下载内容。