Как отслеживать производительность веб-приложения с JavaScript и Performance API

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

Цель такой функции – иметь возможность ориентироваться на проекты, работая с которыми пользователи сталкиваются с длительной загрузкой, чтобы оптимизировать конфигурацию своего интерфейса. Это делает навигацию и взаимодействие с приложением плавнее и, таким образом, улучшает взаимодействие с пользователем. Для этого первым делом нужно выяснить, как мы собираемся реализовать такую функцию.

---

В зависимости от используемой среды разработки надстройки могут уже быть установлены. Если вы разработчик React, например, react-addons-per. должен позволить вам отслеживать то, что вы хотите. В Forest Admin мы используем Ember.js, и нет никакой надстройки, подобной React. Поэтому воспользуемся Performance API, который, согласно документации, должен позволить нам сделать именно то, что мы хотим сделать:

Стандарт High Resolution Time определяет интерфейс производительности, который поддерживает измерения задержки на стороне клиента в приложениях. Интерфейсы Performance считаются интерфейсами с высоким разрешением, поскольку имеют точность до тысячных долей миллисекунды (в зависимости от аппаратных или программных ограничений).

II. API Performance

Performance API использует множество разнообразных методов. Нам понадобится всего 5:

• mark;
• measure;
• getEntriesByType;
• clearMarks/clearMeasures.

1. mark

Метод mark позволяет разместить маркер времени. Чтобы сослаться на маркер, требуется только один аргумент (строка), этот метод ничего не возвращает. Позже он позволит рассчитать время.

performance.mark('start');

2. measure

Метод measure позволяет измерить разницу во времени между двумя маркерами. Он принимает 3 аргумента: имя созданного измерителя (строка), маркер начала (строка), маркер конца (строка). Этот метод возвращает объект со свойством duration, которое вычисляет разницу между двумя маркерами.

async function timeDuration() {
    performance.mark('start');
    await new Promise(resolve => setTimeout(resolve, 100))
    performance.mark('end');
  
    return performance.measure('time', 'start', 'end').duration;
  }
  
  timeDuration().then((result) => console.log(result));
  // output: 100

3. getEntriesByType

Метод getEntriesByType позволяет получить доступ ко всем созданным объектам определённого типа. Он возвращает массив объектов и принимает в качестве аргумента тип входных значений (строку) из следующих: frame, navigation, resource, mark, measure, paint, longtask. Не волнуйтесь, нам понадобятся только mark и measure.

performance.getEntriesByType('measure');
    // output: return an Array of Object containing all the measure

4. clearMarks/clearMeasures

Методы clearMarks/clearMeasures используются для удаления ранее добавленных маркеров и измерителей из кеша браузера. Эти методы ничего не возвращают и не принимают никаких аргументов.

III. Давайте углубимся в код

Теперь, когда мы знаем методы реализации функциональности, нам нужно интегрировать её в код. У нас есть два варианта: создать маркеры и проводить измерения прямо в нужных местах кода или создать сервис (time-tracker.js) и вставить его в код. Для наглядности выберем второй вариант.

performance.mark('start');
    performance.mark('end');
    performance.measure('time_duration', 'start', 'end');
    
    console.log(performance.getEntriesByType('mark').length);
    // output: 2
    console.log(performance.getEntriesByType('measure').length);
    // output: 1
    
    performance.clearMarks();
    performance.clearMeasures();
    console.log(performance.getEntriesByType('mark').length);
    // output: 0
    console.log(performance.getEntriesByType('measure').length);
    // output: 0

Всё просто, правда? Теперь нам нужно вызвать сервисные функции в тех местах кода, которые позволят нам отслеживать время загрузки запроса и интерфейса. Для интерфейса маркер timinginterfacestart должен вызываться в начале загрузки страницы. Первым вызывается метод model маршрута, который разместим здесь. Также возможно использовать методы в жизненных циклах компонента или любой другой функции, вызванной изначально. Однако следует соблюдать осторожность при размещении маркера. Если маркер не поставить в нужное место, последующее измерение будет неточным.

import { inject as service } from '@ember/service';

    export default class RouteExample extends Route {
      @service timeTracker;
      
      model() {
        this.timeTracker.startInterface();
        // do something
      }
    }

Для маркера timinginterfacestop он должен вызываться, когда закончен рендеринг приложения. Что касается рендеринга нескольких компонентов, логичным способом является использование методов в жизненных циклах этих компонентов. Метод компонента didRender из ember кажется хорошим кандидатом. Затем идёт измерение общего времени загрузки интерфейса. Его можно разместить после маркера timinginterfacestop или в любом другом желаемом месте.

import { inject as service } from '@ember/service';

    export default class RenderingTracker extends Component {
      @service timeTracker;
    
      didRender() {
        this.timeTracker.stopInterface();
      }
      stopInterfaceTracking() {
        return this.timeTracker.measureTimingInterface()
      }
    }

Для расчёта времени запроса на сервере пользователя достаточно окружить функцию, отвечающую за запрос сервера пользователя, маркерами timingrequeststart и Timingrequeststop. Затем можно измерить время запроса, вызвав метод measureTimingRequest() из нашего сервиса.

import { inject as service } from '@ember/service';

    export default class RouteExample extends Route {
      @service timeTracker;
      
      model() {
        this.timeTracker.startInterface();
        // do something
      }
      
      async function fetchData(params) {
        //do something
      
        this.timeTracker.startRequest();
        const records = await fetchRecords(params);
        this.timingTracker.stopRequest();
        
        const timingRequest = this.timingTracker.measureTimingRequest()
        // do something else
    
      }
    }

Заключение

Надеюсь, вам понравилась эта статья. Есть и другие возможности реализовать эту функцию. Я решил показать вам путь, который имеет для меня больше смысла. API Performance – мощный инструмент, чтобы получить информацию о производительности вашего приложения. Важно знать, сталкиваются ли пользователи с трудностями, когда просматривают ваше приложение. Более того, это позволяет вам заранее нацеливаться на проблемы, чтобы решать эти проблемы и улучшать взаимодействие с пользователем. Следующим шагом может быть интеграция дополнительного электронного письма для пользователей, время загрузки у которых превышает пороговое значение, чтобы эти пользователи могли выбрать определённые параметры оптимизации.

---

• Профессия Веб-разработчик
• Профессия QA-инженер на JAVA