JavaScript очень популярен в настоящее время. Он довольно прост в изучении и позволяет сделать Ваш сайт более динамичным и интерактивным. Статические сайты сейчас уже не интересны пользователям. Во многих случаях javascript используется неэффективно, негативно влияя на производительность Вашего web сайта. В данной статье мы рассмотрим основные моменты, связанные с javascript, которые позволят этого избежать.
Как и в случае с css файлами, скрипты лучше вынести в отдельные файлы и постараться, чтобы количество этих файлов было как можно меньше. Отдельные файлы будут кэшироваться, что положительно скажется на загрузке страницы.
В отличии от css-файлов скрипты лучше располагать как можно ниже на странице. Все дело в том, что пока не закончится загрузка скрипта другие загрузки не начнутся т.е. страница будет блокироваться.
В некоторых случаях переместить скрипты вниз страницы может быть проблематично, т.к. выше могут быть обращения к функциям из этих скриптов, что приведет к ошибкам.
Динамическая подгрузка скриптов.
Вы можете динамически подгружать скрипты по мере необходимости. Это позволит не загружать скрипты, которые возможно вообще не понадобятся. Например, это можно сделать так:
Т.е. Вы просто добавляете новый элементvar headID = document.getElementsByTagName("head")[0];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'http://YourSiteURL/script.js';
headID.appendChild(newScript);script
с нужным адресом в DOM Вашего документа. Это достаточно простой пример. Существуют библиотеки, которые предоставят Вам более широкие возможности по динамической загрузке скриптов. Например, LABjs.JavaScript profiling
Используем утилиты для анализа JavaScript. Например, для Firefox есть add-on Firebug. Используя его profiler, можно увидеть какие методы вызываются чаще всего и сколько времени они выполняются. Затем можно оптимизировать эти методы. Пример firebug profiler:
Минимизируем JavaScript.
Cуществует достаточное количество утилит, которые позволяют это сделать. Например, JavaScript Compressor.
В моем случае степень сжатия получилась 32% (около 9кб).
Вопросы оптимизации CSS рассмотрены в статье - Web-сайт. Ускоряем загрузку. CSS.
Время - деньги. Оптимизируйте Ваш сайт. Ваши пользователи будут Вам благодарны.