→JavaScript программирование → Оптимизация загрузки JavaScript файлов на веб-странице (асинхронная загрузка скриптов)
Привет, умники:)
Сегодня мы будем заниматься дрочерством, а именно — оптимизировать загрузку HTML страницы. В наше время информационных технологий без JavaScript в веб-разработке никуда. И чем дальше, тем больше нагружаются страницы этим самым яваскриптом. Как известно, объявление js файлов лежит у нас в
Создаем функцию загрузки js файла. А-ля include:
И ложим ее в файлик include.js.
Далее после тега
Прикол в том, что все сводится к этим двум файлам include.js и main.js и мы имеем два http запроса. Скорее всего у вас на странице больше двух js файлов, тогда необходимо провести предварительную подготовку при помощи Sprockets, mod_concat или combo handler, сведя все файлы к main.js
Зачем добавлять именно после тега
И еще, для фанатов JQuery. Он тоже так умеет http://docs.jquery.com/Ajax/jQuery.getScript.
Сегодня мы будем заниматься дрочерством, а именно — оптимизировать загрузку HTML страницы. В наше время информационных технологий без JavaScript в веб-разработке никуда. И чем дальше, тем больше нагружаются страницы этим самым яваскриптом. Как известно, объявление js файлов лежит у нас в
<head>
. И, пока не подтянутся эти js файлы, загрузка страницы блокируется, если их много, то это может быть не очень приятным моментом. Что делать?Создаем функцию загрузки js файла. А-ля include:
function include(url, callback){
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
И ложим ее в файлик include.js.
Далее после тега
</body>
прописываем наш скрипт include.js и загрузку необходимого нам js файлов.<script type="text/javascript" src="http://your.com/include.js"></script>
<script type="text/javascript">
include("http://your.com/main.js", function(){
//initialization code
});
</script>
<script type="text/javascript">
include("http://your.com/main.js", function(){
//initialization code
});
</script>
Прикол в том, что все сводится к этим двум файлам include.js и main.js и мы имеем два http запроса. Скорее всего у вас на странице больше двух js файлов, тогда необходимо провести предварительную подготовку при помощи Sprockets, mod_concat или combo handler, сведя все файлы к main.js
Зачем добавлять именно после тега
</body>
. Будет гарантия что мы получим все необходимые нам DOM элементы и не нужно использовать window.onload.И еще, для фанатов JQuery. Он тоже так умеет http://docs.jquery.com/Ajax/jQuery.getScript.
