Cách đây một chút, Wilson Page đã viết một bài viết tuyệt vời cho Smashing Magazine để tìm hiểu về 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 tệ.
Chúng tôi đã dành vài giờ trong dòng thời gian của Công cụ nhà phát triển Chrome và tìm ra nguyên nhân: Quá kinh dị! — đó chính 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; làm lại bố cục của chúng tôi mà không có flexbox giảm thời gian này xuống còn 10 mili giây!
Bình luận của Wilson là về hộp linh hoạt (cũ) ban đầu 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 nói về Thủ thuật CSS, Chris Coyier đã mở ra câu hỏi đó.
Chúng tôi hỏi Ojan Vafai, người đã viết phần lớn hoạt động triển khai trong WebKit và Blink, về mô hình và cách triển khai hộp linh hoạt mới hơn.
Mã Flexbox mới có ít đường dẫn mã bố cục nhiều lần truyền hơn. Tuy nhiên, bạn vẫn có thể dễ dàng nhấn vào đường dẫn mã nhiều lần (ví dụ:
flex-align: stretchthường là 2 lần). Nhìn chung, thông thường sẽ nhanh hơn nhiều, nhưng bạn có thể xây dựng một trường hợp trong đó tốc độ cũng chậm tương đương.
Tuy nhiên, nếu bạn có thể thoát khỏi nó, thì bố cục khối thông thường (không nổi) thường sẽ nhanh bằng hoặc nhanh hơn flexbox mới vì bố cục này luôn là một lượt truyền. Tuy nhiên, hộp linh hoạt mới sẽ nhanh hơn so với việc 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ố 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 hộp linh hoạt cũ và 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 để sắp xếp các yếu tố
- tính trung bình trên 3 lần chạy mỗi lần
- đượ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
Hộp 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 phiên bản mới.
Bạn nên làm gì?
Khi sử dụng flexbox, hãy luôn đề cập đến nội dung mới: cú pháp tweener của IE10 và flexbox mới được cập nhật có 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ể thực hiện phương án dự phòng cho flexbox cũ để sử dụng một số trình duyệt cũ dành cho thiết bị di động.
Lưu ý: Công cụ chứ không phải quy tắc
Điều quan trọng hơn là tối ưu hoá các yếu tố quan trọng. Hãy luôn sử dụng tiến trình để xác định điểm tắc nghẽn trước khi dành thời gian tối ưu hoá một kiểu hoạt động.
Trên thực tế, chúng tôi đã liên kết với Wilson và nhóm Phòng thí nghiệm Financial Times và do đó, đã cải thiện phạm vi của Công cụ hiệu suất bố cục cho Công cụ của Chrome cho nhà phát triển. Chúng tôi sẽ sớm bổ sung tính năng xem ranh giới bố cục lại của một phần tử, đồng thời các sự kiện Bố cục trong dòng thời gian sẽ được tải thông tin chi tiết về phạm vi, gốc và chi phí của từng bố cục:
