Использование «тахометра» Google для измерения изменений производительности JS в Discourse

Документация Руководства для разработчиков
1

При работе над клиентской частью в ядре Discourse, плагинах или темах важно учитывать влияние на производительность. Проект Google «Tachometer» предоставляет инструмент для статистически строгого бенчмаркинга, который позволяет точно оценить эффект от внесённых изменений.

По сути, этот инструмент принимает список URL-адресов и загружает их по принципу «круговой очереди» (round-robin). При каждой загрузке страницы производится измерение производительности. После сотен или тысяч итераций формируется таблица сравнения.

Преимущество такого подхода «круговой очереди» заключается в том, что он помогает снизить влияние внешних факторов на результаты измерений.

Шаг 1: Добавьте performance.measure()

Подход будет зависеть от того, что именно вы тестируете. Однако в основе лежит одно: вам необходимо внедрить значение performance.measure(), которое сможет прочитать Tachometer.

Если вы хотите измерить время, необходимое для запуска и отрисовки Discourse, можно использовать встроенное измерение «discourse-init-to-paint». Для всего остального вы можете создать собственное performance.measure и использовать его.

Проверить работоспособность можно во вкладке «Performance» в инструментах разработчика вашего браузера:

SCR-20240529-rlhj
SCR-20240529-rlhj1234×176 9.92 KB

Если вы пытаетесь измерить действие, требующее взаимодействия пользователя (например, открытие меню), это можно реализовать, добавив в инициализатор код, который нажмёт кнопку через 1 секунду после загрузки страницы:

setTimeout(() => document.querySelector(".my-button").click(), 1000);

Шаг 2: Определите URL-адреса для тестирования

Сначала убедитесь, что вы собираете ресурсы Ember в режиме production. Это можно сделать, запустив сервер с переменной окружения EMBER_ENV=production.

Чтобы получить два разных URL-адреса, существует два основных подхода:

Если ваше изменение достаточно мало, чтобы его можно было легко контролировать с помощью флага функции, добавьте логику для переключения его состояния на основе параметра запроса URL. Тогда ваши два URL-адреса могут выглядеть так:

http://localhost:4200?flag=before
http://localhost:4200?flag=after

Если изменение слишком велико для такого подхода, вы можете клонировать Discourse во вторую директорию и запустить вторую копию ember-cli. Её можно проксировать к тому же серверу Rails с помощью команды:

EMBER_ENV=production pnpm ember serve --port 4201 --proxy http://localhost:3000

Тогда ваши два URL-адреса будут:

http://localhost:4200
http://localhost:4201

Если вы выбираете этот подход, убедитесь, что обе копии приложения содержат телеметрию производительности, внедрённую на шаге 1 этого руководства.

Шаг 3: Настройте Tachometer

Вот мой файл bench.json, который выполнит 300 замеров для каждой цели:

{
  "timeout": 5,
  "sampleSize": 300,
  "benchmarks": [
    {
      "measurement": {
        "mode": "performance",
        "entryName": "discourse-init-to-paint"
      },
      "expand": [
        {
          "url": "http://localhost:4200",
          "name": "before"
        },
        {
          "url": "http://localhost:4201",
          "name": "after"
        }
      ]
    }
  ]
}

Шаг 4: Запустите бенчмарк

Чтобы снизить уровень шума, остановите все несвязанные процессы на вашей рабочей станции, а затем запустите бенчмарк командой:

npx tachometer@latest --config ./bench.json

После завершения вы увидите сравнение производительности «до» и «после».

image
image1500×412 98.9 KB

Ограничения

Как и в любом подобном эксперименте, стоит учитывать его ограничения. Например:

  • Различия в производительности на вашей рабочей станции могут не соответствовать результатам в других браузерах или на других устройствах.

  • Процесс запуска Discourse через прокси Ember-CLI не полностью идентичен процессу в production-среде. При внесении структурных изменений (например, обновлений фреймворка) это может быть важно.

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

Этот документ находится под версионным контролем — предлагайте изменения на GitHub.

17 лайков