รู้จัก Facebook BrowserLab: ทำ Automated Regression เว็บที่ Render ฝั่ง Client

หลังจากที่ Facebook ได้หันมาใช้ JavaScript ที่ทำการ Render ในฝั่ง Client เป็นหลักแทน Server รวมถึงมีการใช้ React มากขึ้น ทาง Facebook เองก็ได้พัฒนาระบบสำหรับตรวจสอบประสิทธิภาพการ Render เหล่านั้นโดยอัตโนมัติและเปิด Open Source ภายใต้ชื่อโครงการ BrowserLab แล้ว

BrowserLab นี้จะทำหน้าที่วิเคราะห์ประสิทธิภาพของโค้ดทุกบรรทัดที่มีการเปลี่ยนแปลงในทุกๆ Commit ของ Facebook และตรวจสอบประเด็นทางด้านประสิทธิภาพที่เปลี่ยนแปลงไป เพื่อให้เหล่าวิศวกรจาก Facebook สามารถตรวจหาโค้ดที่ทำงานได้ช้าเกินกว่า 350ms ในแต่ละหน้าและทำการปรับปรุงโค้ดเหล่านั้นให้ดีขึ้นได้ เพื่อให้ประสบการณ์การใช้งานของเหล่าผู้ใช้งานทั่วโลกยังคงดีอยู่

ในโครงการนี้ทาง Facebook ได้ลองผิดลองถูกมาอย่างต่อเนื่อง โดยการเริ่มต้นจากการใช้ WebDriver, การปรับขยายระบบการทดสอบให้ใหญ่ขึ้น, การใช้ HTTP Proxy และปรับแต่งฝั่ง Server เพื่อช่วยลดความซับซ้อนส่วนที่ไม่จำเป็น, การปรับแต่งฝั่ง Client เพื่อลดความซับซ้อนในการตรวจวัดผล, การจัดการโค้ดที่แสดงผลลัพธ์ส่วนที่เปลี่ยนแปลงอยู่ตลอด และอื่นๆ จนในที่สุดทาง Facebook ก็สามารถตรวจวัดประสิทธิภาพของหน้าเว็บที่เกิดขึ้นในฝั่ง Client ได้อย่างชัดเจน, แบ่งส่วนประสิทธิภาพการ Render ในด้านต่างๆ เช่น Parsing, Painting, Layout, Style และ Scripting ออกจากกันได้, ตรวจสอบความเปลี่ยนแปลงเชิงประสิทธิภาพในแต่ละ Commit ได้ และทำให้ทีมงานวิศวกรของ Facebook แก้ไขปัญหาเชิงประสิทธิภาพได้ดีขึ้น

ด้วยการมาของ BrowserLab นี้ทำให้ปัจจุบัน Facebook สามารถตรวจสอบประสิทธิภาพของเว็บบนฝั่ง PC ได้เป็นอย่างดี และมีระบบ CT-Scan สำหรับตรวจสอบประสิทธิภาพของ Native Mobile Apps แล้ว ส่วนในอนาคต Facebook เองก็วางแผนที่จะขยายไปทำ Mobile Device Lab เพื่อตรวจสอบประสิทธิภาพของเว็บบน Mobile Device บ้างเช่นกัน รวมถึงจะเริ่มพัฒนาประสิทธิภาพของ Interaction ต่างๆ ที่เกิดขึ้นบนหน้าเว็บเพิ่มเติมไปจากการวัด Load Time เฉยๆ อีกด้วย

ที่มา: https://code.facebook.com/posts/1368798036482517/browserlab-automated-regression-detection-for-the-web/?utm_source=codedot_rss_feed&utm_medium=rss&utm_campaign=RSS+Feed