เมื่อไม่นานมานี้ Wilson Page ได้เขียนบทความที่ยอดเยี่ยมสำหรับ Smashing Magazine ซึ่งเจาะลึกวิธีที่พวกเขาทำให้เว็บแอปของ Financial Times มีชีวิตชีวา Wilson เขียนไว้ในบทความว่า
เมื่อแอปเริ่มเติบโตขึ้น เราพบว่าประสิทธิภาพแย่ลงเรื่อยๆ
เราใช้เวลาหลายชั่วโมงในไทม์ไลน์ของเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ Chrome และพบผู้ร้ายแล้ว น่าตกใจ — นั่นคือ Flexbox เพื่อนใหม่ของเรา ไทม์ไลน์แสดงให้เห็นว่าเลย์เอาต์บางรายการใช้เวลาเกือบ 100 มิลลิวินาที การทําเลย์เอาต์ใหม่โดยไม่ใช้ Flexbox ทำให้เวลานี้ลดลงเหลือ 10 มิลลิวินาที
ความคิดเห็นของ Wilson เกี่ยวข้องกับ flexbox เดิม (เดิม) ที่ใช้ display: box; แต่น่าเสียดายที่พวกเขาไม่ได้มีโอกาสตอบคำถามว่า Flexbox เวอร์ชันใหม่ (display: flex;) เร็วกว่าไหม แต่ Chris Coyier ได้เปิดคำถามนั้นใน CSS Tricks
เราถาม Ojan Vafai ผู้เขียนการใช้งานส่วนใหญ่ใน WebKit และ Blink เกี่ยวกับรูปแบบและการใช้งาน Flexbox เวอร์ชันใหม่
โค้ด Flexbox ใหม่มีเส้นทางโค้ดเลย์เอาต์แบบหลายรอบน้อยกว่ามาก แต่คุณยังคงพบเส้นทางโค้ดแบบหลายรอบได้ค่อนข้างง่าย (เช่น
flex-align: stretchมักจะเป็นแบบ 2 รอบ) โดยทั่วไปแล้ว การดำเนินการนี้จะเร็วกว่ามากในเคสทั่วไป แต่คุณก็สร้างเคสที่ช้าพอๆ กันได้
อย่างไรก็ตาม หากใช้รูปแบบบล็อกปกติ (ไม่ใช่แบบลอย) ได้ โดยทั่วไปจะเร็วเท่ากับหรือเร็วกว่า Flexbox ใหม่ เนื่องจากเป็นรูปแบบที่ทำงานแบบผ่านครั้งเดียวเสมอ แต่ Flexbox ใหม่ควรทำงานได้เร็วกว่าการใช้ตารางหรือการเขียนโค้ดเลย์เอาต์แบบ JS ที่กําหนดเอง
เราเปรียบเทียบไวยากรณ์แบบเก่ากับแบบใหม่เพื่อดูความแตกต่างของตัวเลข
การเปรียบเทียบ Flexbox เวอร์ชันเก่ากับเวอร์ชันใหม่
- Flexbox เก่าเทียบกับ Flexbox ใหม่ (มีการแสดงผลสำรอง)
- องค์ประกอบ 500 รายการต่อหน้า
- การประเมินต้นทุนการโหลดหน้าเว็บเพื่อวางองค์ประกอบ
- ค่าเฉลี่ยจาก 3 รันไทม์
- วัดผลบนเดสก์ท็อป (อุปกรณ์เคลื่อนที่จะช้าลงประมาณ 10 เท่า)
Flexbox เดิม: ต้นทุนเลย์เอาต์ ~43.5 มิลลิวินาที
Flexbox ใหม่: ต้นทุนเลย์เอาต์ ~18.2 มิลลิวินาที
สรุป: เวอร์ชันเก่าช้ากว่าเวอร์ชันใหม่ 2.3 เท่า
คุณควรทำอย่างไร
เมื่อใช้ Flexbox ให้เขียนโค้ดสำหรับเวอร์ชันใหม่เสมอ ซึ่งได้แก่ ไวยากรณ์ตัวเชื่อมของ IE10 และ Flexbox เวอร์ชันอัปเดตใหม่ที่มีใน Chrome 21 ขึ้นไป, Safari 7 ขึ้นไป, Firefox 22 ขึ้นไป, Opera (& Opera Mobile) 12.1 ขึ้นไป, IE 11 ขึ้นไป และ Blackberry 10 ขึ้นไป ในหลายกรณี คุณสามารถใช้ Flexbox รุ่นเดิมเพื่อรองรับเบราว์เซอร์บนอุปกรณ์เคลื่อนที่รุ่นเก่าบางรุ่น
โปรดทราบว่าเครื่องมือเหล่านี้ไม่ใช่กฎ
แต่สิ่งสําคัญกว่าคือการเพิ่มประสิทธิภาพสิ่งที่สําคัญ ใช้ไทม์ไลน์เพื่อระบุจุดคอขวดเสมอก่อนที่จะเสียเวลาเพิ่มประสิทธิภาพการดำเนินการประเภทใดประเภทหนึ่ง
เราติดต่อ Wilson และทีม Financial Times Labs แล้ว และผลลัพธ์ที่ได้คือเราได้ปรับปรุงความครอบคลุมของเครื่องมือวัดประสิทธิภาพเลย์เอาต์ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome ในเร็วๆ นี้ เราจะเพิ่มความสามารถในการดูขอบเขตการจัดเรียงใหม่ขององค์ประกอบ และโหลดเหตุการณ์การจัดเรียงในไทม์ไลน์พร้อมรายละเอียดของขอบเขต รูท และต้นทุนของเลย์เอาต์แต่ละรายการ
