0
276
2018-12-11

Используйте User Timing API, чтобы измерить реальную производительность своего приложения. Недостающее руководство

Когда-нибудь сталкивались с API User Timing, но не совсем поняли, для чего оно нужно и как его использовать? Давайте измеряем скорость страниц вместе!
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

performance.mark() является частью User Timing API . Можно утверждать, что это самый полезный метод, связанный с производительностью, который мы имеем в браузерах сейчас, потому что возможности его приложений намного превышают просто «отметку метки времени», особенно в сочетании с глубоким пониманием того, как на самом деле работают браузеры.

Основное использование

Чтобы использовать его, просто вызовите performance.mark() и передайте имя метки как параметр в любом коде JavaScript:

performance.mark("fontsLoaded");

Это добавит PerformanceMark к графику производительности . Чтобы удалить метку, вызовите performance.clearMarks() метод:

performance.clearMarks("fontsLoaded");

Однострочные JS, встроенные непосредственно в HTML, также будут полезны:

<p>What a beautiful text</p>
<script>
  performance.mark("afterText");
</script>

Я знаю, что вы думаете: «Эй, JS в основном однопоточный, могу ли я отметить момент, когда браузер достигает точной строки в документе?». По большей части, да, вы можете. Давайте попробуем!

Замеряем скорость

Сначала немного теории 🤓. В большинстве случаев разбор документов и выполнение JS выполняется в одном потоке с учетом структуры документа от первой строки до последней. Когда браузер встречает, скажем, a <link> для таблицы стилей или скрипта, он приостанавливает выполнение, загружает ресурс, на который наткнулся, анализирует и выполняет его, и только затем продолжает анализ и выполнение нижеприведенного материала. Эта концепция - ресурсы, блокирующие рендеринг, - очень важна для достижения быстрого времени рендеринга.

Теперь, не считая оптимизаций, вы можете узнать, сколько времени вы теряете из-за блокировки рендера ресурсами . Посмотрите на этот фрагмент:

<html>
  <head>
  <title>Performance marks demo #1</title>
  <script>performance.mark('parsing:css:start');</script>
  <link rel="stylesheet" href="shiny-style.css">
  <script>performance.mark('parsing:css:end');</script>
  </head>
  <body>
    <p>What a beautiful text</p>
  </body>
</html>

После применения скрипта Вы должны увидеть:

Пример применения performance.mark

Вау 😱! Браузеру понадобилось около 80 мс, чтобы загрузить, проанализировать и применить нашу блестящую таблицу стилей, быстрее, чем мгновение ока . Не так быстро для одного CSS-селектора, который у нас есть.С другой стороны, теперь вы знаете, как определить, как долго рендеринг блокируется ресурсами. Подожди, я сказал measure?

Реальные вычисления

Когда дело доходит до реальных вычислений, нам нравится заставлять компьютеры делать это место нас. Оценки производительности не являются исключением, и у нас есть удобный performance.measure() метод, который хорошо измеряет расстояние между двумя отметками. Давайте добавим его в наш HTML-фрагмент:

<html>
  <head>
  <title>Performance marks demo #2: measures</title>
  <script>performance.mark('parsing:css:start');</script>
  <link rel="stylesheet" href="shiny-style.css">
  <script>
    performance.mark('parsing:css:end');
    performance.measure('blocking-styles', 'parsing:css:start', 'parsing:css:end');
  </script>
  </head>
  <body>
    <p>What a beautiful text</p>
  </body>
</html> 

Должна в консоли получиться такая картина:

 performance.measure

Круто, теперь мы можем только смотреть на

performance.measure('blocking-styles', 'parsing:css:start', 'parsing:css:end');

вместо того что бы считать самостоятельно!

Удобство маркировки

Я сам, а также некоторые другие разработчики предпочитают использовать какое-то пространство имен при настройке меток для организации таксономии для разных меток и типов событий:

performance.mark("fonts:roboto:load");
performance.mark("parsing.head.start");

То есть вы просто разделяете пространства имен двоеточием или точкой, и ваши метки приобретают хорошую структуру. Конечно, вы можете использовать что угодно ( 🐰, кого угодно ) Для разделения пространств имен, а не только точки и двоеточия. Не существует единого стандарта для пространства имен меток производительности, и вы можете использовать любой разделитель, который вы хотите использовать, почти как формат CSV.

Получить оценку производительности

Во время разработки

Получить оценки производительности с помощью вашего браузера очень просто:

  1. Перейти к инструментам разработчика вашего браузера
  2. Перейти на вкладку «Консоль JavaScript»
  3. Вставьте performance.getEntriesByType('mark') и готово!
Статья была переведена для блога TechBlog.SDStudio.top
Источник: ttps://dev.to