Web-сайт. Ускоряем загрузку. JavaScript

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.

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