การโหลดแบบเลื่อนเวลาและประสบการณ์ใช้งานคล้าย Suspense
แสดงตัวโหลดโครงร่างระหว่างรอข้อมูลที่สตรีมมาแก้ไขเสร็จ เพื่อให้ผู้ใช้รู้สึกว่าประสิทธิภาพดีขึ้น
การโหลดแบบเลื่อนเวลาและประสบการณ์ใช้งานคล้าย Suspense เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
UI โครงร่างจำลอง
แสดงรูปร่างตัวแทนขณะที่ข้อมูลกำลังโหลด ผู้ใช้จะรู้สึกว่าหน้าเว็บทำงานเร็วขึ้น
ใช้ร่วมกับการส่งข้อมูลผ่าน stream
แสดงโครงร่างจำลองภายในบล็อก pending ของ {#await}
{#await data.slow}
<div class="skeleton" />
{:then result}
<Card data={result} />
{/await}การเปิดเผยแบบค่อยเป็นค่อยไป
แบ่งโครงร่างจำลองเป็นชั้น ๆ เพื่อเปิดเผยแต่ละส่วนเมื่อข้อมูลของส่วนนั้นมาถึง
ภาพเคลื่อนไหว
ทำให้โครงร่างจำลองมีภาพเคลื่อนไหวแวววาวอย่างนุ่มนวลเพื่อเพิ่มความเรียบร้อย
สาขาข้อผิดพลาด
ใส่ {:catch} ไว้เสมอเพื่อจัดการความล้มเหลวอย่างเหมาะสม
การแสดงผลครั้งแรก
ข้อมูลที่ส่งผ่าน stream ทำให้โครงร่างหน้าเว็บแสดงได้ทันที มีเพียงส่วนที่ต้องใช้ข้อมูลเท่านั้นที่ต้องรอ
เมตริกประสิทธิภาพ
การส่งข้อมูลผ่าน stream ช่วยปรับปรุงเมตริกการแสดงผลเนื้อหาขนาดใหญ่ที่สุดและการแสดงผลเนื้อหาแรก
อย่าส่งข้อมูลผ่าน stream มากเกินไป
ข้อมูลสำคัญที่อยู่เหนือรอยพับไม่ควรส่งผ่าน stream เพราะผู้ใช้ต้องเห็นข้อมูลนั้นทันที
ใช้ร่วมกับการแคช
แคชผลลัพธ์ไว้เพื่อให้การนำทางครั้งถัดไปข้ามสถานะกำลังโหลด
เปรียบเทียบกับ Suspense
รูปแบบของ SvelteKit ให้ความรู้สึกคล้าย Suspense ของ React โดยไม่ต้องใช้ API ใหม่
ยึดผู้ใช้เป็นศูนย์กลาง
คิดเสมอว่าผู้ใช้จะเห็นอะไรเป็นสิ่งแรก ส่งข้อมูลรองผ่าน stream และแสดงเนื้อหาหลักให้เร็ว
ตรวจสอบความเข้าใจ
เหตุใดจึงใช้โครงร่างจำลอง
ทบทวน
ใช้การโหลดแบบส่งข้อมูลผ่าน stream ร่วมกับ UI โครงร่างจำลอง เพื่อสร้างประสบการณ์ผู้ใช้คล้าย Suspense และช่วยให้ผู้ใช้มีส่วนร่วมระหว่างดึงข้อมูล
คำถามที่พบบ่อย
บทเรียน “การโหลดแบบเลื่อนเวลาและประสบการณ์ใช้งานคล้าย Suspense” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การโหลดแบบเลื่อนเวลาและประสบการณ์ใช้งานคล้าย Suspense” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การโหลดแบบเลื่อนเวลาและประสบการณ์ใช้งานคล้าย Suspense”
แสดงตัวโหลดโครงร่างระหว่างรอข้อมูลที่สตรีมมาแก้ไขเสร็จ เพื่อให้ผู้ใช้รู้สึกว่าประสิทธิภาพดีขึ้น คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การโหลดแบบเลื่อนเวลาและประสบการณ์ใช้งานคล้าย Suspense” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- สตรีมข้อมูลด้วย Promise ใน load
- การโหลดแบบเลื่อนเวลาและประสบการณ์ใช้งานคล้าย Suspense
- สตรีมจากเซิร์ฟเวอร์ด้วย +server.js
- การไฮเดรตแบบก้าวหน้า