Используйте User Timing API, чтобы измерить реальную производительность своего приложения. Недостающее руководство.
performance.mark() является частью User Timing API . Можно утверждать, что это самый полезный метод, связанный с производительностью, который мы имеем в браузерах сейчас, потому что возможности его приложений намного превышают просто «отметку метки времени», особенно в сочетании с глубоким пониманием того, как на самом деле работают браузеры.
Основное использование
Основное использование
Чтобы использовать его, просто вызовите performance.mark() и передайте имя метки как параметр в любом коде JavaScript:
performance.mark("fontsLoaded");
Это добавит PerformanceMark к графику производительности . Чтобы удалить метку, вызовите performance.clearMarks() метод:
performance.clearMarks("fontsLoaded");
Однострочные JS, встроенные непосредственно в HTML, также будут полезны:
Я знаю, что вы думаете: «Эй, JS в основном однопоточный, могу ли я отметить момент, когда браузер достигает точной строки в документе?». По большей части, да, вы можете. Давайте попробуем!
Замеряем скорость
Замеряем скорость
Сначала немного теории. В большинстве случаев разбор документов и выполнение JS выполняется в одном потоке с учетом структуры документа от первой строки до последней. Когда браузер встречает, скажем, a для таблицы стилей или скрипта, он приостанавливает выполнение, загружает ресурс, на который наткнулся, анализирует и выполняет его, и только затем продолжает анализ и выполнение нижеприведенного материала. Эта концепция – ресурсы, блокирующие рендеринг, – очень важна для достижения быстрого времени рендеринга.
Теперь, не считая оптимизаций, вы можете узнать, сколько времени вы теряете из-за блокировки рендера ресурсами . Посмотрите на этот фрагмент:
После применения скрипта Вы должны увидеть:
Браузеру понадобилось около 80 мс, чтобы загрузить, проанализировать и применить нашу блестящую таблицу стилей, быстрее, чем мгновение ока . Не так быстро для одного CSS-селектора, который у нас есть.С другой стороны, теперь вы знаете, как определить, как долго рендеринг блокируется ресурсами. Подожди, я сказал measure?
Реальные вычисления
Реальные вычисления
Когда дело доходит до реальных вычислений, нам нравится заставлять компьютеры делать это место нас. Оценки производительности не являются исключением, и у нас есть удобный performance.measure() метод, который хорошо измеряет расстояние между двумя отметками. Давайте добавим его в наш 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') и готово!
Статья была переведена для блога TechBlog.SDStudio.top
Источник: ttps://dev.to