3

我正在开发一个使用 HTML 和 JavaScript 的项目。我在我的项目中使用了许多 JavaScript 文件。我想知道 Web 项目中 JavaScript 文件的数量是否有任何副作用？（在效率或速度方面）。

4

4 回答 4

4

我想知道 web 项目中没有 JavaScript 文件有什么影响吗？在效率或速度方面。

如果您的意思是，将所有 JavaScript 嵌入到 HTML 中的内联script标签中是否会产生速度成本，那么可能会，也可能不会；这取决于有多少 JavaScript。

这是一个权衡：

  • 如果你把所有的 JavaScript 都放在 HTML 文件中，这意味着你必须在每个 HTML 文件中复制它，使每个文件都变大。如果有很多脚本，那么每个 HTML 文件就会变得更重，这意味着当您更改内容（而不是代码）时，您会强制用户重新下载所有这些代码。

  • 如果您将 JavaScript 放在单独的文件中，则在加载页面时会产生额外的 HTTP 请求，但前提是 JavaScript 文件尚未在缓存中 - 并且您的所有 HTML 文件都小得多。

因此，在大多数情况下，如果您有大量代码，最好使用单独的 JavaScript 文件并正确设置缓存标头，这样浏览器就不需要每次都发送单独的 HTTP 请求。例如，配置您的服务器以告诉浏览器 JavaScript 文件在很长一段时间内都是有效的，因此它甚至不会发出If-Modified-SinceHTTP 请求。然后，如果您需要更新 JavaScript，请更改文件名并引用 HTML 中的新文件。

这只是缓存控制的一种方法，这是一个重要且非平凡的话题。但你明白了。将其分开为您提供了类似的选项，并且初始成本相当低（一个额外的 HTTP 请求将其加载到缓存中）。但是对于非常少量的代码来说，它可能是矫枉过正的。

于 2012-11-09T11:18:25.097 回答
3

在执行方面，我相信根据您拥有的 JavaScript 文件的数量，应该没有太大差异。但是，大量的 JavaScript 文件在加载页面时需要大量请求，这肯定会影响加载页面所需的时间。

至少有两种方法可以处理这个问题，使用哪种方法取决于手头的情况。

将所有文件打包成一个：

对服务器的每个请求都会增加加载页面所需的时间。正因为如此，通常认为将 JavaScript 文件打包并压缩到一个包含所有脚本的文件中是一种很好的做法，因此只需一个请求即可加载所有 JavaScript。

但是，在某些情况下，例如，如果您有大量 JavaScript，则该单个文件可能会变得非常大，即使您只加载单个文件，加载该文件也可能需要一些时间，从而减慢您的页面加载速度。在这种情况下，可能值得考虑选项二。

根据需要加载模块：

在其他情况下，例如，如果您的网站有很多 JavaScript，但每个页面上只使用了所有代码的几个模块，则使用条件加载可能会给您带来更好的性能。在这种情况下，您将代码保存在单独的模块中，并将每个模块放在单独的文件中。然后，您可以仅在每个页面上加载您需要的模块。

于 2012-11-09T11:18:38.747 回答
0

大量的 JavaScript 文件可能会导致您的页面加载速度变慢，但如果所有内容都正确缓存，它们应该不会有任何问题。从缓存请求大量文件的浏览器在渲染之前会慢一些，但我们谈论的是 0.001 秒。

在 Crowders 帖子中，如果您正确缓存，则必须更改文件名并引用它，但如果您在 web 项目中实现了一个很好的缓存机制，则使用查询字符串引用 JavaScript 会更容易，例如：

scripts/foo.js?version=1

我们使用软件版本号，因此每个新版本我们都会更改查询字符串，所有客户端都会获得新的脚本文件。

每次发布时，最好将所有 JavaScript 打包在一起，但它对小型项目没有多大用处。

于 2012-11-09T11:21:57.987 回答
0

这将完全取决于您将包含的 javascript 文件。自然，当包含一个 javascript 文件时，它必须由浏览器加载。这是如何征税取决于文件的大小。一般来说，通过将所有代码组合在一个文件中来最小化脚本文件的单独请求的数量是有利的

于 2012-11-09T11:18:48.463 回答