Renderização na Parte Superior (ATF)

Com a renderização ATF, um site parece ser carregado mais rapidamente do que na realidade sucede. O objetivo é renderizar primeiro todas as partes de uma página que são visíveis e, em seguida, antes de o utilizador se deslocar para baixo, renderizar o resto da página não visível inicialmente.

Um slot pode ter uma designação "parte superior", que apresenta um ícone no separador.

Para que um slot seja renderizado desta nova forma, deve ser marcado como scs-atf, como se segue:

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

Um componente precisa de notificar o renderizador quando a renderização estiver concluída. Os componentes prontos a utilizar fazem-no por omissão. Um componente customizado pode efetuar chamadas adicionais e precisa de fazer o seguinte:

  1. Notificar o renderizador de que pretende que este aguarde até concluir a renderização.
  2. Notificar o renderizador quando tiver concluído.

Relativamente ao ponto 1, para o ficheiro appinfo.json do componente customizado, acrescente a propriedade seguinte:

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

Relativamente ao ponto 2, no ficheiro render.js do componente, certifique-se de que o renderizador é informado após a conclusão ao chamar:

 SitesSDK.setProperty('renderComplete', true);

Se nem todos os componentes num slot ATF comunicarem que terminaram de uma forma atempada, o renderizador irá aguardar 2 segundos antes de continuar com o resto da página. Se souber que este tempo não é suficiente, pode prolongá-lo declarando a seguinte variável global num modelo de página:

var SCSAtfPassTimeout = 3000;

Nota:

O tempo está em milésimos de segundo, pelo que este exemplo define o limite de tempo como 3 segundos.

Uma API fornece dados de diagnóstico para o processo ATF. Pode chamar o método seguinte na consola de depuração ou pode aceder a partir de 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