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

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

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

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

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

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

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

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

// Install
npm install perfume.js --save-dev // Импорт библиотеки
// Импорт сгенерированного пакета для использования всей библиотеки, сгенерированной этим стартером:
import Perfume from 'perfume.js'; // Импорт транспилированных модулей из `dist/es` в случае, если у вас модульная библиотека:
import Perfume from 'node_modules/perfume.js/dist/es/perfume'; // Универсальное определение модуля:
import Perfume from 'node_modules/perfume.js/perfume.umd.js';

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

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

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

const perfume = new Perfume({ firstContentfulPaint: true
});
// Perfume.js: First Contentful Paint 2029.00 ms

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

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

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

const perfume = new Perfume({ timeToInteractive: true
});
// Perfume.js: Time to interactive 2452.07 ms

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

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

perfume.start('fibonacci');
fibonacci(400);
perfume.end('fibonacci'); // Perfume.js: fibonacci 0.14 ms

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

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

perfume.start('togglePopover');
$(element).popover('toggle');
perfume.endPaint('togglePopover'); // Perfume.js: togglePopover 10.54 ms

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

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

const perfume = new Perfume({ logPrefix: "Beerjs:"
});
perfume.start('fibonacci');
fibonacci(400);
const duration = this.perfume.end('fibonacci');
perfume.log('Custom logging', duration); // Beerjs: Custom logging 0.14 ms

Google Analytics

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

const perfume = new Perfume({ googleAnalytics: { enable: true, timingVar: "userId" }
});

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

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

const options = { firstPaint: false, firstContentfulPaint: false, timeToInteractive: false, googleAnalytics: { enable: false, timingVar: "name", }, logging: true, logPrefix: "⚡️ Perfume.js:"
};

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

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

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

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