JavaScript:如何异步下载JS？

Question

在我的网站上,我正在努力尽可能地完成最快的页面加载.

我注意到我的JavaScript似乎没有异步加载.图片链接如下.

alt text http://img249.imageshack.us/img249/2452/jsasynch2.png

我的网站如何工作是它需要加载两个外部JavaScript文件:

• 谷歌地图v3 JavaScript,和
• JQuery JavaScript

然后,我在HTML中使用内联JavaScript,在下载上述两个文件之前无法执行.

一旦它加载了这些外部javascript文件,它就会,然后才能动态呈现页面.在加载Google Maps和JQuery之前我的页面无法加载的原因是 - 我的页面,基于用户的地理位置(使用Gmaps),然后将根据它们所在的位置显示页面(例如,纽约,旧金山等).意思是,在不同城市观看我的网站的两个人将看到不同的前台.

问题:如何让我的JavaScript文件异步下载,以便我的整个页面加载时间最快？

更新:

如果我要下载,不知何故,谷歌,地图和JQuery异步,我会如何创建一个将触发一次事件都谷歌,地图和JQuery已经下载了,因为我的网页上有这些文件的硬依赖执行.

更新2

尽管下面有3个答案,但实际上还没有人回答我的问题.任何帮助将不胜感激.

Answer 1

HTTP下载通常受到浏览器的限制,每个域同时下载两次.这就是为什么有些网站上有动态内容www.domain.tla以及图片和javascript的原因static.domain.tla.

但是浏览器对脚本的行为略有不同,而脚本正在下载,但是,即使在不同的主机名上,浏览器也不会启动任何其他下载.

标准解决方案是将脚本移动到页面底部,但有一种解决方法可能适用于您,也可能不适合您:使用Javascript插入脚本DOM元素.

Answer 2

您可以使用类似的东西，它在大多数浏览器中都运行良好。至少在 IE6 中存在一些问题，但我真的没有时间去调查它们。

var require = function (scripts, loadCallback) {
    var length        = scripts.length;
    var first         = document.getElementsByTagName("script")[0];
    var parentNode    = first.parentNode;
    var loadedScripts = 0;
    var script;

    for (var i=0; i<length; i++) {
        script = document.createElement("script");
        script.async = true;
        script.type = "text/javascript";
        script.src = scripts[i];

        script.onload = function () {
            loadedScripts++;

            if (loadedScripts === length) {
                loadCallback();
            }
        };

        script.onreadystatechange = function () {
            if (script.readyState === "complete") {
                loadedScripts++;

                if (loadedScripts === length) {
                    loadCallback();
                }
            }
        };

        parentNode.insertBefore(script, first);
    }
};

require([
    "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js",
    "http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js",
    "http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/yuiloader/yuiloader-min.js"
], function () {
    console.log(jQuery);
    console.log($);
    console.log(YAHOO);
});