★★★★★Junior🔥 Fundamental
DOM y BOM
El DOM representa el documento; el BOM agrupa APIs del entorno del navegador como location, history y navigator.
10–15 min
🟢 Base🟡 Entrevista🔴 Senior
Qué debes entender
El DOM representa el documento; el BOM agrupa APIs del entorno del navegador como location, history y navigator.
Cómo funciona
El parser construye nodos DOM. Modificar el árbol puede invalidar estilo y layout; no cada cambio implica inmediatamente un repaint.
Ejemplo
document.querySelector("#title").textContent = "Ready";
history.pushState({}, "", "/ready");
ResultadoCambia texto y URL sin recargar
Qué está pasando
La primera operación modifica DOM; la segunda usa History API del entorno.
Pregunta típica
¿DOM es parte de JavaScript?
Respuesta Senior
No. Es una API del navegador expuesta a JavaScript; también existen otros runtimes sin DOM.
Repasar
Web APIsparsinghistory
★★★★★Junior → Senior🔥 Muy preguntado
Bubbling, capturing y delegation
Los eventos recorren captura, target y bubbling. La delegación aprovecha bubbling para manejar muchos descendientes desde un ancestro estable.
10–15 min
🟢 Base🟡 Entrevista🔴 Senior
Qué debes entender
Los eventos recorren captura, target y bubbling. La delegación aprovecha bubbling para manejar muchos descendientes desde un ancestro estable.
Cómo funciona
event.target es el origen; currentTarget es el nodo cuyo listener se ejecuta. Algunos eventos no burbujean o tienen alternativas.
Ejemplo
list.addEventListener("click", e => {
const button = e.target.closest("button[data-id]");
if (button) console.log(button.dataset.id);
});
ResultadoImprime el id del botón pulsado
Qué está pasando
Un listener sirve para botones actuales y futuros, reduciendo suscripciones y simplificando contenido dinámico.
Pregunta típica
¿Cuándo no usarías delegación?
Respuesta Senior
Si el evento no burbujea adecuadamente, necesito aislamiento estricto o el árbol hace costosa/ambigua la búsqueda del target.
Repasar
targetcurrentTargetpropagation
★★★★★Mid → Senior🔥 Senior
Critical rendering path
El navegador parsea HTML y CSS, construye DOM/CSSOM, calcula estilos, layout, paint y composición.
10–15 min
🟢 Base🟡 Entrevista🔴 Senior
Qué debes entender
El navegador parsea HTML y CSS, construye DOM/CSSOM, calcula estilos, layout, paint y composición.
Cómo funciona
JavaScript puede bloquear parsing; CSS bloquea render. Layout calcula geometría, paint dibuja y compositor combina capas.
Ejemplo
element.style.width = "200px";
console.log(element.offsetWidth);
ResultadoPuede forzar layout síncrono
Qué está pasando
Leer geometría después de escribir estilos obliga al navegador a actualizar layout para devolver un valor correcto.
Pregunta típica
¿Qué es layout thrashing?
Respuesta Senior
Alternar escrituras y lecturas geométricas en un loop, forzando layouts repetidos. Agruparía lecturas y escrituras o usaría requestAnimationFrame.
Repasar
reflowrepaintcompositor
★★★★★Mid🔥 Performance
requestAnimationFrame y main thread
requestAnimationFrame agenda trabajo antes del siguiente paint. Es adecuado para animaciones ligadas a frames, no para tareas largas.
10–15 min
🟢 Base🟡 Entrevista🔴 Senior
Qué debes entender
requestAnimationFrame agenda trabajo antes del siguiente paint. Es adecuado para animaciones ligadas a frames, no para tareas largas.
Cómo funciona
El callback corre en el main thread. Si supera el presupuesto del frame, la animación se entrecorta.
Ejemplo
function frame() {
box.style.transform = `translateX(${x++}px)`;
requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
ResultadoMovimiento coordinado con paint
Qué está pasando
transform suele evitar layout y el navegador sincroniza actualizaciones con frames visibles.
Pregunta típica
¿Por qué rAF es mejor que setInterval para animar?
Respuesta Senior
Se alinea con el ciclo de pintura, se pausa normalmente en pestañas ocultas y evita producir frames inútiles.
Repasar
framestransformscompositor
★★★★★Senior🔥 Escalabilidad
Web Workers
Un Worker ejecuta JavaScript en otro hilo y evita bloquear la UI. No accede directamente al DOM.
10–15 min
🟢 Base🟡 Entrevista🔴 Senior
Qué debes entender
Un Worker ejecuta JavaScript en otro hilo y evita bloquear la UI. No accede directamente al DOM.
Cómo funciona
La comunicación usa mensajes y structured clone; Transferable Objects evitan copiar ciertos buffers.
Ejemplo
worker.postMessage(largeBuffer, [largeBuffer]);
ResultadoEl buffer se transfiere al worker
Qué está pasando
La propiedad del ArrayBuffer cambia sin copiar su contenido, útil para procesamiento pesado.
Pregunta típica
¿Qué moverías a un Web Worker?
Respuesta Senior
Cálculos CPU intensivos, parsing grande, compresión o procesamiento de imágenes; no requests simples que ya son asíncronos.
Repasar
main threadstructured clonetransferables