ปัญหาการเรนเดอร์รายการขนาดใหญ่

สมมติว่าคุณวนผ่านอาร์เรย์ที่มีรายการ 10,000 รายการ แล้วเรนเดอร์ li สำหรับแต่ละรายการ React จะสร้างโหนด DOM ครบทั้ง 10,000 โหนด แม้ว่าบนหน้าจอจะรองรับได้พร้อมกันเพียงประมาณสองสามโหลรายการ

โหนดส่วนใหญ่จะอยู่นอกหน้าจอและมองไม่เห็น แต่เบราว์เซอร์ก็ยังต้องสร้าง จัดวาง และดูแลโหนดทุกโหนด

โครงสร้าง DOM ขนาดใหญ่ทำให้เบราว์เซอร์มีต้นทุนเพิ่มขึ้นจริง ทั้งการจัดวาง การคำนวณสไตล์ใหม่ และหน่วยความจำล้วนเพิ่มขึ้นตามจำนวนโหนด ดังนั้นรายการขนาดใหญ่จึงทำให้การเรนเดอร์ครั้งแรกล่าช้าและใช้หน่วยความจำมากขึ้น

แม้แต่การโต้ตอบง่าย ๆ ก็อาจกระตุกได้เมื่อเอ็นจินต้องติดตามและจัดวางใหม่หลายหมื่นโหนด

ผู้ใช้จะรู้สึกถึงปัญหามากที่สุดเมื่อเลื่อนรายการขนาดมหาศาล เบราว์เซอร์จะวาดหน้าจอใหม่และอาจคำนวณการจัดวางใหม่ขณะที่เนื้อหาเคลื่อนที่ และเมื่อมีโหนดมากเกินไป อัตราเฟรมจะลดลงจนไม่ลื่นไหล

ผลลัพธ์คือการเลื่อนที่กระตุกและหน่วง ทำให้อินเทอร์เฟซดูเหมือนไม่ตอบสนอง ไม่ว่าแอปส่วนที่เหลือจะทำงานเร็วเพียงใด

คุณสามารถยืนยันปัญหานี้ได้ในแผงหน่วยความจำของ DevTools ในเบราว์เซอร์ ซึ่งรายงานจำนวนโหนด DOM บนหน้าเว็บ รายการที่สร้างโหนดหลายพันโหนดจะแสดงให้เห็นอย่างชัดเจนที่นี่

การดูจำนวนดังกล่าวเพิ่มขึ้นอย่างรวดเร็วเมื่อคุณเรนเดอร์รายการมากขึ้น จะให้หลักฐานที่ชัดเจนว่าขนาด DOM เป็นคอขวด

เวอร์ชวลไลเซชันหรือที่เรียกว่าการทำหน้าต่างเสมือน จะเรนเดอร์เฉพาะรายการที่มองเห็นอยู่ในขณะนั้น รวมถึงพื้นที่สำรองขนาดเล็ก แทนการเรนเดอร์ทั้งรายการ เมื่อคุณเลื่อน รายการที่เข้ามาในมุมมองจะถูกเมานต์ ส่วนรายการที่เลื่อนพ้นมุมมองจะถูกถอดออก

วิธีนี้ทำให้ DOM ที่ใช้งานอยู่มีขนาดเล็ก ไม่ว่าข้อมูลจะมีรายการมากเพียงใด และแยกขนาด DOM ออกจากขนาดชุดข้อมูล

ช่วงรายการที่มองเห็นคำนวณจากตำแหน่งการเลื่อน ความสูงของคอนเทนเนอร์ และความสูงของรายการ การหารความสูงของพื้นที่แสดงผลด้วยความสูงของรายการจะบอกจำนวนแถวโดยประมาณที่พอดีในพื้นที่นั้น และออฟเซ็ตการเลื่อนจะบอกว่าเป็นแถวใด

ไลบรารีใช้ตัวเลขเหล่านี้เพื่อตัดสินใจว่าควรเรนเดอร์ส่วนย่อยของรายการใดในแต่ละขณะ

มีหลายไลบรารีที่ทำหน้าต่างเสมือน react-virtualized มีความสามารถหลากหลายแต่มีขนาดใหญ่กว่า ส่วน react-window เป็นการเขียนใหม่โดยผู้เขียนคนเดียวกันที่มีขนาดเล็กและเน้นเฉพาะด้าน และ TanStack Virtual เป็นตัวเลือกสมัยใหม่ที่ไม่มีส่วนติดต่อผู้ใช้ในตัว

สำหรับรายการส่วนใหญ่ react-window ให้สมดุลที่ยอดเยี่ยมระหว่างความเรียบง่ายและประสิทธิภาพ นี่จึงเป็นเหตุผลที่หลักสูตรนี้เน้นใช้งานไลบรารีดังกล่าว

เวอร์ชวลไลเซชันให้ประโยชน์เมื่อรายการมีความยาวมาก โดยคร่าว ๆ คือหลายร้อยแถวขึ้นไป หรือเมื่อแถวมีรูปภาพและคอมโพเนนต์ซ้อนกันจำนวนมาก กรณีเหล่านี้เป็นช่วงที่ขนาด DOM ส่งผลเสียอย่างแท้จริง

ฟีดที่โหลดต่อเนื่อง ตารางข้อมูลขนาดใหญ่ และประวัติการสนทนาเป็นสถานการณ์ทั่วไปที่การทำหน้าต่างเสมือนกลายเป็นสิ่งจำเป็น ไม่ใช่เพียงตัวเลือก

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

ควรใช้การทำหน้าต่างเสมือนกับชุดข้อมูลที่มีขนาดใหญ่จริง ๆ เท่านั้น ส่วนชุดข้อมูลขนาดเล็ก การใช้ map แบบธรรมดาจะเรียบง่ายกว่าและทำงานได้เร็วเพียงพอ

เมื่อใช้การทำหน้าต่างเสมือน รายการที่มี 100,000 รายการจะเก็บไว้ใน DOM เฉพาะจำนวนเล็กน้อยที่มองเห็นได้ ดังนั้นการเรนเดอร์ครั้งแรกจึงรวดเร็ว ใช้หน่วยความจำน้อย และเลื่อนได้อย่างลื่นไหล

คุณแลกความซับซ้อนในการตั้งค่าเพียงเล็กน้อยกับประสิทธิภาพที่ไม่ขึ้นอยู่กับปริมาณข้อมูลอีกต่อไป ซึ่งเป็นหลักการสำคัญของเวอร์ชวลไลเซชัน

ตัดสินใจว่าเมื่อใดเวอร์ชวลไลเซชันจึงคุ้มค่า

การเรนเดอร์โหนด DOM หลายพันโหนดเพิ่มต้นทุนการจัดวาง การใช้หน่วยความจำ และอาการกระตุกขณะเลื่อน ซึ่งคุณยืนยันได้จากจำนวนโหนดใน DevTools เวอร์ชวลไลเซชันจะเรนเดอร์เฉพาะช่วงที่มองเห็น รวมถึงพื้นที่สำรอง ทำให้ DOM มีขนาดเล็ก

react-window เป็นตัวเลือกที่เน้นเฉพาะด้านและมีน้ำหนักเบาเมื่อเทียบกับ react-virtualized และ TanStack Virtual ควรใช้กับรายการขนาดใหญ่หรือมีเนื้อหาหนัก และไม่ต้องใช้กับรายการสั้นที่เรียบง่าย