Оптимизация скриптов: dom, async, defer [в работе]

Скрипт может быть размещен в любом месте HTML.

Здесь мы разберём то, как его местоположение влияет на скорость загрузки страницы.

[cut]

Перемещение скрипта в HEAD

Если нужно, чтобы скрипт обязательно выполнился до того, как страничка будет отображена, то самое подходящее место -- это HEAD:

<!--+ run height=100 -->
<html>
  <head>
    *!*
    <script>
      function count_rabbits() {
        for (var i=1; i<=3; i++) {
          alert("Кролик номер " + i);
        }
      }
    </script>
    */!*
  </head>

  <body>
  
    <h3>Нажмите на кнопку, чтобы начать</h3>

    <input type="button" onclick="count_rabbits()" value="Считать кроликов!"/>

  </body>

</html>

Скрипты в конце BODY

Скрипт может быть и в конце документа, например перед закрывающим </body>. В таком случае он выполняется после отрисовки страницы.

[compare]

Это хорошо, т.к. пользователь не должен ждать, пока загрузятся скрипты. Он увидит страницу быстро.

Страница будет лишь частично работать, т.к. для инициализации интерфейсов нужен JS. Нужно это учесть, например, закрасить серым нерабочие интерфейсы, показать на них индикатор загрузки. [/compare]

[smart header="Рендеринг и CSS"] По стандарту, CSS-стили могут располагаться только внутри тега HEAD, и они тоже блокируют отображение.

В принципе, их можно для оптимизации перенести вниз документа -- всё будет работать. Но пока они не загрузятся, страница будет показываться без стилей, это обычно непрезентабельно. Поэтому так не делают. [/smart]

Итоги

Скрипты могут быть внутренними и подключаться напрямую в тег SCRIPT и внешними, в виде отдельных файлов, подключаемых с помощью атрибута src="path/to/file.js" тега SCRIPT

В любом случае, отрисовка HTML-страницы блокируется, пока скрипт не будет скачан и исполнен. Большинство браузеров умеют качать несколько скриптов параллельно, что несколько убыстряет процесс, но представьте -- у посетителя медленный канал (смотрит с телефона). Он открывает сайт. Если в HEAD стоит большой внешний скрипт, то пока он не загрузится -- страница не отобразится.

Поэтому, чтобы убыстрить процесс открытия, скрипты добавляют в конец BODY или ставят им атрибуты async или defer. В таком случае страница будет показана до загрузки скрипта.

Но при этом посетитель может тут же куда-нибудь нажать, а скрипты для этой кнопки ещё не загрузились. Эту особенность взаимодействия нужно предусмотреть в интерфейсе (это вполне возможно), и все будет здорово.

4.1 KiB Raw Blame History Unescape Escape

Оптимизация скриптов: dom, async, defer [в работе]

Перемещение скрипта в HEAD

Скрипты в конце BODY

Итоги

4.1 KiB

Raw Blame History