JavaScript: Как загрузить JS асинхронно?

Загрузки HTTP обычно ограничиваются браузерами двумя одновременными загрузками на домен . Вот почему некоторые сайты имеют динамический контент на www.domain.tla и изображения и javascript на static.domain.tla .

Но браузеры действуют несколько иначе со скриптами, пока скрипт загружается, однако браузер не запускает никаких других загрузок, даже на других именах хостов .

Стандартное решение - переместить скрипты в нижнюю часть страницы, но есть обходной путь, который может сработать, а может и не сработать: Вставьте DOM-элемент скрипта с помощью Javascript .

Кто-то попросил меня прокомментировать эту ветку, но это было до того, как @lonut опубликовал ответ. Код @lonut - очень хорошее решение, но у меня есть несколько комментариев (критических и не очень):

Во-первых, код @lonut предполагает, что сценарии НЕ имеют зависимости нагрузки от других сценариев. Это немного сложно объяснить, поэтому давайте рассмотрим простой пример jquery.min.js и prototype.js. Предположим, у нас есть простая страница, которая просто загружает эти два сценария следующим образом:

<script src="jquery.min.js"></script>
<script src="prototype.js"></script>

Помните - на странице больше ничего нет - никакого другого кода JavaScript. Если вы загрузите эту страницу, загрузятся два сценария, и все в порядке. Что произойдет, если вы удалите скрипт jquery.min.js? Если вы получаете ошибки из prototype.js, потому что он пытается ссылаться на символы, определенные в jquery.min.js, тогда prototype.js имеет зависимость загрузки от jquery.min.js - вы не можете загрузить prototype.js, если jquery.min.js не имеет уже загружен. Если, однако, вы не получите никаких ошибок, то два сценария можно загрузить в любом порядке. Если у вас нет зависимостей нагрузки между внешними скриптами, код @lonut великолепен. Если у вас есть зависимости нагрузки - это становится очень сложно, и вам следует прочитать главу 4 в «Даже более быстрые веб-сайты».

Во-вторых, одна проблема с кодом @lonut заключается в том, что некоторые версии Opera будут вызывать loadCallback дважды (один раз из обработчика onload и второй раз из обработчика onreadystatechange). Просто добавьте флаг, чтобы убедиться, что loadCallback вызывается только один раз.

В-третьих, большинство браузеров сегодня открывают более двух соединений на одно имя хоста. См. Обзор параллельных подключений .

Вы можете использовать что-то вроде этого, что довольно хорошо работает в большинстве браузеров. По крайней мере, в 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);
});

Независимо от того, в каком порядке они загружают , сценарии должны быть проанализированы / выполнены в том порядке, в котором они появляются на странице (если вы не используете DEFER).

Итак, вы можете поместить обе карты Google Maps в первую очередь, ЗАТЕМ JQuery. Затем где-нибудь в теле вашей страницы:

<script language="Javascript">

    function InitPage() {
       // Do stuff that relies on JQuery and Google, since this script should
       // not execute until both have already loaded.
       }

    $(InitPage);   // this won't execute until JQuery is ready

</script>

Но у этого есть недостаток, заключающийся в блокировании других ваших подключений при загрузке начала страницы, что не очень хорошо для производительности страницы.

Вместо этого вы можете оставить JQuery в HEAD, но загрузить скрипты Google из функции InitPage (), используя функцию загрузки Javascript JQuery, а не Google JSAPI. Затем начните рендеринг, когда будет выполнена функция обратного вызова . То же, что и выше, но с этой функцией InitPage () вместо:

  function InitPage() {
     $.getScript('Google Maps Javascript URL', function() {
        // Safe to start rendering now
        });

Переместите ваши javascript-файлы (