Show Menu
TÓPICOS×

Implantação assíncrona

A implantação de desempenho e não de bloqueio das bibliotecas JavaScript necessárias para nossos produtos é cada vez mais importante para os usuários do Adobe Experience Cloud. Ferramentas como Google PageSpeed recomendam que os usuários alterem a forma como implantam as bibliotecas do Adobe em seu site. Este artigo explica como usar as bibliotecas JavaScript do Adobe de forma assíncrona.

Síncrono versus assíncrono

Implantação síncrona

Frequentemente, as bibliotecas são carregadas de forma síncrona na tag <head> de uma página. Por exemplo:
<script src="example.js"></script>

Por padrão, o navegador analisa o documento, chega a essa linha e começa a buscar o arquivo JavaScript do servidor. O navegador aguarda até que o arquivo seja retornado, então analisa e executa o arquivo JavaScript. Por fim, continua analisando o restante do documento HTML.
Se o analisador encontrar a tag <script> antes de renderizar o conteúdo visível, a exibição do conteúdo será adiada. Se o arquivo JavaScript que está sendo carregado não for absolutamente necessário para mostrar conteúdo aos usuários, você está exigindo desnecessariamente que seus visitantes aguardem o conteúdo. Quanto maior for a biblioteca, maior será o atraso. Por isso, as ferramentas de benchmark de desempenho do site como Google PageSpeed ou Lighthouse muitas vezes sinalizarão scripts carregados de forma síncrona.
As bibliotecas de Tag Management podem crescer rapidamente se você tiver muitas tags para gerenciar.

Implantação assíncrona

É possível carregar qualquer biblioteca de maneira assíncrona adicionando um atributo async à tag <script> . Por exemplo:
<script src="example.js" async></script>

Isso indica ao navegador que quando essa tag de script é analisada, ele deve começar a carregar o arquivo JavaScript, mas em vez de esperar que a biblioteca seja carregada e executada, ela deve continuar analisando e renderizando o restante do documento.

Considerações para implantação assíncrona

Conforme descrito acima, em implantações síncronas, o navegador pausa a análise e renderiza a página, enquanto a biblioteca do Launch é carregada e executada. Em implantações assíncronas, por outro lado, o navegador continua analisando e renderizando a página enquanto a biblioteca é carregada. A variação de quando a biblioteca Launchpode terminar o carregamento em relação à análise e renderização da página deve ser levada em consideração.
Primeiro, como a biblioteca Launch pode terminar o carregamento antes ou depois que a parte inferior da página tenha sido analisada e executada, você não deve mais chamar _satellite.pageBottom() do código da página (o _satellite não estará disponível até que a biblioteca tenha carregado). Isso é explicado em Carregamento do código incorporado do Launch de forma assíncrona .
Segundo, a biblioteca Launch pode terminar de carregar antes ou depois que o evento do navegador DOMContentLoaded (DOM Ready) ocorrer.
Por causa desses dois pontos, vale a pena demonstrar como os tipos de evento Biblioteca carregada Final da página , DOM Pronto e Janela carregada da função de extensão principal ao carregar uma biblioteca Launch de forma assíncrona.
Vamos supor que a sua propriedade do Launch contém as quatro regras a seguir:
  • Regra A: usa o tipo de evento Biblioteca carregada
  • Regra B: usa o tipo de evento final da página
  • Regra C: usa o tipo de evento DOM Pronto
  • Regra D: usa o tipo de evento Janela carregada
Independentemente de quando a biblioteca Launch terminar de carregar, todas as regras serão executadas e serão executadas na seguinte ordem:
Regra A → Regra B → Regra C → Regra D
Embora a ordem seja sempre aplicada, algumas regras podem ser executadas imediatamente quando a biblioteca Launch terminar de carregar, enquanto outras podem ser executadas posteriormente. O seguinte ocorre quando a biblioteca Launch termina o carregamento:
  1. A regra A é executada imediatamente.
  2. Se o evento do navegador DOMContentLoaded (DOM Pronto) já tiver ocorrido, a Regra B e a Regra C serão executadas imediatamente. Caso contrário, as Regras B e C serão executadas posteriormente quando o evento do navegador DOMContentLoaded ocorrer.
  3. Se o evento do navegador load (janela carregada) já tiver ocorrido, a Regra D será executada imediatamente. Caso contrário, a Regra D será executada mais tarde quando o evento do navegador load ocorrer. Observe que se tiver instalado a biblioteca Launch de acordo com as instruções, a biblioteca Launch sempre finaliza o carregamento antes do evento do navegador load ocorrer.
Ao aplicar esses princípios ao seu próprio site, considere o seguinte:
  • Uma regra que usa o tipo de evento da Biblioteca carregada pode ser executada antes que a camada de dados seja carregada totalmente. Isso pode resultar nas ações da regra executadas com dados ausentes, pois os dados ainda não estavam disponíveis na página. Esses tipos de problemas podem ser mitigados ao ajustar a configuração da regra. Por exemplo, em vez de ter uma regra acionada pelo tipo de evento Biblioteca carregada, você pode usar o tipo de evento Evento personalizado ou Chamada direta acionado pelo código da página, assim que a camada de dados terminar o carregamento.
  • O tipo de evento Final da página não fornece especificamente valor quando a biblioteca é carregada de forma assíncrona. Em vez disso, considere Biblioteca carregada, DOM Pronto, Janela carregada ou outros tipos de evento.
Caso veja algo fora de ordem, é provável que você tenha problemas com tempo para resolver. Implantações que requerem tempo preciso podem precisar usar ouvintes de eventos e o tipo de evento Evento personalizado ou Chamada direta para tornar suas implementações mais robustas e consistentes.

Carregamento do código incorporado no Launch de forma assíncrona

O Launch fornece um botão para ativar o carregamento assíncrono ao criar um código incorporado ao configurar um ambiente . Você também pode configurar o carregamento assíncrono sozinho:
  1. Adicione um atributo assíncrono à tag <script> para carregar o script de maneira assíncrona.
    Para o código incorporado do Launch, isso significa alterar isto:
    <script src="//www.yoururl.com/launch-EN1a3807879cfd4acdc492427deca6c74e.min.js"></script>
    
    
    para isto:
    <script src="//www.yoururl.com/launch-EN1a3807879cfd4acdc492427deca6c74e.min.js" async></script>
    
    
  2. Remova qualquer código que tenha adicionado anteriormente na parte inferior da sua tag:
    <script type="text/javascript">_satellite.pageBottom();</script>
    
    
    Este código informa ao Launch que o analisador do navegador chegou à parte inferior da página. Como o Launch provavelmente não terá sido carregado e executado antes dessa hora, chamar _satellite.pageBottom() resultará em um erro e o tipo de evento Final da página talvez não se comporte conforme esperado.