将javascript添加到页面或外部javascript文件[重复]答案

【问题标题】：add javascript to page or external javascript file [duplicate]将javascript添加到页面或外部javascript文件[重复]
【发布时间】：2011-09-27 08:29:52
【问题描述】：

可能重复：
When should I use Inline vs. External Javascript?

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

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

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

我喜欢分离，但想尽一切努力最大化性能，所以要么增加 html 页面大小，要么增加额外的 http 请求。

我从性能/优化的角度提出这个问题。

请对此发表意见？

【问题讨论】：

标签： javascript html performance optimization httprequest

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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 = { ... };

这两种方法应该让您在想出解决方案时有所思考。

【讨论】：

【解决方案3】：

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

【讨论】：

javascript 变量因用户而异，因此这种方法行不通