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