TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

1 339

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 для таблицы стилей или скрипта, он приостанавливает выполнение, загружает ресурс, на который наткнулся, анализирует и выполняет его, и только затем продолжает анализ и выполнение нижеприведенного материала. Эта концепция – ресурсы, блокирующие рендеринг, – очень важна для достижения быстрого времени рендеринга.

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

<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

Источник записи:

Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее