0Pricing
JavaScript Academy · Lekcja

Wprowadzenie do profilowania (Node/DevTools) — proste nawyki pomiarowe

Profilowanie małymi krokami: pomiary za pomocą console.time/timeEnd i prostych czasomierzy, znajdowanie gorącego kodu, zmiana jednej rzeczy i ponowny pomiar

Wprowadzenie do profilowania (Node/DevTools) — proste nawyki pomiarowe to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 3 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 3 lekcji w sumie.

Dlaczego profilowanie?

Cel: Mierz → zmień → zmierz ponownie.

  • Używaj console.time/timeEnd do szybkiego pomiaru czasu
  • Używaj małej funkcji pomocniczej now() do ręcznych pomiarów czasu
  • Skupiaj się wyłącznie na gorącym kodzie
  • Wprowadzaj jedną zmianę naraz
Wprowadzenie do profilowania (Node/DevTools) — proste nawyki pomiarowe — ilustracja 1

Demonstracja console.time

console.time wypisuje, ile czasu zajęło wykonanie oznaczonego bloku. To świetny pierwszy krok.

// 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);
Wprowadzenie do profilowania (Node/DevTools) — proste nawyki pomiarowe — ilustracja 2

Pomocnicza funkcja do ręcznego pomiaru czasu

Ręczny pomiar czasu pozwala opakować dowolną funkcję i porównywać kolejne uruchomienia dla tych samych danych wejściowych.

// 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;
});
Wprowadzenie do profilowania (Node/DevTools) — proste nawyki pomiarowe — ilustracja 3

Znajdź gorący kod

Śledź liczbę wywołań i czas, aby dowiedzieć się, gdzie aplikacja wykonuje najwięcej pracy; najpierw optymalizuj najbardziej obciążoną funkcję.

// 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);
Wprowadzenie do profilowania (Node/DevTools) — proste nawyki pomiarowe — ilustracja 4

Pomiar przed zmianą i po niej

Wykonaj pomiar przed zmianą i po niej. Zachowaj te same dane wejściowe i porównuj wyłącznie liczby.

// 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);
Wprowadzenie do profilowania (Node/DevTools) — proste nawyki pomiarowe — ilustracja 5

Dobre praktyki pomiaru czasu

Wskazówki:

  • Używaj tych samych danych wejściowych w kolejnych uruchomieniach.
  • Najpierw raz rozgrzej kod, a następnie wykonaj pomiar.
  • Ogranicz liczbę logów podczas pomiaru.
  • Zmień jedną rzecz i wykonaj pomiar ponownie.
  • DevTools/Node mają narzędzia rejestrujące; zacznij od prostego console.time.
Wprowadzenie do profilowania (Node/DevTools) — proste nawyki pomiarowe — ilustracja 6

Quiz: podstawy console.time

Szybkie sprawdzenie: Proste narzędzie do pomiaru czasu.

Wprowadzenie do profilowania (Node/DevTools) — proste nawyki pomiarowe — ilustracja 7

Podsumowanie

Podsumowanie: Zacznij od console.time i małej funkcji pomocniczej now(). Znajdź gorący kod, wprowadź prostą zmianę i zmierz ponownie, używając tych samych danych wejściowych.

Wprowadzenie do profilowania (Node/DevTools) — proste nawyki pomiarowe — ilustracja 8

Często zadawane pytania

Czy lekcja „Wprowadzenie do profilowania (Node/DevTools) — proste nawyki pomiarowe” jest bezpłatna?

Tak — pełny tekst „Wprowadzenie do profilowania (Node/DevTools) — proste nawyki pomiarowe” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 3 lekcji w sumie.

Co nauczysz się w „Wprowadzenie do profilowania (Node/DevTools) — proste nawyki pomiarowe”?

Profilowanie małymi krokami: pomiary za pomocą console.time/timeEnd i prostych czasomierzy, znajdowanie gorącego kodu, zmiana jednej rzeczy i ponowny pomiar Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 3.

Ile czasu zajmuje lekcja „Wprowadzenie do profilowania (Node/DevTools) — proste nawyki pomiarowe”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Podstawy Big-O, ścieżki gorące i zimne (szybkie sukcesy początkujących)
  2. Unikanie wycieków — domknięcia, czasomierze i referencje
  3. Wprowadzenie do profilowania (Node/DevTools) — proste nawyki pomiarowe
← Powrót do JavaScript Academy