การแสดงผลครึ่งหน้าบน (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 วินาที

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