Pretext: La Librería de 15 kb Que Esquiva la Operación Más Cara del Navegador

Cada vez que llamas a getBoundingClientRect() para medir un elemento de texto, el navegador hace algo brutal en silencio: descarta todo su árbol de layout, recalcula cada posición desde cero y te devuelve un número. Todo ocurre de forma síncrona, en el hilo principal, bloqueando todo lo demás.

Para un blog estático esto no importa. Para una interfaz de chat de IA que hace streaming a 60 fotogramas por segundo — o una lista virtualizada con cientos de elementos de altura variable — es un muro.

Pretext es una librería de 15 kb de Cheng Lou (creador de React Motion, ingeniero senior en Midjourney) que elimina este costo por completo. Mide y compone texto multilínea usando aritmética pura, sin tocar el DOM después de la preparación.

La Idea Central en Un Párrafo

Pretext divide el trabajo en dos fases. prepare() se ejecuta una vez por combinación texto+fuente: usa la API measureText() del Canvas para medir cada segmento de texto y cachea los resultados. layout() se ejecuta tantas veces como necesites: calcula saltos de línea y alturas usando solo aritmética sobre esos anchos cacheados — cero lecturas del DOM, cero reflow. Los cambios de ancho son gratuitos. Las actualizaciones en streaming son gratuitas. El costo de medición se paga una sola vez.

1
import { prepare, layout } from '@chenglou/pretext'
2

3
const prepared = prepare('El reflow de layout es el asesino silencioso del rendimiento.', '16px Inter')
4

5
// Primer ancho — barato
6
const { height, lineCount } = layout(prepared, 320, 24)
7

8
// Ancho diferente — sigue siendo solo aritmética
9
const { height: h2 } = layout(prepared, 480, 24)

Por Qué Importa Ahora

El momento no es accidental. Las aplicaciones de IA que transmiten texto token por token necesitan redimensionar burbujas en cada fotograma. Las listas virtualizadas necesitan predecir alturas antes de que los elementos existan en el DOM. Los layouts de tipo masonry necesitan conocer las alturas antes de colocar las tarjetas. Todos estos patrones eran o poco fluidos o requerían rodeos con contenedores ocultos fuera de pantalla.

Pretext resuelve el problema subyacente en lugar de esquivarlo: tratar el motor de fuentes del navegador como un oráculo durante la preparación, y nunca volver a preguntarle.

Los Números

La ganancia real no está en la velocidad por llamada — está en que layout() nunca ensucia el árbol de layout, así que nunca desencadena la cascada.

Estructura de la Serie

Esta serie cubre pretext desde los fundamentos hasta demos en vivo:

1. El Impuesto del Reflow — qué es realmente el layout reflow, cuándo duele y por qué getBoundingClientRect() es caro
2. Cómo Funciona Pretext — el modelo de dos fases, el oráculo Canvas, el layout aritmético y la API completa
3. Demo React: Chat en Streaming — construyendo un chat de IA en vivo con alturas de burbuja medidas con pretext
4. Matteflow: Texto Alrededor de un Bailarín — un demo editorial completo: texto que fluye alrededor de un sujeto en movimiento, recomputado en cada fotograma con pretext

Empieza con El Impuesto del Reflow →