JS метод Console.timeEnd()

Загальний опис

Метод console.timeEnd() у мові програмування JavaScript є статичним методом об'єкта console, який використовується для завершення вимірювання часу, ініційованого методом console.time(). Цей метод відіграє ключову роль у визначенні тривалості виконання певних операцій у коді, що є важливим для аналізу продуктивності та оптимізації програм. console.timeEnd() виводить час, що пройшов з моменту виклику console.time() з тією ж назвою таймера.

Використання console.timeEnd() є простим, але ефективним способом отримати детальну інформацію про тривалість виконання коду. Цей метод особливо корисний у випадках, коли необхідно визначити, які частини програми споживають найбільше часу, що дозволяє розробникам зосередити свої зусилля на оптимізації саме цих ділянок коду.

Ось простий приклад використання console.time() та console.timeEnd():

console.time("Обчислення");

// Виконання деяких операцій
for (let i = 0; i < 10000; i++) {
    // Певні обчислення або операції
}

console.timeEnd("Обчислення");

У цьому прикладі час виконання циклу буде виміряний і виведений у консоль. Важливо, що ідентифікатор таймера (у цьому випадку "Обчислення") має бути однаковим у console.time() та console.timeEnd(), щоб забезпечити точність вимірювань.

Більш складне застосування може включати вимірювання часу асинхронних операцій, таких як запити до сервера. Приклад:

console.time("ЗапитДоСервера");

fetch('https://example.com/data')
  .then(response => response.json())
  .then(data => {
    // Обробка даних

    console.timeEnd("ЗапитДоСервера");
  });

У цьому випадку console.timeEnd("ЗапитДоСервера") викликається після завершення асинхронного запиту та обробки отриманих даних, надаючи інформацію про загальний час виконання цієї операції.

Важливо зазначити, що при використанні console.timeEnd() без попереднього виклику console.time() з тією ж назвою таймера, у консолі відобразиться повідомлення про помилку. Це слід брати до уваги при розробці складних програм, де можливе паралельне виконання декількох таймерів.

У підсумку, console.timeEnd() є невід'ємною частиною інструментарію JavaScript-розробника для моніторингу та оптимізації продуктивності програми. Цей метод дозволяє точно вимірювати час виконання конкретних ділянок коду, що є критично важливим для створення ефективних та швидких веб-додатків.

Порада:	`console.timeEnd()` ефективний для вимірювання часу виконання скриптів або функцій, особливо при оптимізації продуктивності. Використовуйте його для визначення частин коду, які можуть бути оптимізовані для зменшення загального часу виконання.
Порада:	Підтримуйте чистоту коду, використовуючи `console.timeEnd()` безпосередньо після секцій коду, час виконання яких ви хочете виміряти. Це не тільки полегшує читання коду, але й допомагає уникнути помилок, пов'язаних із забутою міткою чи невідповідністю міток.
Порада:	Подібно до `console.time()`, використовуйте `console.timeEnd()` стримано. Надмірне використання може ускладнити розуміння коду і відлагодження. Оптимально використовуйте цей метод для тимчасового аналізу продуктивності, а не як постійний елемент коду.
Порада:	При використанні `console.timeEnd()`, завжди впевніться, що використовуєте ту саму мітку, яку ви вказали в `console.time()`. Це забезпечить коректне відстеження і завершення таймера. Наприклад, якщо ви ініціювали таймер за допомогою `console.time("завантаження")`, то для зупинки та виведення результату використовуйте `console.timeEnd("завантаження")`.

Синтаксис

timeEnd()
timeEnd(label)

Параметри

label: Рядок, який представляє назву таймера для зупинки. Після зупинки, минулий час автоматично відображається у консолі разом з індикатором, що час завершено. Якщо пропущено, використовується мітка "default".

Return

none: Повертає undefined.

Переглядачі

Переглядач
	2	10	4	11	12

Переглядач
	37	18	10	3.2

Переглядач
	0.10.0	1.0

Приклади

У цьому прикладі, користувач може взаємодіяти з веб-сторінкою, натискаючи на кнопки "Запустити таймер" та "Зупинити таймер". При запуску таймера, console.time("UserTimer") активується, а при зупинці - console.timeEnd("UserTimer") виводить у консоль час, що минув. Це ілюструє роботу console.timeEnd() у реальних умовах.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/mdorooQ">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

Тут ми ініціюємо таймер за допомогою console.time("TimeForSimpleLoop") і зупиняємо його за допомогою console.timeEnd("TimeForSimpleLoop"), після завершення циклу. Важливо, що ідентифікатор, переданий у console.time() і console.timeEnd(), має бути однаковим, щоб точно відстежити та завершити відповідний таймер.

console.time("TimeForSimpleLoop");

for (let i = 0; i < 10000; i++) {
    // Проста ітерація
}

console.timeEnd("TimeForSimpleLoop");

У цьому випадку, ми запускаємо таймер console.time("asyncOperationTime") перед початком асинхронної операції. Після завершення операції, в then() блоку, ми зупиняємо таймер за допомогою console.timeEnd("asyncOperationTime"). Це дозволяє нам визначити час, який зайняла асинхронна операція, і відображаємо його у консолі.

console.time("asyncOperationTime");

function simulateAsyncOperation(duration) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(`Операція завершена за ${duration} мс`);
        }, duration);
    });
}

simulateAsyncOperation(2000).then(result => {
    console.log(result);  // Виводить: 'Операція завершена за 2000 мс'
    console.timeEnd("asyncOperationTime");
});

JS довідник

Events

JavaScript

Statements