ATF 렌더링은 웹 사이트가 실제보다 빠르게 로드되는 것처럼 보입니다. 목표는 먼저 페이지의 보이는 부분을 모두 렌더링하고, 그 다음 사용자가 아래로 스크롤하기 전에 처음에 보이지 않은 페이지의 나머지 부분을 렌더링하는 것입니다.
슬롯에 "Above the Fold"를 지정하면 탭에 아이콘이 표시됩니다.
이 새로운 방식으로 슬롯을 렌더링하려면 다음과 같이 scs-atf로 표시해야 합니다.
<div class="scs-slot scs-atf" id="headline"></div>
구성요소는 렌더링이 완료되면 렌더러에게 알려야 합니다. 미리 정의된 구성요소는 기본적으로 이를 수행합니다. 사용자정의 구성요소는 추가 호출을 실행하여 다음을 수행해야 합니다.
1번의 경우 사용자정의 구성요소의 appinfo.json 파일에 다음 속성을 추가하십시오.
"initialData": {
. . .
"customRenderComplete": true,
. . .
2번의 경우 구성요소의 render.js 파일에서 다음을 호출하여 완료되면 렌더러에게 알려야 합니다.
SitesSDK.setProperty('renderComplete', true);
ATF 슬롯의 모든 구성요소가 적시에 완료되었다고 보고하지 않으면 렌더러는 2초간 기다렸다가 페이지의 나머지 부분을 계속합니다. 이 시간이 충분히 길지 않다면 다음 전역 변수를 페이지 템플리트에 선언하여 시간을 늘릴 수 있습니다.
var SCSAtfPassTimeout = 3000;
주:
시간은 밀리초 단위이므로 이 예제는 시간 초과를 3초로 설정합니다.API는 ATF 프로세스에 대한 진단 데이터를 제공합니다. 다음 메소드를 디버그 콘솔에서 호출하거나, 필요한 경우 페이지에서 액세스할 수 있습니다.
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