Много раз мы сталкиваемся с ситуацией, когда нам нужно следить за временем выполнения функций или кода, который мы пишем. Будь то API, который медленно отвечает, или любая функция, выполнение которой занимает больше времени.
В этой статье мы увидим, как мы можем отслеживать время, затрачиваемое функцией или даже строкой кода, используя встроенный модуль производительности JavaScript.
Если вы используете TypeScript, этот же модуль можно использовать и там.
Если вы используете объектно-ориентированный подход в TypeScript, в конце у меня есть для вас бонусный совет.
Начнем с файла JavaScript.
Вот вывод кода:
Что мы уже видели?
- Модуль производительности запускает таймер, как только начинается выполнение приложения.
- В любой момент времени мы можем узнать время, прошедшее с момента выполнения, с помощью функции performance.now().
- Чтобы рассчитать время выполнения для конкретной функции, мы можем сохранить прошедшее время до и после выполнения. В конце вычтите время окончания из времени начала, чтобы получить время выполнения нужных строк кода.
Теперь давайте посмотрим, как это работает, когда мы используем его с TypeScript.
Вот вывод приведенного выше кода.
Мы видим, что модуль производительности работает так же, как и для JavaScript.
Бонус: сократите количество строк кода с помощью декораторов
Если у вас также есть код TypeScript, написанный в объектно-ориентированном формате, как у меня, это может быть вам полезно.
Мы можем просто создать функцию-декоратор и поместить вызов прямо над определением функции. Таким образом, декоратор всегда будет вызываться при вызове исходной функции, и мы можем каждый раз устранять строки расчета времени.
Позвольте мне показать вам пример.
Это класс, в котором есть все функции (главный файл приложения).
Это функция декоратора
Вот результат
Что мы здесь увидели?
Вычисления времени перенесены в функцию profilerDecorator в файл profilerDecorator.ts.
- Вызов profilerDecorator добавляется к нужной функции с помощью инструкции «@profilerDecorator» непосредственно над функцией.
- Закомментированные операторы в основном файле теперь удалены. Тем самым сократив количество строк кода.
- Добавление профилировщика к функции стало проще. Просто добавьте «@profilerDecorator» над определением функции.
Небольшая настройка для запуска декораторов в TypeScript
- Измените файл tsconfig.json таким образом, чтобы присутствовал параметр «experimentalDecorators»:true. Я прикрепил правильный файл tsconfig.json в конце этого раздела.
- Декораторы не работают со стрелочными функциями. Нам нужно использовать обычные функции внутри класса для работы декораторов.
Ниже приведен файл tsconfig.json для справки.
Профилирование — один из важнейших аспектов программирования. Я надеюсь, что это полезно и быстрый способ отладки производительности.
Пожалуйста, хлопните в ладоши, если вам это понравилось. Также, пожалуйста, добавляйте свои отзывы в комментариях.
Спасибо и удачной отладки!
