Above the Fold-gjengivelse (ATF)

Med ATF-gjengivelse (Above the Fold) ser det ut som et Web-område lastes raskere enn det faktisk gjør. Målet er først å gjengi alle delene av en side som er synlige, og deretter gjengi resten av siden som ikke er synlig innledningsvis, før brukeren ruller nedover.

Et spor kan ha en Above the Fold-angivelse, som viser et ikon på fanen.

Når et spor skal gjengis på denne nye måten, må det merkes med scs-atf, som vist nedenfor:

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

En komponent må varsle gjengiveren når gjengivelsen er ferdig. Standardkomponenter gjør dette automatisk. En egendefinert komponent kan utføre flere kall og må utføre følgende:

  1. Varsle gjengiveren om at gjengiveren skal vente til gjengivelsen er fullført.
  2. Varsle gjengiveren når den er fullført.

For nummer 1 legger du til følgende egenskap mot filen appinfo.json for den egendefinerte komponenten:

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

For nummer 2, i filen render.js for komponenten, må du sørge for at du informerer gjengiveren om når du er ferdig ved å kalle opp:

 SitesSDK.setProperty('renderComplete', true);

Hvis ikke alle komponenter i et ATF-spor rapporterer tilbake at de er ferdige til rett tid, venter gjengiveren i 2 sekunder før den fortsetter med resten av siden. Hvis du vet at dette ikke er lang nok tid, kan du forlenge tiden ved å deklarere følgende globale variabel i en sidemal:

var SCSAtfPassTimeout = 3000;

Merknad:

Tiden er i millisekunder, og tidsavbruddet er satt til 3 sekunder i dette eksemplet.

Et API gjør diagnostikkdata tilgjengelig for ATF-prosessen. Du kan kalle opp følgende metode i feilletingskonsollen, eller du kan få tilgang til den fra en side ved behov:

SCSRenderAPI.getRenderMetrics();

For 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