Artículos para quien
entrega el stack
Textos sobre React, Node.js, TypeScript y AI. El cuerpo traducido se muestra cuando existe. Si no, ve el texto en inglés y una nota que lo dice.
Etiqueta: Browser Rendering
Omitir la renderización fuera de pantalla con content-visibility y contain-intrinsic-size
Aprenda cómo la visibilidad del contenido: auto reduce el costo de diseño en páginas largas generadas por servidor, por qué es obligatorio utilizar contain-intrinsic-size, y cómo se compara con la virtualización.
12 min de lecturaPiense en la invalidación: un modelo práctico de cómo los navegadores renderizan las páginas
Aprenda a razonar sobre el renderizado del navegador preguntándose qué invalida cada cambio, desde los problemas de layout y el costo de dibujo hasta la composición, la hidratación y la transmisión en tiempo real.
11 min de lecturaDe la hoja de estilos a la pantalla: dónde encaja CSS en el proceso del navegador
Sigue el proceso del CSS desde su descarga hasta los píxeles: cómo se construyen el DOM, CSSOM y el árbol de renderizado, dónde tiene lugar la cascada de estilos y qué fuentes de estilo compiten por cada elemento.
8 min de lecturaDe 66% a 185px: Cómo resuelven los navegadores los valores CSS antes del diseño
Sigue el valor CSS a través de las etapas declarada, en cascada, especificada, calculada, utilizada y real, y comprende por qué las unidades relativas y el truco de conversión a rem se comportan de la manera en que lo hacen.
8 min de lecturaCómo elige el Cascade al ganador: importancia, especificidad y orden de las fuentes
Vea cómo los navegadores resuelven las declaraciones CSS conflictivas, cómo leer la especificidad como una comparación de cuatro partes, y por qué las reglas hover y !important a menudo le sorprenden.
11 min de lecturaDe dónde provienen los valores CSS cuando se establece “None”: cómo funciona la herencia
Aprenda cómo deciden los navegadores si una propiedad hereda, por qué los hijos reciben el valor calculado del padre, y cómo inherit e initial le brindan un control explícito.
10 min de lecturaReflujo, repintado, composición: cuánto cuesta al navegador cada cambio en CSS
Acompaña a HTML y CSS a través del DOM, CSSOM, el diseño, el dibujo y la composición, y aprende por qué los cambios de ancho son más costosos que los cambios de color y cómo evitar problemas en el diseño.
16 min de lecturaColecciones DOM en tiempo real, problemas de diseño y la explicación de la brecha de atributos
El DOM es un árbol en tiempo real. Por qué los bucles de JavaScript en colecciones en tiempo real omiten elementos, cómo las lecturas y escrituras provocan cambios constantes en el diseño, y cuándo se necesita getAttribute.
6 min de lecturaExplicación de la renderización en React: Actualizaciones de estado a píxeles de pantalla
Cómo las fases de renderizado, reconciliación y confirmación de React se conectan con el renderizado del navegador: layout, pintado y composición, desde una actualización de estado hasta los píxeles reales de la pantalla.
17 min de lectura
Sobre estos artículos
Presupuesto en 24 h
¿Necesitas el mismo stack en una capa de operador? Envía el brief — presupuesto en 24 h.