Taitteen yläpuolella (ATF) -muodostus

ATF-muodostus luo vaikutelman, että sivusto latautuu nopeammin kuin se todellisuudessa latautuu. Tarkoituksena on muodostaa ensin sivun näkyvät osat ja muodostaa sen jälkeen sivun näkymättömissä olevat osat, ennen kuin käyttäjä vierittää sivua alaspäin.

Paikalla voi olla taitteen yläpuolella -määritys, joka näytetään kuvakkeena välilehdessä.

Jotta paikka voitaisiin muodostaa tällä tavalla, se on merkittävä scs-atf-merkinnällä:

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

Komponentin on ilmoitettava muodostusohjelmalle, kun sen muodostus on valmis. Valmiit komponentit tekevät tämän oletusarvoisesti. Räätälöity komponentti voi tehdä ylimääräisiä kutsuja, ja sen on tehtävä seuraavat asiat:

  1. Komponentin on ilmoitettava muodostusohjelmalle, että se haluaa muodostusohjelman odottavan, kunnes komponentin muodostus on valmis.
  2. Komponentin on ilmoitettava muodostusohjelmalle, kun se on valmis.

Ensimmäisen vaatimuksen voi täyttää lisäämällä seuraavan ominaisuuden räätälöidyn komponentin appinfo.json-tiedostoon:

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

Toisen vaatimuksen voi täyttää varmistamalla komponentin render.js-tiedostossa, että muodostusohjelma saa tiedon komponentin valmistumisesta seuraavalla kutsulla:

 SitesSDK.setProperty('renderComplete', true);

Jos kaikki ATF-paikan komponentit eivät ilmoita valmistumisestaan riittävän ajoissa, muodostusohjelma odottaa kaksi sekuntia ja jatkaa sitten sivun loppuosan muodostusta. Jos tiedät, ettei tämä aika tule riittämään, voit pidentää aikaa esittelemällä seuraavan yleismuuttujan sivun mallipohjassa:

var SCSAtfPassTimeout = 3000;

Huomautus::

Aika ilmoitetaan millisekunteina, joten tässä esimerkissä ajaksi määritetään kolme sekuntia.

ATF-prosessin vianmääritystietoja voi käyttää API-liittymän kautta. Voit kutsua seuraavaa menetelmää virheenetsintäkonsolissa tai käyttää sitä tarvittaessa sivulta:

SCSRenderAPI.getRenderMetrics();

Esimerkki:

{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