Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

Отслеживание визуализации

Оптимизация невозможна без анализа данных. С помощью Navigation Timing API вы можете отследить каждый этап визуализации веб-страницы!

TL;DR

  • С помощью Navigation Timing API можно получать детальные временные отметки для анализа визуализации.
  • Браузер делит визуализацию на несколько этапов, названия которых можно использовать для анализа.

Стратегия оптимизации строится на анализе времени загрузки страниц. Его удобно проводить с помощью Navigation Timing API.

Этапы визуализации страницы

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

А пока давайте выясним, что означают эти названия на диаграмме.

  • domLoading. Начальная отметка. В этот момент браузер начинает анализировать первые байты HTML- документа.
  • domInteractive. В это время браузер завершил анализ документа и создал модель DOM.
  • domContentLoaded. К этому моменту модели DOM и CSSOM уже готовы, поэтому ничто не мешает запуску скриптов JavaScript. Это значит, что браузер может приступать к созданию модели визуализации.
    • Если ваш фреймворк JavaScript запускается на этом этапе, вы можете отследить, как долго он выполняется, с помощью меток EventStart и EventEnd.
  • domComplete. К этому моменту обработка завершена, а контент страницы (например, изображения) полностью скачан. Индикатор загрузки перестает вращаться.
  • loadEvent. Сигнал полного завершения загрузки. Его можно использовать в качестве триггера функций и скриптов, добавив в HTML-код событие onload.

В спецификации HTML подробно оговаривается, когда каждое событие должно быть инифиировано, при каких условиях и т. д. Для анализа визуализации нам потребуются только следующие события:

  • domInteractive. Модель DOM готова.
  • domContentLoaded. Модели DOM и CSSOM готовы.
    • Если в HTML-документе нет встроенного кода JavaScript, событие DOMContentLoaded инициируется сразу после domInteractive.
  • domComplete. Страница готова, ее контент загружен.

^

<html>
  <head>
    <title>Critical Path: Measure</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <script>
      function measureCRP() {
        var t = window.performance.timing,
          interactive = t.domInteractive - t.domLoading,
          dcl = t.domContentLoadedEventStart - t.domLoading,
          complete = t.domComplete - t.domLoading;
        var stats = document.createElement('p');
        stats.textContent = 'interactive: ' + interactive + 'ms, ' +
            'dcl: ' + dcl + 'ms, complete: ' + complete + 'ms';
        document.body.appendChild(stats);
      }
    </script>
  </head>
  <body onload="measureCRP()">
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
  </body>
</html>

Этот код на первый взгляд может показаться пугающим, однако на самом деле все очень просто! Navigation Timing API записывает нужные временные отметки, дожидается инициации события onload (после завершения этапов domInteractive, domContentLoaded и domComplete) и вычисляет разницу во времени между отметками. Результат анализа Navigation Timing API

Теперь вы знаете, какие этапы визуализации нужно отслеживать и как вывести результаты на страницу. Кстати, вместо этого можно отправить данные на сервер (в Google Analytics это происходит автоматически), немного изменив код. Так вы сможете отслеживать скорость загрузки и определять, какие страницы необходимо оптимизировать.