0Pricing
JavaScript Academy · Урок

Введение в профилирование (Node/DevTools) — простые привычки измерения времени

Профилируйте небольшими шагами: измеряйте время с помощью console.time/timeEnd и простых таймеров, находите горячий код, меняйте что-то одно и измеряйте повторно

«Введение в профилирование (Node/DevTools) — простые привычки измерения времени» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 3 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 3 уроков всего.

Зачем профилировать?

Цель: измерить → изменить → измерить снова.

  • Используйте console.time/timeEnd для быстрого измерения времени
  • Используйте небольшую вспомогательную функцию now() для ручных измерений
  • Сосредоточьтесь только на горячем коде
  • Вносите по одному изменению за раз
Введение в профилирование (Node/DevTools) — простые привычки измерения времени — иллюстрация 1

Демонстрация console.time

console.time выводит, сколько времени занял блок с указанной меткой. Это отличный первый шаг.

// Measure a small loop with console.time/timeEnd
console.time("sum");
let s = 0;
for (let i = 0; i < 100000; i = i + 1) {
  s = s + i;
}
console.timeEnd("sum");
console.log("sum value:", s);
Введение в профилирование (Node/DevTools) — простые привычки измерения времени — иллюстрация 2

Вспомогательная функция для ручного измерения времени

Ручное измерение времени позволяет оборачивать любую функцию и сравнивать запуски с одинаковыми входными данными.

// A tiny now() helper that works in many runtimes
const now = (typeof performance !== "undefined" && performance.now)
  ? function () { return performance.now(); }
  : function () { return Date.now(); };

// Time a function manually
function timeFn(label, fn) {
  const t1 = now();
  const out = fn();
  const t2 = now();
  console.log(label + " ms:", (t2 - t1));
  return out;
}

timeFn("small work", function () {
  let x = 0;
  for (let i = 0; i < 50000; i = i + 1) { x = x + i; }
  return x;
});
Введение в профилирование (Node/DevTools) — простые привычки измерения времени — иллюстрация 3

Найдите горячий код

Отслеживайте вызовы и время, чтобы понять, на что приложение тратит ресурсы; сначала оптимизируйте самую горячую функцию.

// Count calls and total time to find hot spots
const metrics = { calls: 0, totalMs: 0 };

function hotWork(n) {
  const t1 = now();
  let sum = 0;
  for (let i = 0; i < n; i = i + 1) {
    sum = sum + (i % 3);
  }
  const t2 = now();
  metrics.calls = metrics.calls + 1;
  metrics.totalMs = metrics.totalMs + (t2 - t1);
  return sum;
}

// Simulate usage
for (let k = 0; k < 5; k = k + 1) {
  hotWork(80000);
}
console.log("calls:", metrics.calls, "avg ms:", metrics.totalMs / metrics.calls);
Введение в профилирование (Node/DevTools) — простые привычки измерения времени — иллюстрация 4

Измерение до и после изменения

Измерьте результат до и после изменения. Используйте одинаковые входные данные и сравнивайте только числа.

// Compare two approaches with the same input
const hay = [];
for (let i = 0; i < 2000; i = i + 1) { hay.push(String(i)); }

const needles = [];
for (let i = 0; i < 1000; i = i + 1) { needles.push(String(i * 2)); }

function slowIncludes() {
  let count = 0;
  for (const n of needles) {
    if (hay.includes(n)) { count = count + 1; }
  }
  return count;
}

function fastSet() {
  const set = new Set(hay);
  let count = 0;
  for (const n of needles) {
    if (set.has(n)) { count = count + 1; }
  }
  return count;
}

const c1 = timeFn("includes run", slowIncludes);
const c2 = timeFn("set.has run", fastSet);
console.log("counts:", c1, c2);
Введение в профилирование (Node/DevTools) — простые привычки измерения времени — иллюстрация 5

Хорошие привычки при измерении времени

Советы:

  • Используйте одинаковые входные данные в разных запусках.
  • Один раз прогрейте код, затем измеряйте.
  • Сократите ведение журнала на время измерений.
  • Измените что-то одно и измерьте повторно.
  • В DevTools и Node есть средства записи; начните с простого console.time.
Введение в профилирование (Node/DevTools) — простые привычки измерения времени — иллюстрация 6

Викторина об основах console.time

Быстрая проверка: быстрый инструмент измерения времени.

Введение в профилирование (Node/DevTools) — простые привычки измерения времени — иллюстрация 7

Итоги

Итоги: начните с console.time и небольшой вспомогательной функции now(). Найдите горячий код, внесите простое изменение и измерьте повторно с теми же входными данными.

Введение в профилирование (Node/DevTools) — простые привычки измерения времени — иллюстрация 8

Часто задаваемые вопросы

Урок «Введение в профилирование (Node/DevTools) — простые привычки измерения времени» бесплатный?

Да — полный текст урока «Введение в профилирование (Node/DevTools) — простые привычки измерения времени» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 3 уроков всего.

Чему я научусь в уроке «Введение в профилирование (Node/DevTools) — простые привычки измерения времени»?

Профилируйте небольшими шагами: измеряйте время с помощью console.time/timeEnd и простых таймеров, находите горячий код, меняйте что-то одно и измеряйте повторно Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 3.

Сколько времени занимает урок «Введение в профилирование (Node/DevTools) — простые привычки измерения времени»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Основы Big-O, горячие и холодные участки (полезные приёмы для начинающих)
  2. Как избегать утечек — замыкания, таймеры и ссылки
  3. Введение в профилирование (Node/DevTools) — простые привычки измерения времени
← Назад к JavaScript Academy