เมื่อสักครู่ Wilson Page ได้เขียนบทความดีๆ สำหรับ Smashing Magazine เกี่ยวกับวิธีทำให้เว็บแอป Financial Times กลายเป็นจริง ในบทความนี้ Wilson ได้อธิบายว่า
เมื่อแอปเริ่มเติบโตขึ้น เราพบว่าประสิทธิภาพการทำงานแย่ลงเรื่อยๆ
เราใช้เวลา 2-3 ชั่วโมงในไทม์ไลน์ของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome และพบสาเหตุของปัญหา ความน่าสยดสยอง! ซึ่งเป็นเพื่อนใหม่ของเราที่ชื่อ Flexbox ไทม์ไลน์แสดงให้เห็นว่าบางเลย์เอาต์ใช้เวลาเกือบ 100 มิลลิวินาที การปรับเลย์เอาต์ของเราใหม่โดยไม่ใช้ Flexbox ก็ลดเหลือ 10 มิลลิวินาที
ความคิดเห็นของ Wilson เกี่ยวกับ Flexbox รุ่นเดิม (เดิม) ที่ใช้ display: box; ขออภัยที่พวกเขาไม่มีโอกาสตอบคำถามว่า Flexbox ที่ใหม่กว่า (display: flex;) เร็วกว่าหรือไม่ แต่พอใช้คำสั่ง CSS แล้ว Chris Coyier ก็เปิดคำถามนั้น
เราได้ถาม Ojan Vafai ที่เขียนเรื่องการติดตั้งใช้งานส่วนใหญ่ใน WebKit และ Blink เกี่ยวกับโมเดลและการติดตั้งใช้งาน Flexbox ที่ใหม่กว่า
โค้ด Flexbox ใหม่มี Codepath แบบมัลติพาสน้อยกว่ามาก แต่คุณจะยังกดโค้ดเส้นทางหลายพาสได้ค่อนข้างง่าย (เช่น
flex-align: stretchมักจะเป็น 2-Pass) โดยทั่วไปแล้ว การดำเนินการดังกล่าวควรจะเร็วกว่ากรณีทั่วไปมาก แต่คุณจะสร้างกรณีที่ทำได้ช้าเท่าๆ กันก็ได้
อย่างไรก็ตาม หากคุณสามารถหนีปัญหาเหล่านี้ไปได้ เลย์เอาต์แบบบล็อกปกติ (ไม่ลอย) มักจะเร็วหรือเร็วกว่า Flexbox ใหม่เนื่องจากเป็นแบบ Single Pass เสมอ แต่ Flexbox ใหม่ควรเร็วกว่าการใช้ตารางหรือเขียนโค้ดเลย์เอาต์ JS-base แบบกำหนดเอง
ผมได้เปรียบเทียบไวยากรณ์แบบเก่ากับใหม่ เพื่อให้เห็นความแตกต่างระหว่างตัวเลข
การเปรียบเทียบเดิมกับ Flexbox ใหม่
- old Flexbox กับ Flexbox ใหม่ (มีสำรอง)
- 500 องค์ประกอบต่อหน้า
- การประเมินต้นทุนในการโหลดหน้าเว็บเพื่อออกแบบองค์ประกอบ
- เฉลี่ยจากการเรียกใช้แต่ละครั้ง 3 ครั้ง
- วัดบนเดสก์ท็อป (อุปกรณ์เคลื่อนที่จะทำงานช้าลงประมาณ 10 เท่า)
เฟล็กซ์บ็อกซ์เดิม: ค่าใช้จ่ายสำหรับเลย์เอาต์ ~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+ ซึ่งในหลายๆ กรณี คุณสามารถเลือกใช้ Flexbox เบราว์เซอร์รุ่นเก่ากว่าได้ในบางกรณี
ข้อควรจำ: เครื่องมือ ไม่ใช่กฎ
แต่สิ่งที่สำคัญกว่านั้นคือการเพิ่มประสิทธิภาพสิ่งที่สำคัญ ใช้ไทม์ไลน์เพื่อระบุจุดคอขวดของคุณก่อนที่จะใช้เวลาในการเพิ่มประสิทธิภาพการดำเนินการประเภทใดประเภทหนึ่ง
อันที่จริง เราเชื่อมต่อกับ Wilson และทีม Financial Times Labs และส่งผลให้มีการปรับปรุงการครอบคลุมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ของเครื่องมือประสิทธิภาพเลย์เอาต์ ในเร็วๆ นี้เราจะเพิ่มความสามารถในการดูขอบเขตการส่งต่อขององค์ประกอบ และเหตุการณ์ของเลย์เอาต์ในไทม์ไลน์เต็มไปด้วยรายละเอียดเกี่ยวกับขอบเขต รูท และต้นทุนของเลย์เอาต์แต่ละรายการ ดังนี้
