Question

可能重复：
When should I use Inline vs. External 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个版本 dev 和发布。
在您的开发版本中，您并不真正关心脚本的数量，而您的发布版本应该通过将所有脚本合并为一个，缩小它并对其进行压缩来优化。

Answer 3

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

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

3 个答案: