{"id":81823,"date":"2022-10-16T11:28:47","date_gmt":"2022-10-16T09:28:47","guid":{"rendered":"https:\/\/rmarketingdigital.com\/development\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\/"},"modified":"2020-09-16T15:07:08","modified_gmt":"2020-09-16T18:07:08","slug":"la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/fr\/dev\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\/","title":{"rendered":"La nouvelle propri\u00e9t\u00e9 CSS qui am\u00e9liore vos performances de rendu"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table des mati\u00e8res<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Basculer la table des mati\u00e8res\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Basculer<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\/#Soporte-de-navegador\" >Prise en charge du navigateur<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\/#Contencion-CSS\" >Contenci\u00f3n CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\/#Omitir-el-trabajo-de-renderizado-con-content-visibility\" >Omitir el trabajo de renderizado con content-visibility<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\/#Ejemplo-un-blog-de-viajes\" >Ejemplo: un blog de viajes<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\/#Especificar-el-tamano-natural-de-un-elemento-con-contain-intrinsic-size\" >Especificar el tama\u00f1o natural de un elemento con contain-intrinsic-size<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\/#Ocultar-contenido-con-content-visibility-hidden\" >Ocultar contenido con content-visibility: hidden<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\/#Conclusion\" >conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          Mejore el tiempo de carga inicial omitiendo la representaci\u00f3n de contenido fuera de la pantalla.\n        <\/p>\n<p>\n          <time>5 ao\u00fbt 2020<\/time><\/p>\n<\/header>\n<p>Les<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/drafts.csswg.org\/css-contain\/#propdef-content-visibility\"><code>content-visibility<\/code><\/a><\/p>\n<p>, lanzada en Chromium 85, podr\u00eda ser una de las nuevas propiedades CSS m\u00e1s impactantes para mejorar el rendimiento de carga de la p\u00e1gina. <code>content-visibility<\/code> permite al agente de usuario omitir el trabajo de renderizado de un elemento, incluido el dise\u00f1o y la pintura, hasta que sea necesario.  Debido a que se omite el procesamiento, si una gran parte de su contenido est\u00e1 fuera de la pantalla, aprovechar la <code>content-visibility<\/code> hace que la carga inicial del usuario sea mucho m\u00e1s r\u00e1pida.  Tambi\u00e9n permite interacciones m\u00e1s r\u00e1pidas con el contenido en pantalla.  Con buena pinta.<\/p>\n<figure class=\"w-figure\">\n  <img alt='demo-9654979' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/demo-9654979.jpg'><figcaption class=\"w-figcaption\">\n<p>    En nuestro art\u00edculo de demostraci\u00f3n, aplicando <code>content-visibility: auto<\/code> a \u00e1reas de contenido fragmentadas da una <b>7 veces<\/b> aumento del rendimiento de renderizado en la carga inicial.  Siga leyendo para obtener m\u00e1s informaci\u00f3n.<br \/>\n  <\/figcaption><\/figure>\n<h2 id=\"support\"><span class=\"ez-toc-section\" id=\"Soporte-de-navegador\"><\/span>Prise en charge du navigateur <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><code>content-visibility<\/code>  se basa en primitivas dentro del <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/drafts.csswg.org\/css-contain\/\">la especificaci\u00f3n de contenci\u00f3n de CSS<\/a>. Alors que <code>content-visibility<\/code> solo es compatible con Chromium 85 por ahora (y se considera <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/mozilla\/standards-positions\/issues\/135\">\u00abvale la pena hacer un prototipo\u00bb<\/a> para Firefox), la especificaci\u00f3n de contenci\u00f3n se admite en <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/caniuse.com\/#feat=css-containment\">la mayor\u00eda de los navegadores modernos<\/a>.<\/p>\n<h2 id=\"containment\"><span class=\"ez-toc-section\" id=\"Contencion-CSS\"><\/span>Contenci\u00f3n CSS <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>El objetivo clave y general de la contenci\u00f3n de CSS es permitir mejoras en el rendimiento de la representaci\u00f3n del contenido web al proporcionar <strong>aislamiento predecible de un sub\u00e1rbol DOM<\/strong> del resto de la p\u00e1gina.<\/p>\n<p>B\u00e1sicamente, un desarrollador puede decirle a un navegador qu\u00e9 partes de la p\u00e1gina est\u00e1n encapsuladas como un conjunto de contenido, lo que permite a los navegadores razonar sobre el contenido sin necesidad de considerar el estado fuera del sub\u00e1rbol.  Saber qu\u00e9 partes de contenido (sub\u00e1rboles) contienen contenido aislado significa que el navegador puede tomar decisiones de optimizaci\u00f3n para la representaci\u00f3n de la p\u00e1gina.<\/p>\n<p>Hay cuatro tipos de <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/updates\/2016\/06\/css-containment\">Contenci\u00f3n CSS<\/a>, cada uno un valor potencial para el <code>contain<\/code> Propiedad CSS, que se puede combinar en una lista de valores separados por espacios:<\/p>\n<ul>\n<li><code>Taille<\/code>: La contenci\u00f3n de tama\u00f1o en un elemento asegura que la caja del elemento se pueda colocar sin necesidad de examinar sus descendientes.  Esto significa que potencialmente podemos omitir el dise\u00f1o de los descendientes si todo lo que necesitamos es el tama\u00f1o del elemento.<\/li>\n<li><code>disposition<\/code>: Contenci\u00f3n de dise\u00f1o significa que los descendientes no afectan el dise\u00f1o externo de otros cuadros de la p\u00e1gina.  Esto nos permite omitir potencialmente el dise\u00f1o de los descendientes si todo lo que queremos hacer es dise\u00f1ar otros cuadros.<\/li>\n<li><code>style<\/code>: La contenci\u00f3n de estilo asegura que las propiedades que pueden tener efectos sobre m\u00e1s que sus descendientes no escapen del elemento (por ejemplo, contadores).  Esto nos permite omitir potencialmente el c\u00e1lculo de estilo para los descendientes si todo lo que queremos es calcular estilos en otros elementos.<\/li>\n<li><code>paint<\/code>: La contenci\u00f3n de pintura garantiza que los descendientes del cuadro contenedor no se muestren fuera de sus l\u00edmites.  Nada puede desbordar visiblemente el elemento, y si un elemento est\u00e1 fuera de la pantalla o no es visible, sus descendientes tampoco ser\u00e1n visibles.  Esto nos permite omitir potencialmente pintar los descendientes si el elemento est\u00e1 fuera de la pantalla.<\/li>\n<\/ul>\n<h2 id=\"skipping-rendering-work-with-content-visibility\"><span class=\"ez-toc-section\" id=\"Omitir-el-trabajo-de-renderizado-con-content-visibility\"><\/span>Omitir el trabajo de renderizado con <code>content-visibility<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Puede ser dif\u00edcil determinar qu\u00e9 valores de contenci\u00f3n usar, ya que las optimizaciones del navegador solo pueden activarse cuando se especifica un conjunto apropiado.  Puedes jugar con los valores para ver <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/updates\/2016\/06\/css-containment\">lo que funciona mejor<\/a>, o puede usar otra propiedad CSS llamada <code>content-visibility<\/code> para aplicar la contenci\u00f3n necesaria autom\u00e1ticamente. <code>content-visibility<\/code> garantiza que obtenga las mayores ganancias de rendimiento que el navegador puede proporcionar con un esfuerzo m\u00ednimo de su parte como desarrollador.<\/p>\n<p>La propiedad de visibilidad de contenido acepta varios valores, pero <code>voiture<\/code> es el que proporciona mejoras de rendimiento inmediatas.  Un elemento que tiene<br \/>\n<code>content-visibility: auto<\/code> ganancias <code>disposition<\/code>, <code>style<\/code> y <code>paint<\/code> contenci\u00f3n.  Si el elemento est\u00e1 fuera de la pantalla (y no es relevante para el usuario, los elementos relevantes ser\u00edan los que tienen foco o selecci\u00f3n en su sub\u00e1rbol), tambi\u00e9n gana <code>Taille<\/code> contenci\u00f3n (y se detiene<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/updates\/2018\/09\/inside-browser-part3#paint\">pintura<\/a><br \/>\ny<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/updates\/2018\/09\/inside-browser-part4#finding_the_event_target\">prueba de acierto<\/a><br \/>\nsu contenido).<\/p>\n<p>\u00bfQu\u00e9 significa esto?  En resumen, si el elemento est\u00e1 fuera de la pantalla, sus descendientes no se renderizan.  El navegador determina el tama\u00f1o del elemento sin considerar ninguno de sus contenidos, y se detiene all\u00ed.  Se omite la mayor parte de la representaci\u00f3n, como el estilo y el dise\u00f1o del sub\u00e1rbol del elemento.<\/p>\n<p>A medida que el elemento se acerca a la ventana gr\u00e1fica, el navegador ya no agrega el <code>Taille<\/code><br \/>\ncontenci\u00f3n y comienza a pintar y probar el contenido del elemento.  Esto permite que el trabajo de renderizado se realice justo a tiempo para que el usuario lo vea.<\/p>\n<h2 id=\"example\"><span class=\"ez-toc-section\" id=\"Ejemplo-un-blog-de-viajes\"><\/span>Ejemplo: un blog de viajes <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<figure class=\"w-figure\">\n  <video controls=\"\" autoplay=\"\" loop=\"\" muted=\"\" playsinline=\"\" class=\"w-screenshot\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/content-visibility\/travel_blog.mp4\"><\/source><\/video><figcaption>En este ejemplo, basamos nuestro blog de viajes a la derecha y aplicamos <code>content-visibility: auto<\/code> a \u00e1reas fragmentadas a la izquierda.  Los resultados muestran tiempos de renderizado que van desde <b>232 ms<\/b> \u00e0 <b>30 ms<\/b> en la carga de la p\u00e1gina inicial.<\/figcaption><\/figure>\n<p>Un blog de viajes generalmente contiene un conjunto de historias con algunas im\u00e1genes y texto descriptivo.  Esto es lo que sucede en un navegador t\u00edpico cuando navega a un blog de viajes:<\/p>\n<ol>\n<li>Una parte de la p\u00e1gina se descarga de la red, junto con los recursos necesarios.<\/li>\n<li>El navegador dise\u00f1a y distribuye todo el contenido de la p\u00e1gina, sin considerar si el contenido es visible para el usuario.<\/li>\n<li>El navegador vuelve al paso 1 hasta que se descargan toda la p\u00e1gina y los recursos.<\/li>\n<\/ol>\n<p>En el paso 2, el navegador procesa todos los contenidos en busca de cosas que pueden haber cambiado.  Actualiza el estilo y el dise\u00f1o de cualquier elemento nuevo, junto con los elementos que pueden haber cambiado como resultado de nuevas actualizaciones.  Esto es trabajo de renderizado.  Esto lleva tiempo.<\/p>\n<figure class=\"w-figure\">\n  <img alt='travelblog-9968669' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/travelblog-9968669.jpg'><figcaption class=\"w-figcaption\">\n<p>    Un ejemplo de blog de viajes.  Ver <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/codepen.io\/una\/pen\/rNxEWLo\">Demostraci\u00f3n en Codepen<\/a><br \/>\n  <\/figcaption><\/figure>\n<p>Ahora considera lo que pasa si pones <code>content-visibility: auto<\/code> en cada una de las historias individuales del blog.  El ciclo general es el mismo: el navegador descarga y muestra fragmentos de la p\u00e1gina.  Sin embargo, la diferencia est\u00e1 en la cantidad de trabajo que realiza en el paso 2.<\/p>\n<p>Con visibilidad de contenido, aplicar\u00e1 estilo y dise\u00f1o a todos los contenidos que est\u00e1n actualmente visibles para el usuario (est\u00e1n en pantalla).  Sin embargo, al procesar la historia que est\u00e1 completamente fuera de la pantalla, el navegador omitir\u00e1 el trabajo de renderizado y solo aplicar\u00e1 estilo y dise\u00f1o al cuadro del elemento.<\/p>\n<p>El rendimiento de cargar esta p\u00e1gina ser\u00eda como si contuviera historias completas en pantalla y casillas vac\u00edas para cada una de las historias fuera de la pantalla.  Esto funciona mucho mejor, con <em>reducci\u00f3n esperada del 50% o m\u00e1s<\/em> del costo de renderizado de carga.  En nuestro ejemplo, vemos un impulso de un <strong>232 ms<\/strong> dando tiempo a un<br \/>\n<strong>30 ms<\/strong> tiempo de renderizado.  Eso es un <strong>7 veces<\/strong> aumento del rendimiento.<\/p>\n<p>\u00bfCu\u00e1l es el trabajo que necesita hacer para obtener estos beneficios?  Primero, dividimos el contenido en secciones:<\/p>\n<figure class=\"w-figure\">\n  <img alt='travelblog-chunked-2397894' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/travelblog-chunked-2397894.jpg'><figcaption class=\"w-figcaption\">\n<p>    Ejemplo de fragmentaci\u00f3n de contenido en secciones con la <code>story<\/code> clase aplicada, recibir <code>content-visibility: auto<\/code>. Regarder <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/codepen.io\/vmpstr\/pen\/xxZoyMb\">Demostraci\u00f3n en Codepen<\/a><br \/>\n  <\/figcaption><\/figure>\n<p>Luego, aplicamos la siguiente regla de estilo a las secciones:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">.story<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">content-visibility<\/span><span class=\"token punctuation\">:<\/span> voiture<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">contain-intrinsic-size<\/span><span class=\"token punctuation\">:<\/span> 1000px<span class=\"token punctuation\">;<\/span> <br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<div class=\"w-aside w-aside--note\">\n<p>Tenga en cuenta que a medida que el contenido entra y sale de la visibilidad, comenzar\u00e1 y dejar\u00e1 de representarse seg\u00fan sea necesario.  Sin embargo, esto no significa que el navegador tendr\u00e1 que renderizar y volver a renderizar el mismo contenido una y otra vez, ya que el trabajo de renderizado se guarda cuando es posible.<\/p>\n<\/div>\n<h3 id=\"specifying-the-natural-size-of-an-element-with-contain-intrinsic-size\"><span class=\"ez-toc-section\" id=\"Especificar-el-tamano-natural-de-un-elemento-con-contain-intrinsic-size\"><\/span>Especificar el tama\u00f1o natural de un elemento con <code>contain-intrinsic-size<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Para realizar los beneficios potenciales de <code>content-visibility<\/code>, el navegador debe aplicar la contenci\u00f3n de tama\u00f1o para asegurarse de que los resultados de la representaci\u00f3n de los contenidos no afecten el tama\u00f1o del elemento de ninguna manera.  Esto significa que el elemento se presentar\u00e1 como si estuviera vac\u00edo.  Si el elemento no tiene una altura especificada en un dise\u00f1o de bloque regular, entonces tendr\u00e1 una altura de 0.<\/p>\n<p>Esto podr\u00eda no ser ideal, ya que el tama\u00f1o de la barra de desplazamiento cambiar\u00e1, dependiendo de que cada piso tenga una altura distinta de cero.<\/p>\n<p>Afortunadamente, CSS proporciona otra propiedad, <code>contain-intrinsic-size<\/code>, que especifica efectivamente el tama\u00f1o natural del elemento <em>si el elemento se ve afectado por la contenci\u00f3n de tama\u00f1o<\/em>.  En nuestro ejemplo, lo estamos configurando para <code>1000px<\/code> como una estimaci\u00f3n de la altura y el ancho de las secciones.<\/p>\n<p>Esto significa que se presentar\u00e1 como si tuviera un solo hijo de dimensiones de \u00abtama\u00f1o intr\u00ednseco\u00bb, asegurando que sus divs sin tama\u00f1o a\u00fan ocupen espacio.<br \/>\n<code>contain-intrinsic-size<\/code> act\u00faa como un tama\u00f1o de marcador de posici\u00f3n en lugar de contenido renderizado.<\/p>\n<h2 id=\"hiding-content-with-content-visibility:-hidden\"><span class=\"ez-toc-section\" id=\"Ocultar-contenido-con-content-visibility-hidden\"><\/span>Ocultar contenido con <code>content-visibility: hidden<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u00bfQu\u00e9 sucede si desea mantener el contenido sin procesar independientemente de si est\u00e1 o no en pantalla, mientras aprovecha los beneficios del estado de procesamiento en cach\u00e9?  Entrar:<br \/>\n<code>content-visibility: hidden<\/code>.<\/p>\n<p>Les <code>content-visibility: hidden<\/code> La propiedad le ofrece los mismos beneficios de contenido sin procesar y estado de procesamiento en cach\u00e9 que <code>content-visibility: auto<\/code> hace fuera de la pantalla.  Sin embargo, a diferencia de <code>voiture<\/code>, no comienza a renderizarse autom\u00e1ticamente en pantalla.<\/p>\n<p>Esto le da m\u00e1s control, lo que le permite ocultar el contenido de un elemento y luego mostrarlo r\u00e1pidamente.<\/p>\n<p>Comp\u00e1relo con otras formas comunes de ocultar el contenido del elemento:<\/p>\n<ul>\n<li><code>affichage: aucun<\/code>: oculta el elemento y destruye su estado de representaci\u00f3n.  Esto significa que mostrar el elemento es tan caro como renderizar un nuevo elemento con el mismo contenido.<\/li>\n<li><code>visibilit\u00e9: masqu\u00e9<\/code>: oculta el elemento y mantiene su estado de representaci\u00f3n.  Esto no elimina realmente el elemento del documento, ya que (y su sub\u00e1rbol) a\u00fan ocupa espacio geom\u00e9trico en la p\u00e1gina y a\u00fan se puede hacer clic en \u00e9l.  Tambi\u00e9n actualiza el estado de representaci\u00f3n en cualquier momento que sea necesario, incluso cuando est\u00e1 oculto.<\/li>\n<\/ul>\n<p><code>content-visibility: hidden<\/code>, por otro lado, oculta el elemento mientras conserva su estado de representaci\u00f3n, por lo que, si hay alg\u00fan cambio que deba ocurrir, solo ocurre cuando el elemento se muestra nuevamente (es decir, el<br \/>\n<code>content-visibility: hidden<\/code> propiedad se elimina).<\/p>\n<p>Algunos grandes casos de uso para <code>content-visibility: hidden<\/code> son cuando se implementan desplazadores virtuales avanzados y se mide el dise\u00f1o.<\/p>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>conclusion <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><code>content-visibility<\/code>  y la especificaci\u00f3n de contenci\u00f3n de CSS significan que algunos aumentos de rendimiento interesantes llegar\u00e1n directamente a su archivo CSS.  Para obtener m\u00e1s informaci\u00f3n sobre estas propiedades, consulte:<\/p>\n<p>    <web-feedback additional-questions=\"api\"><\/web-feedback>\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>Mejore el tiempo de carga inicial omitiendo la representaci\u00f3n de contenido fuera de la pantalla. 5 de agosto de 2020 los content-visibility , lanzada en Chromium 85, podr\u00eda ser una&#8230;<\/p>","protected":false},"author":1,"featured_media":81824,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-81823","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>La nueva propiedad CSS que mejora el rendimiento de su renderizado - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Mejore el tiempo de carga inicial omitiendo la representaci\u00f3n de contenido fuera de la pantalla. 5 de agosto de 2020 los content-visibility , lanzada en\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"La nueva propiedad CSS que mejora el rendimiento de su renderizado\" \/>\n<meta property=\"og:description\" content=\"Mejore el tiempo de carga inicial omitiendo la representaci\u00f3n de contenido fuera de la pantalla. 5 de agosto de 2020 los content-visibility , lanzada en\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/fr\/dev\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-16T09:28:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-3030374.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"La nueva propiedad CSS que mejora el rendimiento de su renderizado\",\"datePublished\":\"2022-10-16T09:28:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\\\/\"},\"wordCount\":1769,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-3030374.jpg\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\\\/\",\"name\":\"La nueva propiedad CSS que mejora el rendimiento de su renderizado - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-3030374.jpg\",\"datePublished\":\"2022-10-16T09:28:47+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Mejore el tiempo de carga inicial omitiendo la representaci\u00f3n de contenido fuera de la pantalla. 5 de agosto de 2020 los content-visibility , lanzada en\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-3030374.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-3030374.jpg\",\"width\":1200,\"height\":360,\"caption\":\"hero-3030374-1832439-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"La nueva propiedad CSS que mejora el rendimiento de su renderizado - R Marketing Digital","description":"Mejore el tiempo de carga inicial omitiendo la representaci\u00f3n de contenido fuera de la pantalla. 5 de agosto de 2020 los content-visibility , lanzada en","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/fr\/dev\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\/","og_locale":"fr_FR","og_type":"article","og_title":"La nueva propiedad CSS que mejora el rendimiento de su renderizado","og_description":"Mejore el tiempo de carga inicial omitiendo la representaci\u00f3n de contenido fuera de la pantalla. 5 de agosto de 2020 los content-visibility , lanzada en","og_url":"https:\/\/rmarketingdigital.com\/fr\/dev\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\/","og_site_name":"R Marketing Digital","article_published_time":"2022-10-16T09:28:47+00:00","og_image":[{"width":1200,"height":360,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-3030374.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/dev\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/dev\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"La nueva propiedad CSS que mejora el rendimiento de su renderizado","datePublished":"2022-10-16T09:28:47+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\/"},"wordCount":1769,"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-3030374.jpg","articleSection":["Dev"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/dev\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\/","url":"https:\/\/rmarketingdigital.com\/dev\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\/","name":"La nueva propiedad CSS que mejora el rendimiento de su renderizado - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-3030374.jpg","datePublished":"2022-10-16T09:28:47+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Mejore el tiempo de carga inicial omitiendo la representaci\u00f3n de contenido fuera de la pantalla. 5 de agosto de 2020 los content-visibility , lanzada en","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/dev\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/rmarketingdigital.com\/dev\/la-nueva-propiedad-css-que-mejora-el-rendimiento-de-su-renderizado\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-3030374.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-3030374.jpg","width":1200,"height":360,"caption":"hero-3030374-1832439-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"Marketing num\u00e9rique","description":"Agence de r\u00e9f\u00e9rencement | Publicit\u00e9 sur les r\u00e9seaux sociaux | Gestion de communaut\u00e9","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"Marketing num\u00e9rique","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/81823","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/comments?post=81823"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/81823\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media\/81824"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media?parent=81823"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/categories?post=81823"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/tags?post=81823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}