ปรับปรุงการใช้หน่วยความจำส่วนหน้าให้ดียิ่งขึ้น 30 เท่าในการโหลด Carousel

ในไตรมาสที่ 2 ของปี 2020 เราได้ทำการปรับโครงสร้างทางเทคนิคบนหน้าประสบการณ์ โดยเขียนใหม่ด้วย React และใช้ REST API แต่ระหว่างการดำเนินการ เราพบปัญหาที่น่าสนใจ

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

โปรไฟล์หน่วยความจำ

เราสามารถใช้เครื่องมือสำหรับนักพัฒนาของ Chrome เพื่อวิเคราะห์ปัญหานี้ได้ ภาพแรกจะถูกบันทึกเมื่อหน้าเว็บโหลดครั้งแรก และภาพที่สองจะถูกบันทึกหลังจากที่ผู้ใช้คลิกเลื่อนถัดไปในคารูเซลหนึ่งครั้ง 12 ครั้ง เราพบว่ามีการเพิ่มขึ้นของหน่วยความจำเกือบ 9.7MB จากโหนดสตริงมากกว่า 100 โหนด และการเรนเดอร์ภาพขนาดย่อที่เพิ่มขึ้น

โซลูชัน

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

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

โปรไฟล์หน่วยความจำ

มาดูเครื่องมือสำหรับนักพัฒนาของ Chrome กันอีกครั้ง เช่นเดียวกับก่อนหน้านี้ ภาพแรกจะถูกถ่ายในเวลาที่เริ่มต้น และภาพที่สองจะถูกถ่ายหลังจากเลื่อนไปทางขวา 12 ครั้ง ตอนนี้ การโหลดรายการมากกว่า 100 รายการจะใช้หน่วยความจำเพิ่มขึ้นเพียง 0.3MB เท่านั้น เมื่อเทียบกับ 9.7MB ก่อนหน้านี้

อะไรต่อไป?

นอกจากการปรับปรุงส่วนประกอบของคาโรเซลให้สามารถจัดการกับหน้าต่างข้อมูลขนาดใหญ่ได้แล้ว เมื่อเราทำการปรับโครงสร้างคุณลักษณะ/หน้าเว็บ เราจำเป็นต้องเพิ่มเกณฑ์มาตรฐานเพิ่มเติมเพื่อจับข้อมูลประสิทธิภาพ

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