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

Posted 2023-02-22

【中文标题】将javascript添加到页面或外部javascript文件[重复]

【英文标题】：add javascript to page or external javascript file [duplicate]

【发布时间】：2011-09-27 08:29:52

【问题描述】：

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

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

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

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

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

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

请对此发表意见？

【参考方案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 变量因用户而异，因此这种方法行不通