Визуализация без прокрутки (ATF)

Визуализация ATF создает впечатление, что веб-сайт загружается быстрее, чем на самом деле. Цель заключается в том, чтобы сначала отобразить все видимые части страницы, а затем, перед прокруткой вниз, визуализировать остальные части страницы, которые изначально не видны.

Ячейка может иметь назначение "визуализация без прокрутки", при котором на вкладке отображается значок.

Для рендеринга ячейки таким новым образом она должна быть помечена как scs-atf следующим образом:

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

Компонент должен уведомлять рендерер о завершении рендеринга. Готовые компоненты делают это по умолчанию. Пользовательский компонент может выполнять дополнительные вызовы и должен выполнять следующие действия:

  1. Уведомить рендерер о том, что необходимо дождаться завершения рендеринга.
  2. Уведомить рендерер о завершении.

Для #1, напротив файла appinfo.json пользовательского компонента, добавьте следующее свойство:

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

Для #2, в файле render.js компонента, убедитесь, что рендерер уведомлен о завершении, путем вызова следующего метода:

 SitesSDK.setProperty('renderComplete', true);

Если не все компоненты в ячейке ATF своевременно сообщают о завершении обработки, рендерер ожидает 2 секунды, прежде чем продолжить обработку остальной части страницей. Если этого времени недостаточно, его можно продлить, объявив в шаблоне страницы следующую глобальную переменную:

var SCSAtfPassTimeout = 3000;

Примечание.:

Время указывается в миллисекундах, поэтому в данном примере задано время ожидания 3 секунды.

Диагностические данные для процесса ATF предоставляются API-интерфейсом. Можно вызвать в консоли отладки следующий метод или, если это необходимо, получить к нему доступ со страницы:

SCSRenderAPI.getRenderMetrics();

Пример:

{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