เมื่อหน้าเว็บส่งคำขอเครือข่ายหลายรายการพร้อมกัน คำขอเหล่านั้นมักจะแย่งแบนด์วิดท์เดียวกัน ข้อมูลที่ไม่สำคัญ เช่น ข้อมูลวิเคราะห์ การบันทึก หรือการซิงค์ในเบื้องหลัง ควรลดลำดับความสำคัญลงเพื่อให้การดึงข้อมูลที่ผู้ใช้เริ่มหรือข้อมูลสำคัญเสร็จสมบูรณ์ได้เร็วขึ้น
วิธีการนำไปใช้งาน
- ระบุคำขอที่ทำงานอยู่เบื้องหลัง: พิจารณาว่าการเรียก
fetch()ใดเป็นข้อมูลที่ไม่จำเป็นซึ่งไม่ส่งผลต่อประสบการณ์ของผู้ใช้ในทันที - ใช้ลำดับความสำคัญในการดึงข้อมูล: เพิ่มตัวเลือก
priority: 'low'ลงในออบเจ็กต์การเริ่มต้นfetch()
โค้ดตัวอย่าง
// Use high priority (default) for critical UI updates
const criticalData = await fetch('/api/data');
// Explicitly deprioritize background analytics
fetch('/api/analytics', {
method: 'POST',
body: JSON.stringify(eventData),
// Lower the priority to prevent network contention
priority: 'low'
});
แนวทางปฏิบัติแนะนำ
- ควรใช้
priority: 'low'สำหรับข้อมูลวิเคราะห์, บีคอน หรือข้อมูลการตรวจวัดระยะไกลที่ไม่จำเป็นสำหรับมุมมองปัจจุบัน - ควรใช้
priority: 'low'สำหรับ "การดึงข้อมูลล่วงหน้า" ที่ผู้ใช้อาจต้องการในภายหลัง เพื่อให้มั่นใจว่าข้อมูลดังกล่าวจะไม่ทำให้สิ่งที่ผู้ใช้ต้องการตอนนี้ช้าลง - อย่าใช้
priority: 'low'สำหรับการดึงข้อมูลที่มีความสำคัญต่อประสบการณ์ของผู้ใช้ - อย่าใช้คีย์
importanceที่เลิกใช้งานแล้วในออบเจ็กต์ตัวเลือกการดึงข้อมูล คีย์ที่ถูกต้องคือpriority
กลยุทธ์สำรอง
ตัวเลือก priority ใน Fetch API เป็นการเพิ่มประสิทธิภาพแบบต่อเนื่อง เบราว์เซอร์ที่ไม่รองรับจะละเว้นตัวเลือกนี้และจัดการคำขอด้วยลำดับความสำคัญเริ่มต้น ไม่จำเป็นต้องมีการตรวจจับฟีเจอร์หรือตรรกะสำรองที่ชัดเจนสำหรับการใช้งานพื้นฐาน