Использование Head.JS

После того, как подключился к pinboard.in, на сервере нашел упоминание интересного проекта – Head JS.

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

Проект существует не так давно и совсем недавно еще имел статус alpha. В связи с чем, найти хоть какую-нибудь информацию по его использованию, за исключением официальной документации не представляется возможным. Вчера вечером провел пару часов над внедрением данного проекта на страницы своего сайта. И теперь хочу поделиться своими находками и домыслами.

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

Для подключения, необходимо скачать со страницы headjs.com/#download файл head.min.js и разместить его на сервере. Затем в заголовке документа размещаем строку:

<script src="/js/head.min.js"></script>

И теперь я просто покажу несколько примеров того, как модифицируются скрипты для использования их с Head JS.

Google Analitics

Исходный код скрипта:

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

Модифицированный:

<script>
    head.js("http://www.google-analytics.com/ga.js", function() {
  var tracker = _gat._getTracker("UA-XXXXXXX-X");
  tracker._trackPageview();
    });
</script>

Apture

Исходный код скрипта:

<script id="aptureScript">
(function (){var a=document.createElement("script");a.defer="true";a.src="http://www.apture.com/js/apture.js?siteToken=XXXXXXX";document.getElementsByTagName("head")[0].appendChild(a);})();
</script>

Модифицированный:

<script id="aptureScript">
head.js("http://www.apture.com/js/apture.js?siteToken=XXXXXXX")
</script>

И, естественно, оба скрипта можно объединить в одном блоке:

<script>
    head.js("http://www.apture.com/js/apture.js?siteToken=XXXXXXX","http://www.google-analytics.com/ga.js", function() {
      var tracker = _gat._getTracker("UA-XXXXXXX-X");
      tracker._trackPageview();
    });
</script>

Используемые мной скрипты небольшого размера, поэтому оценить прирост скорости загрузки довольно сложно. Однако на официально странице проводятся ссылки на тесты: headjs.com/test/script.html, которые позволяют оценить разность в скорости загрузке одних и тех же скриптов, при размещении их в разделе Head, в конце документа, или при использовании Head.JS.

Судя по результатам, модуль Head JS позволяет скорость загрузку страницы более чем в два раза.