Rendering ATF (Above the Fold)

Rendering ATF powoduje, że strona internetowa wydaje się ładować szybciej niż faktycznie to następuje. Celem jest wyrenderowanie najpierw wszystkich części strony, które są od razu widoczne, a następnie — zanim użytkownik przewinie stronę w dół — wyrenderowanie pozostałych części strony, które początkowo nie są widoczne.

Gniazdo może mieć desygnację "above the fold", przy której jest na karcie wyświetlana odpowiednia ikona.

Gniazdo, aby było renderowane w ten sposób, musi być oznaczone jako scs-atf, jak poniżej:

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

Składnik powinien poinformować moduł renderujący o ukończeniu renderowania. Gotowe składniki, dostarczane z produktem, wykonują to domyślnie. Składnik niestandardowy może wykonać dodatkowe wywołania i powinien:

  1. Powiadomić moduł renderujący, że ma on poczekać, aż renderowanie zostanie ukończone.
  2. Powiadomić moduł renderujący o ukończeniu renderowania.

Aby zrealizować punkt 1, należy dodać w pliku appinfo.json dla niestandardowego składnika następującą właściwość:

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

Aby zrealizować punkt 2, należy w pliku render.js składnika wprowadzić następujące wywołanie, informujące moduł renderujący o ukończeniu renderowania:

 SitesSDK.setProperty('renderComplete', true);

Jeśli nie wszystkie składniki znajdujące się w gnieździe ATF zgłoszą terminowo, że ich renderowanie zostało ukończone, to moduł renderujący odczeka 2 sekundy, po czym zajmie się resztą strony. Jeśli ten czas jest za krótki, można go wydłużyć, deklarując w szablonie strony następującą zmienną globalną:

var SCSAtfPassTimeout = 3000;

Uwaga:

Czas jest określany w milisekundach, a zatem w tym przykładzie wynosi 3 sekundy.

Dane diagnostyczne dla procesu ATF są dostarczane przez API. Z konsoli debugera można wywołać następującą metodę (jeśli trzeba, można do niej uzyskać dostęp ze strony):

SCSRenderAPI.getRenderMetrics();

Na przykład:

{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