Administración del parpadeo para implementaciones sincrónicas
La administración sincrónica de parpadeos se divide en tres fases:
- Preocultación
- Preprocesamiento
- Renderización
Durante la fase de preocultación, el SDK usa la propiedad de configuración prehidingStyle
para crear una etiqueta de estilo HTML y anexarla al DOM para asegurarse de que las secciones deseadas de la página estén ocultas. Si no está seguro de qué partes de la página se personalizarán, se recomienda establecer prehidingStyle
en body { opacity: 0 !important }
. Esto garantiza que toda la página esté oculta. Sin embargo, esto tiene el inconveniente de provocar un rendimiento de procesamiento de páginas peor reportado por herramientas como Lighthouse, Pruebas de páginas web, etc. Para obtener el mejor rendimiento de procesamiento de páginas, se recomienda establecer prehidingStyle
en una lista de elementos contenedores que contengan las partes de la página que se personalizarán.
Suponiendo que tiene una página de HTML como la que se muestra a continuación y que sabe que solo se personalizarán los elementos contenedores de bar
y bazz
:
<html>
<head>
</head>
<body>
<div id="foo">
Foo foo foo
</div>
<div id="bar">
Bar bar bar
</div>
<div id="bazz">
Bazz bazz bazz
</div>
</body>
</html>
Entonces prehidingStyle
debe configurarse como #bar, #bazz { opacity: 0 !important }
.
Una vez que el SDK ha recibido contenido personalizado del servidor, se inicia la fase de preprocesamiento. Durante esta fase, la respuesta se preprocesa, asegurándose de que los elementos que deben contener contenido personalizado estén ocultos. Una vez ocultos estos elementos, se quita la etiqueta de estilo de HTML creada en función de la opción de configuración prehidingStyle
y se muestran el cuerpo del HTML o los elementos de contenedor ocultos.
Después de que todo el contenido de personalización se haya representado correctamente, o si hay algún error, se inicia la fase de procesamiento. Se muestran todos los elementos ocultos anteriormente para asegurarse de que no haya elementos ocultos en la página que el SDK haya ocultado.