Главная

Простой способ загрузить скрипт асинхронно

2012-09-18 в 8:29, admin, рубрики: async, javascript, метки: async, javascript

Люди еще с древних времен загружают скрипты, используя тег script. При этом специалисты по JavaScript утверждают, что этот способ имеет массу недостатков и что есть способы, которые эти недостатки тем или иным путем устраняют. У меня есть своя идея по загрузки скриптов — использовать новый XMLHttpRequest Level 2 с использованием Blob.

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

Не останавливает загрузку страницы.
Исполняется сразу после инициализации (т.е. запустить в любой момент, в моем случае сразу).
Загрузка скриптов, используя Ajax (можно одновременно).
Нет лишних обращений серверу.
Кэширование скриптов.
*Кроссдоменная загрузка, если сервер это позволяет.

Здесь дан самый простой код, который загружает и исполняет скрипт.

var head = document.getElementsByTagName("head")[0];

function loadScript(src,onload){
    var xhr = new XMLHttpRequest();
    xhr.open("GET",src);
    xhr.responseType = "blob";
    xhr.onload = function(){
        var script = document.createElement("script");
        script.async = true; //Необязательный атрибут, можно отбросить
        script.onload = onload;
        script.type = "application/javascript";
        script.src = URL.createObjectURL(this.response);
        head.appendChild(script);
    }
    xhr.send(null);
}

Эта функция загружает скрипт в формате Blob. После того, как загрузил, создает URL к Blob объекту и исполняет, создавая элемент script. Самое главное — это вставить callback. Готово!

Однако скрипты можно запустить позднее (и последовательно), при этом загрузив их все же одновременно. Для этого можно написать отдельную функцию для загрузки по XHR2 и асинхронному или последовательному запуску сценария. Кстати, чтобы правильно и последовательно запустить скрипты, необходимо их запускать только после инициализации предыдущего, а иначе ничего не получится.

По аналогичному принципу можно загружать и Web Worker'ы (хотя это будет лишним).

Итак, я ознакомил вам с моим новым механизмом для загрузки скриптов. Вот и его недостатки:

Не будет работать в IE9 и ниже (для него придется писать отдельный хак, который кодирует текст в data: URL)
Несколько неудобен в использовании
Действует правило одного домена (тем более, что для IE9 придется использовать XDomainRequest, если скрипт нужно загрузить с постороннего домена)

Я и раньше задумывался о том, как загрузить скрипты, используя XHR. Однако мысль использовать Blob пришла недавно. Самое главное, это современный и более легальный способ загружать скрипты.

Автор: Alexei03a