当JavaScript文件全部合并成一个文件时，JavaScript文件的ORDER是否重要？ [英] Does the ORDER of javascript files matter, when they are all combined into one file?

问题描述

在今天的现代时代，外部和本地加载了大量（受欢迎的）javascripts文件， javascripts文件被调用的顺序非常重要，特别是当所有本地文件全部组合时）转换成一个文件？

此外，许多人声称Javascript应该在页面底部，而其他人则说javascript最好留在头脑中。哪一个应该做什么？谢谢！

---

  google cdn latest jquery js |外部
另一个cdn加载javascript js |外部
 
 TabScript ... js \ 
 GalleryLightbox ... js \ 
 JavascriptMenu ... js \ 
 HTMlFormsBeautifier ... js>全部缩小并合并成一个.js文件！ 
 TextFieldResize ... js / 
 SWFObjects ... js / 
工具提示... js / 
 CallFunctions ... js / 
  

---

解决方案

订购事宜可能是以下一个或多个情况：

• 当您的其中一个脚本包含另一个脚本的依赖项。


• 如果脚本在BODY中，而不是HEAD。。 更新： HEAD与BODY似乎没有什么不同。订购事宜


• 在全局命名空间中运行需要依赖于其他脚本的代码。

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

检查Firebug中的JavaScript错误控制台或Chrome调试器可能会告诉您脚本中的内容是什么，并让您知道需要修改新设置的内容。

订单通常无关紧要基于事件调用，如页面加载，点击，插入或删除的节点等。但是，如果在全局命名空间中的事件之外进行函数调用，那就是出现问题时。请考虑以下代码：

JS文件：mySourceContainingEvilFunctionDef.js

 函数evilGlobalFunctionCall（）{
 alert（我会导致问题，因为HTML页面试图调用+ 
我知道我存在...它不知道我存在，sniff :(）; 
} 
  

HTML： / strong>

 < script> 
 evilGlobalFunctionCall（）; // JS错误 - 语法错误
 < / script> 
<！ - 需要加载时间 - > 
< script type =text / javascriptsrc =mySourceContainingEvilFunctionDef.js>< / script> 
 ... 
  

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

---

作为附注，您可能希望考虑到利用异步性质有一定的速度优势浏览器下拉资源一次最多有4个异步连接打开，这意味着您的一个海量脚本很可能比同一个脚本加载更长时间分裂成块！还有 Yahoo Research 显示组合脚本会产生更快的结果，因此结果从一个

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

<如果说，在大多数情况下，组合脚本可能会导致最快的速度提升，并被认为是最佳做法。

In todays modern age, where lots of (popular) javascripts files are loaded externally and locally, does the order in which the javascripts files are called matter especially when all local files are all combined (minified) into one file?

Furthermore, many claim that Javascript should go in the bottom of the page while others say javascript is best left in the head. Which should one do when? Thanks!

---

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    /

---

解决方案

Order matters in possibly one or more of the following situations:

• When one of your scripts contains dependencies on another script.
• If the script is in the BODY and not the HEAD.. UPDATE: HEAD vs BODY doesn't seem to make a difference. Order matters. Period.
• When you are running code in the global namespace that requires a dependency on another script.

The best way to avoid these problems is to make sure that code in the global namespace is inside of a $(document).ready() wrapper. Code in the global namespace must be loaded in the order such that executed code must first be defined.

Checking the JavaScript error console in Firebug or Chrome Debugger can possibly tell you what is breaking in the script and let you know what needs to be modified for your new setup.

Order generally doesn't matter if functions are invoked based on events, such as pageload, clicks, nodes inserted or removed, etc. But if function calls are made outside of the events in the global namespace, that is when problems will arise. Consider this code:

JS file: 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>
...

In any case, the above tips will help prevent these types of issues.

---

As a side note, you may want to consider that there are certain speed advantages to utilizing the asynchronous nature of the browser to pull down resources. Web browsers can have up to 4 asynchronous connections open at a time, meaning that it's quite possible that your one massive script might take longer to load than that same script split up into chunks! There is also Yahoo Research that shows combining scripts produces the faster result, so results vary from one situation to another.

Since it's a balance between the time taken to open and close several HTTP connections vs the time lost in limiting yourself to a single connection instead of multiple asynchronous connections, you may need to do some testing on your end to verify what works best in your situation. It may be that the time taken to open all of the connections is offset by the fact that the browser can download all the scripts asynchronously and exceed the delays in opening/closing connections.

With that said, in most cases, combining the script will likely result in the fastest speed gains and is considered a best practice.

这篇关于当JavaScript文件全部合并成一个文件时，JavaScript文件的ORDER是否重要？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！