ATF-gengivelse (Above the Fold - over folden)

ATF-gengivelse giver indtryk af, at et website indlæses hurtigere, end det faktisk gør. Formålet er først at gengive alle de dele af siden, som er synlige, og derefter, før brugeren ruller ned, gengive resten af siden, som ikke er synlig i første omgang.

En plads kan have betegnelsen "over folden", som viser et ikon på fanen.

Hvis en plads skal gengives på denne måde, skal den være markeret med scs-atf på følgende måde:

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

En komponent skal give gengivelsesfunktionen besked, når den er færdig med gengivelsen. Køreklare komponenter gør dette som standard. En tilpasset komponent kan foretage yderligere kald og skal gøre følgende:

  1. Give gengiveren besked om at vente, indtil gengivelsen er færdig.
  2. Give gengiveren besked, når den er fuldført.

I punkt 1 skal du føje følgende egenskab til den tilpassede komponents appinfo.json-fil:

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

I punkt 2 skal du give gengiveren besked i komponentens render.js-fil, når du er færdig, ved at kalde:

 SitesSDK.setProperty('renderComplete', true);

Hvis ikke alle komponenter på en ATF-plads rapporterer rettidigt tilbage, når de er færdige, venter gengiveren i 2 sekunder, før den fortsætter med resten af siden. Hvis du ved, at det ikke er længe nok, kan du forlænge tiden ved at erklære følgende globale variabel i en sideskabelon:

var SCSAtfPassTimeout = 3000;

Bemærk:

Tiden angives i millisekunder, så i dette eksempel er timeout angivet til 3 sekunder.

En API leverer diagnosticeringsdata til ATF-processen. Du kan kalde følgende metode i fejlfindingskonsollen, eller du kan oprette adgang til den fra en side, hvis det er nødvendigt:

SCSRenderAPI.getRenderMetrics();

Eksempel:

{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