当javascript文件全部合并到一个文件中时,它们的顺序是否重要?

当javascript文件全部合并到一个文件中时,它们的顺序是否重要?,javascript,dom,performance,httprequest,Javascript,Dom,Performance,Httprequest,在当今的现代,大量(流行的)javascripts文件都是从外部和本地加载的,调用javascripts文件的顺序是否重要,特别是当所有本地文件都合并(缩小)为一个文件时 此外,许多人认为Javascript应该放在大脑中,而其他人则认为Javascript最好放在大脑中。什么时候该做什么?谢谢 在以下一种或多种情况下,订单很重要: 当一个脚本包含对另一个脚本的依赖项时 如果脚本在主体中而不是头部更新:头部和身体似乎没有什么区别。秩序很重要。句号 在全局命名空间中运行需要依赖于其他脚本的代码

在当今的现代,大量(流行的)javascripts文件都是从外部和本地加载的,调用javascripts文件的顺序是否重要,特别是当所有本地文件都合并(缩小)为一个文件时

此外,许多人认为Javascript应该放在大脑中,而其他人则认为Javascript最好放在大脑中。什么时候该做什么?谢谢




在以下一种或多种情况下,订单很重要:

  • 当一个脚本包含对另一个脚本的依赖项时
  • 如果脚本在主体中而不是头部更新:头部和身体似乎没有什么区别。秩序很重要。句号
  • 在全局命名空间中运行需要依赖于其他脚本的代码时
避免这些问题的最佳方法是确保全局命名空间中的代码位于
$(document).ready()包装器中。全局命名空间中的代码必须按顺序加载,以便首先定义执行的代码。

在Firebug或Chrome调试器中检查JavaScript错误控制台可能会告诉您脚本中出现了什么问题,并让您知道新设置需要修改什么

如果函数是基于事件调用的,例如页面加载、单击、插入或删除节点等,顺序通常并不重要。但是如果函数调用是在全局命名空间中的事件之外进行的,则会出现问题。考虑这个代码:

JS文件:mySourceContainingEvilFunctionDef.JS

function evilGlobalFunctionCall() {
    alert("I will cause problems because the HTML page is trying to call " +
      "me before it knows I exist...  It doesn't know I exist, sniff :(  ");
}
HTML:

    <script>
        evilGlobalFunctionCall();  // JS Error - syntax error 
    </script>
    <!-- Takes time to load -->
    <script type="text/javascript" src="mySourceContainingEvilFunctionDef.js"></script>
...

全局函数调用();//JS错误-语法错误
...
在任何情况下,上述提示都有助于防止此类问题


作为一个旁注,您可能想考虑利用浏览器的异步性质来降低资源有一定的速度优势。Web浏览器一次最多可以打开4个异步连接,这意味着您的一个大型脚本很可能需要比同一个脚本更长的加载时间!还有一项研究表明,组合脚本会产生更快的结果,因此结果因情况而异

由于这是打开和关闭几个HTTP连接所花费的时间与将自己限制为单个连接而不是多个异步连接所损失的时间之间的平衡,因此您可能需要在您的终端上进行一些测试,以验证什么在您的情况下最有效。浏览器可以异步下载所有脚本并超过打开/关闭连接的延迟,这可能抵消了打开所有连接所需的时间


话虽如此,在大多数情况下,组合脚本可能会带来最快的速度提升,并被视为最佳实践。

如果我理解您的问题,我想您会问,在文件中定义函数/方法的位置是否重要,答案是否,您可以在单个源文件中的任何位置定义它们。JavaScript解析器将在尝试运行代码之前读入所有符号。

是的,这在很大程度上取决于您的操作

例如,如果
a.js

var a = function() {
   alert('a');
}
a()
…和
b.js
had

var a = function() {
   alert('a');
}
a()
…那么您就不想在
a.js
之前包含
b.js
,或者
a()
将不可用

这只适用于函数表达式;声明被提升到其范围的顶部


至于你是否应该合并jQuery,我认为最好使用Google托管的副本-当文件很有可能已经为客户端缓存时,将其添加到合并的文件中会使其更大。

如果你有两个文件定义了相同名称的变量或函数,它们包含的顺序将改变实际定义的脚本文件。

阅读一些关于浏览器如何加载和执行脚本文件的有价值信息

通常,当解析器遇到 外部脚本,解析暂停,一个 发出请求以下载 脚本,并且仅恢复解析 脚本完全下载后 并执行

因此,通常(没有那些async或defer属性),脚本按照在源代码中指定的顺序执行但是如果脚本标记位于
中,浏览器将首先等待所有脚本加载,然后开始执行任何操作


这意味着脚本是否被拆分为多个文件没有任何区别。

每个生成的HTTP请求除了下载实际文件外,还增加了发送请求和等待响应的延迟。通常认为最好的做法是将所有JavaScript合并到一个文档中,以避免多个不必要的HTTP请求。@Andrew-是的,我在回答中指出了这一点。但结果可能会有所不同也是事实,建议组合脚本的相同文档也表明,跨多个域分割内容可能会更快,以利用浏览器的异步特性和4连接限制。这实际上取决于每个团队,以确定哪一个是更快的为他们给定的情况。因为组合被认为是最佳实践,所以很有可能会更好,但我不相信这是有保证的。@jmort避免这些问题的最佳方法是在HEAD部分加载代码,以确保在运行之前加载所有JavaScript代码。您能详细说明一下吗?将SCIRPT元素放在头部与放在身体相比有什么好处?@jmort另外,你是说顺序对BO中的脚本元素很重要