การเปลี่ยนมุมมอง SPA ที่เร็วขึ้นผ่านการแคชสถานะ

เปิดใช้การนําทางทันทีระหว่างมุมมองในแอปพลิเคชันหน้าเว็บเดียว (SPA) โดยแคชสถานะที่แสดงผลของมุมมองที่ไม่ได้ใช้งานแทนการทำลายมุมมองเหล่านั้น

ภาพรวม

โดยปกติแล้ว เมื่อผู้ใช้ไปยังส่วนต่างๆ ระหว่างแท็บหรือมุมมองใน SPA นักพัฒนาแอปจะทำลายมุมมองเก่าหรือซ่อนมุมมองนั้นโดยใช้ display: none ทั้ง 2 วิธีนี้กำหนดให้เบราว์เซอร์ต้องสร้างหรือคำนวณเลย์เอาต์และการแสดงผลทั้งหมดอีกครั้งเมื่อผู้ใช้กลับไปที่มุมมองนั้น

เมื่อใช้ content-visibility: hidden ในมุมมองที่ไม่ได้ใช้งาน เบราว์เซอร์จะนำเนื้อหาขององค์ประกอบออกจากขั้นตอนเลย์เอาต์และหยุดแสดงผล แต่จะเก็บสถานะการแสดงผลที่แคชไว้ในหน่วยความจำ เมื่อผู้ใช้เปลี่ยนกลับมา มุมมองจะคืนค่าเกือบจะทันที

ข้อดีข้อเสียระหว่าง CPU กับ RAM

แม้ว่าแนวทางนี้จะให้ประโยชน์ด้านประสิทธิภาพอย่างมาก แต่ก็มีข้อเสียบางอย่างที่คุณต้องจัดการอย่างรอบคอบ ดังนี้

• การประหยัด CPU: มากเป็นอย่างยิ่ง เบราว์เซอร์จะข้ามเลย์เอาต์และการส่งผ่านการวาดสำหรับมุมมองที่ซ่อนอยู่โดยสิ้นเชิง
• ต้นทุน RAM: สูง เบราว์เซอร์จะเก็บโหนด DOM, Listener เหตุการณ์ และสถานะทั้งหมดสำหรับมุมมองที่ซ่อนไว้ในหน่วยความจำ

เมื่อการแลกเปลี่ยนนี้กลายเป็นอันตราย

• ควรใช้กลยุทธ์นี้กับแอปพลิเคชันที่เรียบง่ายซึ่งมีจำนวนยอดดูน้อยและคาดการณ์ได้ (เช่น อินเทอร์เฟซแบบแท็บ 3-5 แท็บ)
• อย่าแคชทุกมุมมองโดยไม่มีเงื่อนไขในแอปพลิเคชันที่มีการเปลี่ยนแปลงสูงซึ่งสร้างรายงานที่ไม่ซ้ำกันหลายสิบรายการหรือใช้เส้นทางแบบไดนามิกที่ไม่มีที่สิ้นสุด การดำเนินการดังกล่าวจะทำให้หน่วยความจำบวมอย่างรุนแรงในที่สุด และอาจทำให้เบราว์เซอร์ขัดข้องในอุปกรณ์ระดับล่าง
• บังคับ: หากแอปพลิเคชันของคุณเป็นแบบไดนามิกสูง คุณต้องใช้กลยุทธ์การขับออก (เช่น แคชที่ใช้ล่าสุดน้อยที่สุด) เพื่อทำลายมุมมองเก่าเมื่อถึงเกณฑ์หน่วยความจำ

การใช้งาน

1. กำหนดค่าคอนเทนเนอร์มุมมอง

ตั้งค่า content-visibility: hidden ในมุมมองที่ไม่ได้ใช้งานอยู่ในขณะนี้

.spa-view.inactive {
  /* MANDATORY: Use hidden to cache the rendering state of inactive views */
  content-visibility: hidden;
  
  /* Optional: Prevent hidden views from taking up physical space in layout flow */
  position: absolute;
}

2. จัดการโหมดโฟกัส

เมื่อสลับมุมมอง ให้ตรวจสอบว่าคุณจัดการโฟกัสของแป้นพิมพ์อย่างถูกต้องเพื่อรักษาการช่วยเหลือพิเศษไว้

function switchToView(viewId) {
  // Hide all views
  document.querySelectorAll('.spa-view').forEach(view => {
    view.classList.add('inactive');
    view.setAttribute('aria-hidden', 'true');
  });
  
  // Show the target view
  const activeView = document.getElementById(viewId);
  activeView.classList.remove('inactive');
  activeView.setAttribute('aria-hidden', 'false');
  
  // MANDATORY: Move focus to the new view to ensure a logical tab-order
  activeView.focus();
}

กลยุทธ์สำรอง

พร็อพเพอร์ตี้ content-visibility จะลดระดับลงอย่างราบรื่น ในเบราว์เซอร์ที่ไม่รองรับ ให้ทำดังนี้

• ระบบจะละเว้นพร็อพเพอร์ตี้
• เพื่อป้องกันไม่ให้เบราว์เซอร์สำรองแสดงผลมุมมองทั้งหมดพร้อมกัน คุณควรระบุทางเลือกสำรองเป็น display: none ใน CSS ดังนี้

@supports not (content-visibility: hidden) {
  .spa-view.inactive {
    display: none;
  }
}