Пользователь
0,0
рейтинг
1 июля 2014 в 06:35

Разработка → Astrobench: тестирование производительности JavaScript кода tutorial

Bower version

Astrobench

Речь пойдёт о Astrobench, библиотеке, которая поможет сделать ваш код лучше.

Без перформанс тестов зачастую невозможно сделать качественный проект, будь то библиотека, или полноценное веб приложение. Скорость выполнения нашего кода важна. В конечном счёте, именно она влияет на положительный опыт использования вашего продукта.

Самым популярным на сегодняшний день сервисом для тестирования производительности JavaScript'а является jsperf. Главная его фишка в том, что вы легко можете поделиться своими тестами с сообществом, все тесты публичны, имеется базовая версионность, казалось бы все, что нужно. Основан он на той же библиотеке, что и Astrobench — Benchmark.js.

Но, как обычно бывает, главное преимущество jsperf — это же и его недостаток, не всегда нам нужно, чтобы наши тесты уходили в сеть, к тому же, при таком подходе мы не имеем доступа к файлам, находящимся в нашем локальном окружении.

Установка


Скачать библиотеку можно или из github репозитория, или же воспользовавшись пекедж менеджерами, npm или bower, последний вариант настоятельно рекомендую.

$ npm install astrobench --save

или соответственно:

$ bower install astrobench --save

Использование


Главный сценарий использования для меня — это тестирования низкоуровнего кода, который потенциально будет исполняться довольно большое количество раз, к примеру можно посмотреть на тесты для jBone.

Так же ничего не мешает вам писать тесты для целых сценариев, сравнивать производительность прототипов, технологий, подходов и так далее.

Начнём писать тесты


Скачаем astrobnech и создаём HTML документ, где подключим необходимые зависимости и сами тесты.

$ bower install astrobench --save-dev
$ touch test.js
$ EDITOR test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Performance tests</title>
  <!-- Необходимый CSS -->
  <link rel="stylesheet" href="bower_components/astrobench/src/style.css">
</head>
<body>
  <!-- Элемент для инициализации UI -->
  <div id="astrobench"></div>

  <!-- Путь к библиотеке -->
  <script src="bower_components/astrobench/dist/astrobench.js"></script>

  <!-- Список наших тестов -->
  <script src="test.js"></script>
</body>
</html>


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

$ EDITOR test.js

// Набор тестов начинается с вызова глобальной функции `suite`, с двумя параметрами:
// строкой и функцией.
// Строка — это имя для набора тестов, обычно описывает то, что происходит внутри.
// Функция — блок кода, который определяет тесты.
suite('Habra suite', function(suite) {
  var text;

  // Для того, чтобы оставить наши тесты "чистыми" и избежать дублирования кода,
  // имеется глобальная функция `setup`.
  // Как следует из имени, функция выполняется единожды.
  // Вы можете записать данные в объект suite, или просто использовать замыкания,
  // объявив переменные в теле функции suite.
  setup(function() {
    suite.text = 'Hello world';
    text = 'Hello world';
  });

  // Тест определяется вызовом функции `bench`,
  // которая, как и `suite`, принимает строку и функцию.
  // Строка — это заголовок, функция — сам тест.
  bench('String#match', function() {
    !! text.match(/o/);
  });

  // Пример асинхронного теста.
  // Первым аргументом в вызываемую функцию передаётся Deferred объект,
  // вызвав у которого метод .resolve() завершаем тест
  bench('Deferred benchmark', function(deferred) {
    !! /o/.test(suite.text);

    setTimeout(function() {
      deferred.resolve();
    }, 100);
  },
  // Объект с параметрами для теста
  // Больше смотрите на http://benchmarkjs.com/docs#options
  {
    defer: true
  });
});


В итоге мы получим хорошо структурированные тесты, которые можно запускать как по отдельности, так и все сразу:



Счастье


Таких наборов (suites) мы можем создавать необходимое количество, обычно тесты группируются логическими блоками, и всех их в один suite помещать не рекомендуется. Синтаксис у тестов предельно прост и позаимствован из BDD библиотек для тестирования, за что им большое спасибо :)

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

Делайте мир лучше, а код быстрее.

Github репозиторий.
Alexey Kupriyanenko @Upward
карма
20,2
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (8)

  • 0
    Я так понимаю, запускается сиё чудо из браузера и консольной обёртки с нормальным CLI-репортером нету?
    Хотелось бы всё-таки видеть более автоматизированное решение.

    P.S. Либо я чего-то не понимаю, либо картинка не соответствует листингу выше.
    • 0
      Да, обертка в планах, думаю будет полезно для прогона тестов в рамках CI.

      Картинка да, другая, если сбивает с толку, сейчас поменяю)
  • 0
    bench('String#match', function() {
        !! text.match(/o/);
      });
    

    а где здесь «return»? Как оно возвращает/получает значение?
    • 0
      Тест (Benchmark) не должен возвращать значение. В результате мы получаем информацию о том, сколько код внутри теста выполнялся, что именно этот код делает, нам знать не нужно. В итоге мы сравниваем время выполнения всех тестов внутри набора (Suite), и узнаем кто и на сколько быстрее.
      • 0
        Будет интересно если некоторые VM не будут выполнять !!, например, если увидят, что значение не возвращается, а значит и не используется.
        • 0
          Было бы интересно) Толи и у PHP, то ли у Python такие оптимизации кстати есть. Но все JS тесты, который я писал или видел на jsperf, говорят об обратном.
  • 0
    Есть плагни для karmakarma-benchmark,
    кажется делает тоже самое, но имеет интеграцию с karma
    • 0
      Спасибо, выглядит интересно, к сожалению завязано на инфраструктуру кармы.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.