🍋
Menu
General

Rendering

Renderizado (generación de salida visual)

El proceso de generar una salida visual o audible a partir de datos estructurados, como convertir HTML y CSS en páginas web visibles, instrucciones PDF en imágenes de página o modelos 3D en píxeles de pantalla.

Detalle técnico

El renderizado del navegador sigue un pipeline: el análisis HTML construye el árbol DOM, el análisis CSS construye el CSSOM, ambos se combinan en el árbol de renderizado, el layout calcula la geometría, el pintado rellena píxeles y la composición estratifica los resultados. El renderizado PDF interpreta operadores del flujo de contenido (posicionamiento de texto, estado gráfico, trazado de rutas) para producir imágenes de página. El renderizado basado en Canvas en herramientas usa el contexto 2D o WebGL para operaciones aceleradas por hardware. El renderizado fuera de pantalla via OffscreenCanvas o Web Workers evita bloquear el hilo principal.

Ejemplo

```javascript
// Rendering: file processing example
const file = document.getElementById('fileInput').files[0];
const reader = new FileReader();
reader.onload = (e) => {
  const data = e.target.result;
  console.log(`Loaded: ${file.name} (${file.size} bytes)`);
};
reader.readAsArrayBuffer(file);
```

Términos relacionados