По сути разницы нет, но иногда так бывает, что если подключить скрипт в подвале он не будет работать. За частую все те, кто предлагает свой скрипт, пишут что нужно подключать их в шапке. Там же и подключаются библиотеки jQuery.
Хочу поделится с Вами своим опытом. Лично я подключаю все скрипты, все таки в подвале. Дело в том, что любой скрипт - это дополнительная нагрузка на сайт и чем больше Вы подключите скриптов тем дольше будет загружаться Ваш сайт. К тому же, как Вы понимаете сайт начинает грузится именно с шапки и по порядку в низ подгружаются все элементы, поэтому сначала все Ваши скрипты в шапке загрузятся и только потом начнет загружаться основной контент Вашего сайта. Вот по этому я это делаю в подвале. Сначала грузим контент, потом скрипты. К тому же сайты, которые показывают скорость загрузки Вашего сайта, за частую тоже советуют сделать подключение в подвале, для большей оптимизации. Да что там говорить, Google Analytics и его PageSpeed Insights и тот советует убрать все скрипты из шапки сайта.
Так что открываем файл отвечающий за Ваш подвал и перед закрывающимся body подключаем скрипты. Если Вы работаете с WordPress, то нужно это делать после функции wp_footer();.
Следующий момент, касается самого подключения. иногда скрипт занимает две строки, а иногда и 100. А если таких скриптов 5 штук? Ваш подвал превращается в тихий ужас. Чтобы этого избежать, я советую каждый скрипт вставлять в отдельный файл и сохранять его с расширением js. Например у нас есть скрипт и мы сохранили его в файле script.js. Теперь мы должны его подключить к сайту, для этого нужно просто указать ссылку и готовый код будет выглядеть примерно так:
<script type="text/javascript" src="сайт/папка/script.js"></script>
Только если ваш скрипт был заключен в теги, то помещая его в файл, теги не нужно переносить
То есть, скрипт на сайт добавляется так:<script type="text/javascript"> // ЭТО ОТКРЫВАЮЩИЙ ТЕГ //тут скрипт </script> // ЭТО ЗАКРЫВАЮЩИЙ ТЕГТо в файл добавляется просто скрипт
//тут скрипт, перед ним и после нет открывающего и закрывающего тега!!!
Так делаем для каждого скрипта, который хотите использовать на своем сайте. Такой способ, явно уменьшит количество кода в основных файлах. Также перед всеми такими подключениями, подключается и библиотека jQuery, конечно же если она не подключена по умолчанию системой управления сайтом, как это сделано в WordPress.
Как подключить, мы разобрались, но хочу еще посоветовать один момент. За частую скрипт разбит на строки и как я писал может занимать кучу места. К тому же часто в скриптах используют комментарии, которыми объясняют что и посему и в дополнение много ненужного мусора в виде лишних пробелов. Все это в суме увеличивает размер скрипта и его вес.
Есть способ, как можно уменьшить размер javascript. Есть отличный сервис, с помощью которого можно сжать скрипты. Это сайт dean.edwards.name/packer/. Скопируйте адрес и вставьте в адресную строку, чтобы перейти на сайт
Чтобы сделать сжатие нужно в открывшемся сайте вставить код в первое поле для текста и под ним нажать на . Во втором поле появится сжатый вариант. Если код был большим, то его размер явно уменьшится и ускорит загрузку Вашего сайта. Ваш скрипт будет в виде одной строки без лишнего мусора 🙂
Для примера я решил взять один и скриптов и показать Вам до и после. Начальный вид скрипта такой:
function up() {
var top = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(top > 0) {
window.scrollBy(0,((top+100)/-10));
t = setTimeout('up()',20);
} else clearTimeout(t);
return false;
}
jQuery(function(f){
var element = f('#back-top');
f(window).scroll(function(){
element['fade'+ (f(this).scrollTop() > 200 ? 'In': 'Out')](500);
});
});
А вот так он будет выглядеть после сжатия
function up(){var top=Math.max(document.body.scrollTop,document.documentElement.scrollTop);if(top>0){window.scrollBy(0,((top+100)/-10));t=setTimeout('up()',20)}else clearTimeout(t);return false}jQuery(function(f){var element=f('#back-top');f(window).scroll(function(){element['fade'+(f(this).scrollTop()>200?'In':'Out')](500)})});
Единственный недостаток в том, что если Вы плохо разбираетесь в javascript, то в сжатом варианте Вам сложновато будет разобраться, де и что надо настроить. Так что если это создает дополнительные проблемы для удобства, то я советую Вам сохранять где то несжатые версии скрипта. Тогда просто внесите в него изменение и опять сожмите для вставки на сайт.
В принципе все, я рассказал все что хотел. Теперь Вы сможете тоже пользоваться удобным способом при работе со скриптами.
На этом все, спасибо за внимание. 🙂
