четверг, 24 декабря 2009 г.

Используем отложенную загрузку и анализ JavaScript кода

При разработке сайтов использования JavaScript стало давно привычной и необходимой технологией. И чем больше мы используем сценарии написанные на JavaScript, тем больше получается кода, т.е. размер скриптов увеличивается. Увеличение размера загружаемых скриптов приводит к увеличению времени загрузки страниц, что в свою очередь плохо влияет на реакцию посетителей сайта.

Например, при поиске информации, я открываю первые 5 результатов, и практически всегда, первые два результатах дают 100% информации, просматриваю конечно те страницы, которые загрузились первыми. Но, как ни странно, это может влиять и на получения прибыли от сайтов. Google констатировал, что после переработки страниц, время загрузки страницы увеличилось на 0.4 секунды для 10 и на 0.9 для 30 поисковых результатов, это привело к уменьшению поискового трафика и доход от рекламы на 20% (Linden, 2006)!

Если разобраться на что уходит время при работе с Javascript на этапе загрузки страницы, то можно выделить 3 этапа:
1. Загрузка файла/кода JavaScript
2. Анализ/разбор JavaScript кода браузером
3. Выполнения JavaScript кода на этапе загрузки страницы


Первый и второй этап в большинстве случаев и вызывают задержку. Одним из оптимизационных действий, которые рекомендуется делать, является перенос JavaScript кода в отдельные файлы и добавление ссылки на эти файлы перед закрывающимся тегом body.
<html>
  <head>
    //ваш html разметка секции head
  </head>
  <body>
    //ваш html разметка секции body
    <script type="text/javascript" src="myJavaScript.js">
    </script>
  </body>
</html>

Первое делается для того, чтобы браузер мог закешировать JavaScript код. Второй, чтобы дизайн страницы отрисовался раньше, чем начнут загружаться файлы с JavaScript кодом.

При оптимизации некоторых вещей иногда думаешь, а зачем это вообще все нужно? Как оказывается, данный вопрос можно применить к JavaScript скриптам.

А почему скрипты должны загружаться и анализироваться в начале загрузки страницы? Сколько процентов кода выполняется на этапе загрузки?!

Скорей всего ответ будет приблизительно следующий - незначительная часть кода будет выполнятся при первой загрузке страницы и, думаю, бывают моменты, когда большая часть JavaScript кода вообще не используется.

Динамическая загрузка JavaScript кода


Вы можете предусмотреть такие ситуации и воспользоваться возможностью динамической загрузкой JavaScript кода.

Динамическое изменение свойства src
<script src='' id="s1" type="text/javascript"></script>
<script type="text/javascript">
var s1 = document.getElementById("s1");
s1.src= "myJavaScript.js";
</script>


Динамическое создание script тега
<script type="text/javascript">
var script = document.createElement('script');
script.src = "myJavaScript.js";
document.getElementsByTagName('head')[0].appendChild(script);
</script>
Уловка от John Resig
Если совместить динамическую загрузку JavaScript кода с интересной уловкой описанной John Resig в статье Degrading Script Tags, то выполнения скриптов после загрузки страницы можно реализовать следующим образом.
window.onload = function() {
    var script = document.createElement('script');
    script.src = "myJavaScript.js";
    script.text = "my.init()"; // выполняем свои скрипты
    document.getElementsByTagName('head')[0].appendChild(script);
}

Скрипт "my.init()" будет выполнен, когда будет успешно загружен JavaScript код. При этом, если при загрузки возникнет ошибка, скрипт не будет выполнен. Работает в Firefox, Opera, Safari, и всеми "уважаемом" IE.

Отложенный анализ/разбор JavaScript кода браузером


Как показывает практика, при нормальном скорости интернета файлы с JavaScript кодом закачиваются быстро(кеширования тоже спасает ситуацию), но при больших скриптах много уходит времени на анализ и разбор кода браузером. Для уменьшения времени отклика можно воспользоваться отложенным анализом/разбором, в качестве метода загрузки воспользуемся классом XmlHttpRequest.
<script type="text/javascript">
  function loadFile(url) {
     function callback() {
      if (req.readyState == 4) { // 4 = Loaded
        if (req.status == 200) {
          //можно реализовать анализ скриптов по требованию
          eval(req.responseText);
        } else {
          // ошибка в получении ответа
        }
      }
    };
    var req = new XMLHttpRequest();
    req.onreadystatechange = callback;
    req.open("GET", url, true);
    req.send("");
  }
</script>

Для загрузки и анализа скриптов вам понадобится вызвать метод "loadFile" с указанием url ардеса файла. Ключевым моментом в данной реализации есть функция eval, которая и производит анализ/разбор полученного кода.

На данный момент у меня пока не сложилось цельное решение, которое можно будет применить для любой ситуации. Но вот такие методики работы с загрузкой и анализом JavaScript файл позволят уменьшить время "отклика" при загрузке сайта, что благоприятно повлиять на отношения пользователей.

Комментариев нет:

Отправить комментарий