Библиотеки JavaScript: Perfume.js

Библиотеки JavaScript: Perfume.js

От автора: в библиотеки JavaScript входит Perfume.js, необходимая для измерения Коротких и Длинных скриптов, Первого отображения (FP / FCP), Времени до взаимодействия (TTI), Первого отображения компонента (CFM), аннотирования их во временной шкале DevTools и представления результатов в Google Analytics.

Ориентированные на пользователя показатели производительности

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

Это происходит? Это полезно? Это красиво? Чтобы понять, когда страница предоставляет эту обратную связь своим пользователям, мы определили несколько новых показателей:

Первое отображение (FP)

Первое информативное отображение (FCP)

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Время до взаимодействия (TTI)

Первое отображение компонента (CFP)

К счастью, с добавлением нескольких новых API-интерфейсов браузера, измерение этих показателей на реальных устройствах, наконец, возможно без большого количества хаков или обходных решений, которые могут ухудшить производительность.
Perfume используют эти новые API для измерения производительности!

Библиотеки JavaScript: Perfume.js

Установка и импорт

NPM https://www.npmjs.com/package/perfume.js

Первое информативное отображение (FCP)

Этот показатель указывает точку сразу после перехода на страницу, когда браузер отображает на экране пиксели. Это важно для пользователя, потому что это дает ответ на его вопрос: происходит ли это?

FCP отмечает точку, когда браузер отображает первый бит контента из DOM, он может представлять собой текст, изображение, SVG или даже элемент. Результат: Perfume.js: First Contentful Paint 559.40 ms

Время до первого взаимодействия (TTI)

Показатель обозначает точку, в которой ваше приложение визуализируется и может надежно реагировать на ввод пользователя. Приложение может не реагировать на ввод пользователя по нескольким причинам:

JavaScript, необходимый для работы компонентов на странице, еще не загружен;

Есть длинные задачи, блокирующие основной поток.

Показатель TTI идентифицирует точку, в которой исходный JavaScript загружен, и основной поток переходит в состояние ожидания (отсутствуют продолжительные задачи). Результат: Perfume.js: Time to interactive 1213.40 ms

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Аннотация показателей в DevTools

Performance.mark (User Timing API) используется для создания определенной для приложения записи производительности в буфере записей производительности браузера.

Библиотеки JavaScript: Perfume.js

Первое отображение компонента (CFP)

Этот показатель указывает точку сразу после создания нового компонента, когда браузер отображает на экране пиксели.

Пользовательское ведение журнала логов

Сохраните продолжительность и выведите ее именно так, как вам нужно.

Google Analytics

Чтобы подключить возможность отправки Perfume ваших показателей в Google Analytics User timing, установите параметр enable: true и пользовательскую переменную timingVar:»name».

Библиотеки JavaScript: Perfume.js

Параметры по умолчанию

Параметры по умолчанию для конструктора Perfume.js.

Авторские права и лицензия

Код и документация об авторских правах 2018 Леонардо Циззамия. Код выпущен под лицензией MIT. Документы выпущены под лицензией Creative Commons.

Источник: http://zizzamia.github.io/

Редакция: Команда webformyself.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Курс по Git и Github

Прямо сейчас посмотрите курс по Git и Github

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree