Renderização Acima da Dobra (ATF)

A renderização ATF faz parecer que um site está carregando mais rápido do que de fato está. O objetivo é renderizar primeiro todas as partes de uma página que ficam visíveis e depois, antes de o usuário rolar para baixo, renderizar o restante da página que não fica visível inicialmente.

Um slot pode ter uma designação "acima da dobra", que exibe um ícone na guia.

Para que um slot seja renderizado dessa nova maneira, ele deve ser marcado com scs-atf, conforme a seguir:

<div class="scs-slot scs-atf" id="headline"></div>

Um componente precisa notificar o renderizador ao término da renderização. Os componentes predefinidos fazem isso por padrão. Um componente personalizado pode fazer chamadas adicionais e precisa fazer o seguinte:

  1. Notificar o renderizador de que ele precisa aguardar a conclusão da renderização.
  2. Notificar o renderizador quando ela for concluída.

Para #1, conforme o arquivo appinfo.json do componente personalizado, adicione a seguinte propriedade:

   "initialData": {
        . . .
        "customRenderComplete": true,
        . . .

Para #2, no arquivo render.js do componente, certifique-se de deixar que o renderizador saiba quando você tiver terminado, chamando:

 SitesSDK.setProperty('renderComplete', true);

Se nem todos os componentes em um slot ATF reportarem de volta que foram concluídos de maneira oportuna, o renderizador aguardará 2 segundos antes de continuar com o restante da página. Se você souber que esse tempo não será longo o suficiente, poderá estendê-lo declarando a seguinte variável global em um modelo de página:

var SCSAtfPassTimeout = 3000;

Nota:

O tempo é em milissegundos, então este exemplo definiu o timeout como 3 segundos.

Uma API fornece os dados de diagnóstico do processo ATF. Você pode chamar o seguinte método na console de depuração ou pode acessá-lo em uma página, se necessário.

SCSRenderAPI.getRenderMetrics();

Por exemplo:

{currentTime: 16243.400000000001, renderStartTime: 264.36, atfPassEndTime: 306.535, mainPassStartTime: 316.475, mainPassEndTime: 331.38500000000005, …}

1.   atfComponentCount:13

2.   atfPassEndTime:306.535

3.   completionCount:23

4.   completionRecords:Array(23)

1.   0:{atf: true, componentId: "a7afdd33-3fbb-4329-bc1b-6be60056a995", time: 280.065}

2.   1:{atf: true, componentId: "edfcfcb4-b0d3-422f-aa59-5c925bbbebee", time: 283.54}

3.   2:{atf: true, componentId: "c1c3aec8-e52f-406c-8c29-ab69c05877ed", time: 283.56000000000006}

4.   3:{atf: true, componentId: "b3a31dc6-62a1-44d9-9c80-bdb2c5bedaaa", time: 284.13000000000005}

5.   4:{atf: true, componentId: "c05aa1a2-c11c-4ef5-9051-4799c5bee24a", time: 284.15500000000003}

6.   5:{atf: true, componentId: "bafd4047-06ec-4739-9b23-9db74f573f30", time: 294.665}

7.   6:{atf: true, componentId: "e7d49528-0357-4b45-801e-b3a2716a086c", time: 297.995}

8.   7:{atf: true, componentId: "a5f33674-4022-4138-8cc5-fef00c02a557", time: 299.78000000000003}

9.   8:{atf: true, componentId: "ccfedc98-1dbd-440e-b867-5e683cea2ec5", time: 301.19500000000005}

10. 9:{atf: true, componentId: "d691bc44-fed9-474a-9806-2191f46a5e2e", time: 302.46}

11. 10:{atf: true, componentId: "cf613054-05d8-40dd-83a0-718760d7bc73", time: 303.79}

12. 11:{atf: true, componentId: "b4a6ef98-ffc8-48c7-987c-63346ee97bcc", time: 305.115}

13. 12:{atf: true, componentId: "de1fa2ce-66ba-419b-b517-2cb4a7601c3b", time: 306.535}

14. 13:{atf: false, componentId: "ba3f8ed4-31d4-4347-b6f0-f1019783a57c", time: 318.665}

15. 14:{atf: false, componentId: "ae8af486-76b3-47cd-9989-db4212eefebb", time: 320.45500000000004}

16. 15:{atf: false, componentId: "a48b5abb-49b2-4456-90bd-a3de998150c8", time: 320.48}

17. 16:{atf: false, componentId: "a9650e6d-7e7e-42a2-b758-58f2aeab18a2", time: 322.61500000000007}

18. 17:{atf: false, componentId: "aca9836a-f955-4aa7-8db2-fd3cf1189dea", time: 324.23500000000007}

19. 18:{atf: false, componentId: "e3d7941c-fbc7-4da9-963b-e3810b6467d4", time: 325.85}

20. 19:{atf: false, componentId: "eecde809-da54-4066-9326-73f9d9c35fe4", time: 327.315}

21. 20:{atf: false, componentId: "e8f4fb16-4e15-4570-b7de-304e99e449a7", time: 328.74}

22. 21:{atf: false, componentId: "a7baa06e-7f30-42c7-94f4-e171ab2edcd6", time: 330.09000000000003}

23. 22:{atf: false, componentId: "fd603b96-2beb-4e87-a54f-12d0e264cd0a", time: 331.38500000000005}

24. length:23

25. __proto__:Array(0)

5.   componentCount:23

6.   currentTime:16243.400000000001

7.   mainPassEndTime:331.38500000000005

8.   mainPassStartTime:316.475

9.   renderStartTime:264.36

10. __proto__:Object