JavaScript Academy · Lektion

Introduktion till profilering (Node/DevTools) — små tidsvanor

Profilera stegvis: mät med console.time/timeEnd och enkla timers, hitta het kod, ändra en sak och mät igen.

Lektion 3 av 38 steg

Introduktion till profilering (Node/DevTools) — små tidsvanor är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 3 av 3. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 3 lektioner.

Varför profilera?

Mål: Mät → ändra → mät igen.

  • Använd console.time/timeEnd för snabb tidtagning
  • Använd en liten hjälp funktion now() för manuella mätningar
  • Fokusera bara på varm kod
  • Gör en ändring i taget
Introduktion till profilering (Node/DevTools) — små tidsvanor — illustration 1

Exempel på console.time

console.time skriver ut hur lång tid det märkta kodblocket tog. Ett utmärkt första steg.

// 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);
Introduktion till profilering (Node/DevTools) — små tidsvanor — illustration 2

Hjälpfunktion för manuell tidtagning

Manuell tidtagning hjälper Er att omsluta valfri funktion och jämföra körningar med samma indata.

// 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;
});
Introduktion till profilering (Node/DevTools) — små tidsvanor — illustration 3

Hitta varm kod

Följ anrop och tid för att se var appen utför mest arbete; optimera den varmaste funktionen först.

// 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);
Introduktion till profilering (Node/DevTools) — små tidsvanor — illustration 4

Tidtagning före och efter

Mät före och efter en ändring. Behåll samma indata och jämför endast mätvärdena.

// 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);
Introduktion till profilering (Node/DevTools) — små tidsvanor — illustration 5

Goda vanor vid tidtagning

Tips:

  • Använd samma indata mellan körningarna.
  • Värm upp en gång och mät sedan.
  • Minska mängden loggar under tidtagningen.
  • Ändra en sak och mät igen.
  • DevTools/Node har inspelningsverktyg; börja med enkla console.time.
Introduktion till profilering (Node/DevTools) — små tidsvanor — illustration 6

Quiz om grunderna i console.time

Snabb kontroll: Verktyg för snabb tidtagning.

Introduktion till profilering (Node/DevTools) — små tidsvanor — illustration 7

Sammanfattning

Sammanfattning: Börja med console.time och en liten hjälp funktion now(). Hitta varm kod, gör en enkel ändring och mät igen med samma indata.

Introduktion till profilering (Node/DevTools) — små tidsvanor — illustration 8
Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
59
Lektioner
200

Vanliga frågor

Är lektionen ”Introduktion till profilering (Node/DevTools) — små tidsvanor” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Introduktion till profilering (Node/DevTools) — små tidsvanor”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 3 lektioner.

Vad lär jag mig i ”Introduktion till profilering (Node/DevTools) — små tidsvanor”?

Profilera stegvis: mät med console.time/timeEnd och enkla timers, hitta het kod, ändra en sak och mät igen. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 3.

Hur lång tid tar lektionen ”Introduktion till profilering (Node/DevTools) — små tidsvanor”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. Grunderna i Big-O, heta och kalla kodvägar (nybörjarvinster)
  2. Undvik minnesläckor — closures, timers och referenser
  3. Introduktion till profilering (Node/DevTools) — små tidsvanor
← Tillbaka till JavaScript Academy