0Pricing
JavaScript Academy · Lektion

Profiling-Einstieg (Node/DevTools) – kleine Timing-Gewohnheiten

Schrittweise profilieren: mit console.time/timeEnd und einfachen Timern messen, heißen Code finden, eine Sache ändern und erneut messen

Profiling-Einstieg (Node/DevTools) – kleine Timing-Gewohnheiten ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 3 Lektionen.

Warum Profiling?

Ziel: Messen → ändern → erneut messen.

  • Verwenden Sie console.time/timeEnd für eine schnelle Zeitmessung
  • Verwenden Sie eine kleine now()-Hilfsfunktion für manuelle Zeitmessungen
  • Konzentrieren Sie sich nur auf heißen Code
  • Nehmen Sie immer nur eine Änderung vor
Profiling-Einstieg (Node/DevTools) – kleine Timing-Gewohnheiten — Illustration 1

Demo mit console.time

console.time gibt aus, wie lange der markierte Block gedauert hat. Das ist ein guter erster Schritt.

// 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);
Profiling-Einstieg (Node/DevTools) – kleine Timing-Gewohnheiten — Illustration 2

Hilfsfunktion für manuelle Zeitmessung

Mit einer manuellen Zeitmessung können Sie jede Funktion umschließen und mehrere Durchläufe mit derselben Eingabe vergleichen.

// 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;
});
Profiling-Einstieg (Node/DevTools) – kleine Timing-Gewohnheiten — Illustration 3

Heißen Code finden

Verfolgen Sie Aufrufe und Ausführungszeit, um herauszufinden, wo Ihre Anwendung Arbeit verrichtet. Optimieren Sie zuerst die heißeste Funktion.

// 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);
Profiling-Einstieg (Node/DevTools) – kleine Timing-Gewohnheiten — Illustration 4

Zeitmessung vorher und nachher

Messen Sie vor und nach einer Änderung. Verwenden Sie dieselbe Eingabe und vergleichen Sie nur die Zahlen.

// 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);
Profiling-Einstieg (Node/DevTools) – kleine Timing-Gewohnheiten — Illustration 5

Gute Gewohnheiten bei Zeitmessungen

Tipps:

  • Verwenden Sie bei allen Durchläufen die gleichen Eingaben.
  • Führen Sie den Code einmal zum Aufwärmen aus und messen Sie danach.
  • Reduzieren Sie Protokollausgaben während der Messung.
  • Ändern Sie eine Sache und messen Sie erneut.
  • DevTools und Node bieten Aufzeichnungswerkzeuge. Beginnen Sie mit dem einfachen console.time.
Profiling-Einstieg (Node/DevTools) – kleine Timing-Gewohnheiten — Illustration 6

Quiz zu den Grundlagen von console.time

Schnelltest: Werkzeug für schnelle Zeitmessungen.

Profiling-Einstieg (Node/DevTools) – kleine Timing-Gewohnheiten — Illustration 7

Zusammenfassung

Zusammenfassung: Beginnen Sie mit console.time und einer kleinen now()-Hilfsfunktion. Finden Sie heißen Code, nehmen Sie eine einfache Änderung vor und messen Sie mit denselben Eingaben erneut.

Profiling-Einstieg (Node/DevTools) – kleine Timing-Gewohnheiten — Illustration 8

Häufig gestellte Fragen

Ist die Lektion „Profiling-Einstieg (Node/DevTools) – kleine Timing-Gewohnheiten“ kostenlos?

Ja — der vollständige Text von „Profiling-Einstieg (Node/DevTools) – kleine Timing-Gewohnheiten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 3 Lektionen.

Was lerne ich in „Profiling-Einstieg (Node/DevTools) – kleine Timing-Gewohnheiten“?

Schrittweise profilieren: mit console.time/timeEnd und einfachen Timern messen, heißen Code finden, eine Sache ändern und erneut messen Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 3.

Wie lange dauert die Lektion „Profiling-Einstieg (Node/DevTools) – kleine Timing-Gewohnheiten“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Big-O-Grundlagen, Hot Paths vs. Cold Paths (erste Erfolge)
  2. Leaks vermeiden – Closures, Timer und Referenzen
  3. Profiling-Einstieg (Node/DevTools) – kleine Timing-Gewohnheiten
← Zurück zu JavaScript Academy