0Pricing
JavaScript Academy · Lección

Introducción al profiling (Node/DevTools): pequeños hábitos de medición

Haga profiling paso a paso: mida con console.time/timeEnd y temporizadores sencillos, encuentre el código crítico, cambie una sola cosa y vuelva a medir.

Introducción al profiling (Node/DevTools): pequeños hábitos de medición es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 3 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 3 lecciones en total.

¿Por qué perfilar?

Objetivo: Mida → cambie → vuelva a medir.

  • Use console.time/timeEnd para medir rápidamente
  • Use una pequeña función auxiliar now() para realizar mediciones manuales
  • Céntrese solo en el código caliente
  • Haga un cambio cada vez
Introducción al profiling (Node/DevTools): pequeños hábitos de medición — ilustración 1

Demostración de console.time

console.time muestra cuánto tardó el bloque etiquetado. Es un excelente primer paso.

// 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);
Introducción al profiling (Node/DevTools): pequeños hábitos de medición — ilustración 2

Función auxiliar para medir manualmente

La medición manual le permite envolver cualquier función y comparar ejecuciones con la misma entrada.

// 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;
});
Introducción al profiling (Node/DevTools): pequeños hábitos de medición — ilustración 3

Encuentre el código caliente

Registre las llamadas y el tiempo para saber en qué parte su aplicación realiza más trabajo; optimice primero la función más activa.

// 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);
Introducción al profiling (Node/DevTools): pequeños hábitos de medición — ilustración 4

Medición antes y después

Mida antes y después de un cambio. Mantenga la misma entrada y compare solo los números.

// 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);
Introducción al profiling (Node/DevTools): pequeños hábitos de medición — ilustración 5

Buenos hábitos de medición

Consejos:

  • Use las mismas entradas en todas las ejecuciones.
  • Ejecute una vez para calentar y después mida.
  • Reduzca los registros durante la medición.
  • Cambie una sola cosa y vuelva a medir.
  • DevTools/Node ofrecen grabadores; empiece con un console.time sencillo.
Introducción al profiling (Node/DevTools): pequeños hábitos de medición — ilustración 6

Cuestionario sobre los conceptos básicos de console.time

Comprobación rápida: herramienta para medir rápidamente.

Introducción al profiling (Node/DevTools): pequeños hábitos de medición — ilustración 7

Resumen

Resumen: Empiece con console.time y una pequeña función auxiliar now(). Encuentre el código caliente, haga un cambio sencillo y vuelva a medir con las mismas entradas.

Introducción al profiling (Node/DevTools): pequeños hábitos de medición — ilustración 8

Preguntas frecuentes

¿La lección «Introducción al profiling (Node/DevTools): pequeños hábitos de medición» es gratis?

Sí — el texto completo de «Introducción al profiling (Node/DevTools): pequeños hábitos de medición» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 3 lecciones en total.

¿Qué aprenderé en «Introducción al profiling (Node/DevTools): pequeños hábitos de medición»?

Haga profiling paso a paso: mida con console.time/timeEnd y temporizadores sencillos, encuentre el código crítico, cambie una sola cosa y vuelva a medir. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 3.

¿Cuánto tiempo toma la lección «Introducción al profiling (Node/DevTools): pequeños hábitos de medición»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Fundamentos de Big-O y rutas calientes y frías (logros para principiantes)
  2. Cómo evitar fugas: closures, temporizadores y referencias
  3. Introducción al profiling (Node/DevTools): pequeños hábitos de medición
← Volver a JavaScript Academy