Vykresľovanie ATF (Above the Fold)

Vykresľovanie ATF vytvára dojem, že webová lokalita sa načítava rýchlejšie ako v skutočnosti. Cieľom je najskôr vykresliť všetky viditeľné časti stránky a potom vykresliť zvyšnú, predtým neviditeľnú časť stránky skôr, než sa používateľ posunie nadol.

Slot môže mať označenie "above the fold", ktoré na karte zobrazí ikonu.

Ak sa má slot vykresliť týmto novým spôsobom, musí byť označený výrazom scs-atf, ako je uvedené dole:

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

Komponent musí upozorniť vykresľovač na dokončenie svojho vykresľovania. Prednastavené komponenty to robia predvolene. Vlastný komponent môže uskutočňovať ďalšie volania a musí vykonať nasledujúce kroky:

  1. Musí upozorniť vykresľovač, že chce, aby vykresľovač počkal, kým sa nedokončí vykresľovanie.
  2. Musí upozorniť vykresľovač na dokončenie vykresľovania.

Na účely bodu č. 1 pridajte do súboru appinfo.json vlastného komponentu nasledujúcu vlastnosť:

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

Pokiaľ ide o bod č. 2, uistite sa, že ste v súbore render.js komponentu oznámili vykresľovaču dokončenie vykresľovania nasledujúcim volaním:

 SitesSDK.setProperty('renderComplete', true);

Ak nie všetky komponenty v slote ATF včas informujú o dokončení vykresľovania, vykresľovač počká 2 sekundy a potom pokračuje s vykresľovaním zvyšku stránky. Ak viete, že to nebude stačiť, môžete čas predĺžiť deklarovaním nasledujúcej globálnej premennej v šablóne stránky:

var SCSAtfPassTimeout = 3000;

Poznámka:

Čas je v milisekundách, takže v tomto príklade je časový limit nastavený na 3 sekundy.

Rozhranie API poskytuje diagnostické dáta pre proces ATF. Nasledujúcu metódu môžete volať v konzole ladenia alebo ju v prípade potreby môžete použiť na stránke:

SCSRenderAPI.getRenderMetrics();

Príklad:

{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