Con solo aplicar content-visibility: auto, los elementos que no se ven en pantalla dejan de renderizarse, mejorando la velocidad.
Al asignar auto a un elemento, se aplican layout, style y paint de la especificación CSS Containment y, cuando ese elemento sale de la pantalla, también se aplica size.
→ Cuando sale de la pantalla, los descendientes de ese elemento dejan de dibujarse por completo.
→ Cuando vuelve a acercarse a la pantalla, size se quita y comienza el hit-test.
Con contain-intrinsic-size se puede definir el tamaño que debe dibujarse por defecto. Si no se especifica, es 0.
Si se establece content-visibility: hidden, no se renderiza en absoluto, como si estuviera fuera de la pantalla.
→ Oculta el elemento y mantiene el estado de renderizado, pero si hubo cambios, el renderizado se aplicará cuando vuelva a mostrarse.
→ display:none - Oculta el elemento y destruye el estado de renderizado. Es decir, cuando vuelve a mostrarse es prácticamente como dibujarlo de nuevo.
→ visibility:hidden - Oculta el elemento y mantiene el estado de renderizado. En realidad no se elimina del documento, el elemento sigue ocupando espacio y también puede recibir clics. Está oculto, pero el renderizado continúa.
Aún no hay comentarios.