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

Question

在今天的现代时代,许多(流行的)javascripts文件是在外部和本地加载的,javascripts文件被调用的顺序是否很重要,特别是当所有本地文件都被合并(缩小)到一个文件中时？

此外,许多人声称Javascript应该放在页面的底部,而其他人说javascript最好留在头脑中.一个人应该做什么？谢谢!

---

google cdn latest jquery js              | external
another cdn loaded javascript js         | external

TabScript  ...js          \
GalleryLightbox  ...js     \
JavascriptMenu  ...js       \
HTMlFormsBeautifier ...js    > all minified and combined into one .js file!
TextFieldResize  ...js      /
SWFObjects  ...js          /
Tooltips ...js            /
CallFunctions   ...js    /

---

Answer 1

订单可能出现以下一种或多种情况:

• 当您的某个脚本包含另一个脚本的依赖项时.
• 如果脚本在BODY而不是HEAD中.. 更新: HEAD vs BODY似乎没有什么区别.订单很重要.期.
• 在全局命名空间中运行需要依赖另一个脚本的代码时.

避免这些问题的最佳方法是确保全局命名空间中的代码位于$(document).ready()包装器内.必须按顺序加载全局命名空间中的代码,以便必须首先定义执行的代码.

检查Firebug或Chrome Debugger中的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>
...

无论如何,上述提示将有助于防止出现这些类型的问题.

作为旁注,您可能需要考虑利用浏览器的异步特性来提取资源有一定的速度优势.Web浏览器一次最多可以打开4个异步连接,这意味着您的一个大型脚本很可能需要更长的时间来加载,而不是分成块的相同脚本!还有雅虎研究显示组合脚本产生更快的结果,因此结果因情况而异.

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

话虽如此,在大多数情况下,组合脚本可能会带来最快的速度增益,并被认为是最佳实践.

Answer 2

是的,很大程度上取决于你做了什么.

例如,如果a.js有......

var a = function() {
   alert('a');
}

......并且b.js......

a()

...那么你不想在b.js之前提供a.js或a()不提供.

这仅适用于函数表达式; 声明被悬挂到其范围的顶部.

至于你是否应该结合使用jQuery,我认为使用谷歌托管副本会更好 - 将它添加到你的组合文件会使文件已经缓存到客户端时变大.