ATF 呈現方式讓網站外觀的載入非常快速。目標是要先呈現頁面的所有可見部分,然後在使用者向下捲動之前,再呈現頁面中一開始不可見的其餘部分。
槽位可以指定「網頁頭版區域」,這會在頁籤上顯示圖示。
若要以這種新方式呈現槽位,必須以 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