Administración del parpadeo para implementaciones sincrónicas

La administración sincrónica de parpadeos se divide en tres fases:

  1. Preocultación
  2. Preprocesamiento
  3. 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.