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>После применения скрипта Вы должны увидеть:
Вау 😱! Браузеру понадобилось около 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('blocking-styles', 'parsing:css:start', 'parsing:css:end');вместо того что бы считать самостоятельно!
Удобство маркировки
Я сам, а также некоторые другие разработчики предпочитают использовать какое-то пространство имен при настройке меток для организации таксономии для разных меток и типов событий:
performance.mark("fonts:roboto:load");
performance.mark("parsing.head.start");То есть вы просто разделяете пространства имен двоеточием или точкой, и ваши метки приобретают хорошую структуру. Конечно, вы можете использовать что угодно ( 🐰, кого угодно ) Для разделения пространств имен, а не только точки и двоеточия. Не существует единого стандарта для пространства имен меток производительности, и вы можете использовать любой разделитель, который вы хотите использовать, почти как формат CSV.
Получить оценку производительности
Во время разработки
Получить оценки производительности с помощью вашего браузера очень просто:
- Перейти к инструментам разработчика вашего браузера
- Перейти на вкладку «Консоль JavaScript»
- Вставьте performance.getEntriesByType('mark') и готово!
