Cách đây không lâu, Wilson Page đã viết một bài viết tuyệt vời cho Tạp chí Smashing, phân tích cách họ đưa ứng dụng web Financial Times vào cuộc sống. Trong bài viết này, 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 kém đi.
Chúng tôi đã dành vài giờ trong 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 sốc, kinh dị! — đó là người bạn thân nhất mới của chúng tôi, 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ó 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ề flexbox nguyên gốc (cũ) sử dụng display: box;. Thật không may là họ không bao giờ có cơ hội trả lời nếu flexbox mới hơn (display: flex;) nhanh hơn, nhưng đối với 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 quá trình triển khai trong AppCompat 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 bố cục nhiều luồng hơn rất nhiều. Tuy nhiên, bạn vẫn có thể nhấn các đường dẫn mã nhiều luồng khá dễ dàng (ví dụ:
flex-align: stretchthường là 2 đường truyền). Nói chung, nó sẽ nhanh hơn nhiều trong trường hợp phổ biến, nhưng bạn có thể xây dựng trường hợp trong đó nó cũng chậm như nhau.
Tuy nhiên, nếu bạn có thể sử dụng được, thì bố cục khối thông thường (không nổi) thường sẽ có tốc độ nhanh hơn hoặc nhanh hơn so với flexbox mới vì nó luôn là một lượt truyền. Nhưng flexbox mới sẽ nhanh hơn so với sử dụng bảng hoặc viết mã bố cục cơ sở JS tuỳ chỉnh.
Để thấy sự khác biệt về số lượng, tôi đã so sánh trực tiếp cú pháp v new cũ.
Điểm chuẩn Flexbox cũ so với mới
- flexbox cũ so với flexbox mới (có tính năng 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ử
- tính trung bình trong 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)
flexbox cũ: chi phí bố cục là ~43,5 mili giây
Linh hoạt mới: chi phí bố cục là ~18,2 mili giây
Tóm tắt: Phiên bản cũ chậm hơn 2,3 lần so với giao diện mới.
Bạn nên làm gì?
Khi sử dụng flexbox, hãy luôn ghi nhận nội dung mới: cú pháp tweener IE10 và flexbox mới được cập nhật trong Chrome 21+, Safari 7+, Firefox 22+, Opera (& Opera Mobile) 12.1+, IE 11+ và Blackberry 10+. Trong nhiều trường hợp, bạn có thể dự phòng lại các trình duyệt flexbox cũ dành cho thiết bị di động để chọn lại một số trình duyệt cũ dành cho thiết bị di động
Hãy nhớ: Công cụ, chứ không phải quy tắc
Điều quan trọng hơn là tối ưu hoá những yếu tố quan trọng. Luôn sử dụng dòng thời gian để xác định nút thắt cổ chai của bạn trước khi dành thời gian tối ưu hoá một loại hoạt động.
Trên thực tế, chúng tôi đã kết nối với Wilson và nhóm Financial Times Labs và kết quả là đã cải thiện mức độ phù hợp của công cụ hiệu suất bố cục trong Công cụ của Chrome cho nhà phát triển. Chúng tôi sẽ sớm bổ sung khả 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 dòng thời gian 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 mỗi bố cục:
