Vykreslování nad přehybem (ATF)

Generování ATF poskytuje rychlejší načtení vzhledu webu než ve skutečnosti. Cílem je generovat nejprve všechny viditelné části stránky a poté, než uživatel přejde na stránce dolů, proběhne generování zbývající části stránky, která není zpočátku viditelná.

Pozice může mít označení „nad přehybem“, které zobrazuje ikonu na kartě.

Pokud má být pozice generována tímto novým způsobem, musí být označena atributem scs-atf, jak je uvedeno v následujícím příkladu:

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

Je třeba, aby komponenta informovala generovací modul, když je dokončeno generování. Předem definované komponenty tuto informaci ve výchozím nastavení poskytují. Vlastní komponenta může uskutečňovat další volání a musí provést následující:

  1. Oznámit generovacímu modulu, že chce, aby počkal, až bude generování dokončeno.
  2. Oznámit generovacímu modulu, když bude generování dokončeno.

Pro požadavek č. 1, který se týká souboru appinfo.json vlastní komponenty, přidejte následující vlastnost:

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

Pro požadavek č. 2, který se týká souboru render.js komponenty, musíte zajistit, že se generovací modul prostřednictvím volání dozví, když budete hotovi:

 SitesSDK.setProperty('renderComplete', true);

Pokud některé komponenty v pozici ATF včas neoznámí, že jsou hotové, generovací modul počká 2 sekundy, než bude pokračovat zbývající částí stránky. Pokud víte, že tato doba nebude dostatečně dlouhá, můžete ji prodloužit deklarováním následující globální proměnné v šabloně stránky:

var SCSAtfPassTimeout = 3000;

Poznámka:

Doba je udávána v milisekundách, takže v uvedeném příkladu bude nastaven časový limit 3 sekundy.

Rozhraní API poskytuje diagnostická data pro proces ATF. Následující metodu můžete volat v ladicí konzole nebo ji v případě potřeby můžete zpřístupnit ze stránky:

SCSRenderAPI.getRenderMetrics();

Napří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