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

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

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

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

Красота подхода «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 в режиме продакшена. Это можно сделать, запустив сервер с параметром EMBER_ENV=production.

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

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

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

Если изменение слишком велико для этого, вы можете клонировать Discourse во вторую директорию и запустить второй экземпляр Rails.

EMBER_ENV=production UNICORN_PORT=3001 bin/dev

И тогда вашими двумя URL-адресами станут:

http://localhost:3000
http://localhost:3001

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

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

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

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

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

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

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

По завершении вы должны увидеть сравнение производительности до и после изменений.

image
image1500×412 98.9 KB

Оговорки

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

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

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

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

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

17 лайков