Cách đây không lâu, Wilson Page đã viết một bài viết hay cho Smashing Magazine, trong đó đi sâu vào cách họ tạo ra ứng dụng web Financial Times. Trong bài viết, Wilson lưu ý:
Khi ứng dụng bắt đầu phát triển, chúng tôi nhận thấy hiệu suất ngày càng giảm.
Chúng tôi đã dành vài giờ để xem dòng thời gian của Công cụ dành cho nhà phát triển Chrome và tìm ra thủ phạm: Thật kinh hoàng! — đó là người bạn thân mới của chúng ta, flexbox. Tiến trình cho thấy một số bố cục mất gần 100 mili giây; việc làm lại bố cục mà không cần flexbox đã giảm thời gian này xuống còn 10 mili giây!
Nhận xét của Wilson là về hộp flex ban đầu (cũ) sử dụng display: box;. Thật không may, họ không bao giờ có cơ hội trả lời liệu flexbox mới hơn (display: flex;) có nhanh hơn hay không, nhưng trên CSS Tricks, Chris Coyier đã mở ra câu hỏi đó.
Chúng tôi đã hỏi Ojan Vafai, người đã viết phần lớn nội dung triển khai trong WebKit và Blink, về mô hình và cách triển khai flexbox mới hơn.
Mã flexbox mới có ít đường dẫn mã bố cục nhiều lượt hơn rất nhiều. Tuy nhiên, bạn vẫn có thể dễ dàng gặp phải các đường dẫn mã nhiều lượt truyền (ví dụ:
flex-align: stretchthường là 2 lượt truyền). Nhìn chung, phương thức này sẽ nhanh hơn nhiều trong trường hợp phổ biến, nhưng bạn có thể tạo một trường hợp mà phương thức này cũng chậm như vậy.
Tuy nhiên, nếu bạn có thể sử dụng, bố cục khối thông thường (không phải nổi) thường sẽ nhanh hoặc nhanh hơn flexbox mới vì nó luôn là một lần truyền. Tuy nhiên, flexbox mới sẽ nhanh hơn so với việc sử dụng bảng hoặc viết mã bố cục tuỳ chỉnh dựa trên JS.
Để xem sự khác biệt về số liệu, tôi đã so sánh trực tiếp cú pháp cũ với cú pháp mới.
Điểm chuẩn Flexbox cũ so với mới
- hộp linh hoạt cũ so với hộp linh hoạt mới (có phương án dự phòng)
- 500 phần tử trên mỗi trang
- đánh giá chi phí tải trang để bố trí các phần tử
- trung bình trên 3 lần chạy
- được đo lường trên máy tính. (thiết bị di động sẽ chậm hơn khoảng 10 lần)
Hộp linh hoạt cũ: chi phí bố cục khoảng 43,5 mili giây
Hộp linh hoạt mới: chi phí bố cục ~18,2 mili giây
Tóm tắt: Phiên bản cũ chậm hơn phiên bản mới 2,3 lần.
Bạn nên làm gì?
Khi sử dụng flexbox, hãy luôn tạo nội dung mới: cú pháp trình tạo hình ảnh động IE10 và flexbox mới được cập nhật trong Chrome 21 trở lên, Safari 7 trở lên, Firefox 22 trở lên, Opera (& Opera Mobile) 12.1 trở lên, IE 11 trở lên và Blackberry 10 trở lên. Trong nhiều trường hợp, bạn có thể sử dụng lại flexbox cũ để chọn một số trình duyệt di động cũ.
Hãy nhớ: Đây là công cụ chứ không phải quy tắc
Quan trọng hơn là bạn phải tối ưu hoá những yếu tố quan trọng. Luôn sử dụng tiến trình để xác định nút thắt cổ chai trước khi dành thời gian tối ưu hoá một loại thao tác.
Trên thực tế, chúng tôi đã kết nối với Wilson và nhóm Financial Times Labs, nhờ đó cải thiện phạm vi của Chrome DevTools về công cụ hiệu suất bố cục. Chúng tôi sẽ sớm thêm tính năng xem ranh giới bố cục lại của một phần tử và các sự kiện Bố cục trong tiến trình sẽ được tải cùng với thông tin chi tiết về phạm vi, gốc và chi phí của từng bố cục:
