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

Question

在当今时代，许多(流行的)javascripts 文件在外部和本地加载，调用 javascripts 文件的顺序是否重要，尤其是当所有本地文件都组合(缩小)时) 到一个文件中？

此外，许多人声称 Javascript 应该放在 bottom of the page 中而其他人则说 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 与 BODY 似乎没有区别。订单很重要。期间。
• 当您在需要依赖另一个脚本的全局命名空间中运行代码时。

避免这些问题的最佳方法是确保全局命名空间中的代码位于 $(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>
...

无论如何，上述提示将有助于防止这些类型的问题。

---

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

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

话虽如此，在大多数情况下，组合脚本可能会带来最快的速度提升，这被认为是最佳做法。