将 javascript 添加到页面或外部 javascript 文件

Question

可能的重复：
我什么时候应该使用内联和外部 Javascript？

我有我在 javascript 中使用的一些 javascript 变量（即外部 javascript 文件）

此 javascript 变量是特定于页面的，并且因页面和用户而异。

最好将这些放在任何其他 javascript 文件中，这意味着额外的 http 请求，还是将其包含在页面的 html 内容中，从而使页面膨胀。

我喜欢分离，但希望尽一切努力最大限度地提高性能，因此要么增加 html 页面大小，要么增加额外的 http 请求。

我从性能/优化方面问这个问题。

请问对此有何意见？

Answer 1

您可以通过几种不同的方式来做到这一点。一种方法是将数据包含在主脚本中包含的对象中，并在每页上有另一个对象。
或者

var data = {
 "page1": {
  "title": "blah"
 },
 "page2": {
  "title": "different blah",
  "users": [...]
 }
}

你可以做一个配置加载器。
在每个 html 页面中包含

<script src="loader.js" type="text/javascript"></script>

其中将包含类似这样的

// if the page was blog.html page would equal blog
var page = window.location.href.match(/\/(\w+).html/)[1];
var s = document.createElement("script");
s.src = "/path/to/javascript/" + page + ".js";
s.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(s);

内容这可以加载特定页面需要的任何附加数据，如果在一开始就完成，将与大多数相当于 onReady 的库一起工作，例如

jQuery(function() {
 doStuff();
})

要使此方法正常工作，您只需要确保每个文件中的数据在数据包含方面是统一的。

var pageData = { ... };

这两种方法应该可以让您在提出解决方案时进行一些思考。

Answer 2

您的应用可以有 2 个版本开发和发布。
在您的开发版本中，您并不真正关心脚本的数量，而您的发布版本应该通过将所有脚本合并为一个、缩小它并对其进行压缩来进行优化。

Answer 3

如果数据因用户和页面而异，则浏览器无法有效地缓存它们，因此将它们放入外部文件中不会从浏览器缓存中受益，事实上，您必须明确阻止文件被缓存。我建议你把它放在实际的网页中。如果可以的话，将其放在网页 HTML 之后，以便可以先渲染。