Randarea Above the Fold (ATF)

Randarea ATF oferă senzaţia unei încărcări mai rapide ca în realitate a site-urilor web. Scopul constă în randarea în primul rând a părţilor vizibile ale unei pagini. Apoi, înainte ca utilizatorul să deruleze în jos, se va randa şi restul paginii, care iniţial nu este vizibil.

Un slot poate fi specificat drept "above the fold", adică se va afişa o pictogramă pe filă.

Pentru ca un slot să fie randat în acest mod nou, acesta trebuie marcat cu scs-atf, după cum urmează:

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

O componentă trebuie să înştiinţeze randatorul când se încheie randarea. Componentele predefinite fac acest lucru în mod prestabilit. O componentă personalizată poate efectua apeluri suplimentare şi are nevoie de următoarele:

  1. Să înştiinţeze randatorul că doreşte ca acesta să aştepte până când se finalizează randarea.
  2. Să înştiinţeze randatorul când se termină randarea.

Pentru #1, adăugaţi următoarea proprietate în fişierul appinfo.json al componentei personalizate:

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

Pentru #2, în fişierul render.js al componentei, asiguraţi-vă că înştiinţaţi randatorul când aţi terminat, apelând următoarea metodă:

 SitesSDK.setProperty('renderComplete', true);

Dacă nu toate componentele dintr-un slot ATF raportează în timp util faptul că au terminat randarea, randatorul va aştepta 2 secunde înainte de a continua randarea pentru restul paginii. Dacă ştiţi că acest interval va fi insuficient, îl puteţi prelungi, declarând următoarea variabilă globală într-un şablon de pagină:

var SCSAtfPassTimeout = 3000;

Notă:

Durata este exprimată în milisecunde, deci în acest exemplu, temporizarea este setată la 3 secunde.

O interfaţă API furnizează date de diagnosticare pentru procesul ATF. Puteţi apela următoarea metodă în consola de depanare sau o puteţi accesa dintr-o pagină, dacă este necesar.

SCSRenderAPI.getRenderMetrics();

De exemplu:

{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