Återgivning för övre delen av sidan

ATF-återgivning gör att en webbplats ser ut att laddas snabbare än den faktiskt gör. Målet är att först återge alla delar av sidan som är synliga och sedan, innan användaren rullar nedåt, återge resten av sidan, som först inte är synlig.

En ruta kan ha beteckningen "övre delen av sidan", som visas som en ikon på fliken.

För att en ruta ska återges på det här nya sättet måste den vara märkt med scs-atf, på följande sätt:

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

En komponent måste meddela renderaren när den är klar med återgivningen. Färdigkonfigurerade komponenter gör detta som standard. En anpassad komponent kan göra fler anrop och måste göra följande:

  1. Meddela renderaren att den vill att renderaren ska vänta tills den har slutfört återgivningen.
  2. Meddela renderaren när den har slutförts.

För nr 1, mot den anpassade komponentens appinfo.json-fil, lägger du till följande egenskap:

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

För nr 2 ser du till att meddela renderaren när du är klar, genom att anropa följande i komponentens render.js-fil:

 SitesSDK.setProperty('renderComplete', true);

Om inte alla komponenter i en ATF-ruta rapporterar tillbaka att de är klara i tid väntar renderaren i 2 sekunder innan den fortsätter med resten av sidan. Om du vet att det här inte är tillräckligt lång tid kan du utöka tiden genom att deklarera följande globala variabel i en sidmall:

var SCSAtfPassTimeout = 3000;

Obs!:

Tiden är i millisekunder, så i det här exemplet anges 3 sekunder för tidsgränsen.

Ett API-gränssnitt tillhandahåller diagnostiska data för ATF-processen. Du kan anropa följande metod på felsökningskonsolen eller öppna den från en sida vid behov:

SCSRenderAPI.getRenderMetrics();

Exempel:

{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