hiển thị: flex; vs calc(); hiệu suất

Question

Tôi đã đến hôm nay trong một cuộc thảo luận, nơi tôi đang tự hỏi cách nào có hiệu quả nhất để có hai div bên cạnh nhau.

Một mặt, tôi thích sử dụng display:flex;, ở phía bên kia có những lựa chọn để sử dụng calc(), lý do là div chúng tôi có đệm và chúng tôi cần phải giảm chiều rộng của đệm. Trường hợp:

<div class='container'> 
<div class='inner'></div> 
<div class='inner'></div> 
</div> 

Cả hai đều phải rộng 50%. Các css mặc định là:

* { 
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
-moz-box-sizing: border-box; /* Firefox, other Gecko */ 
box-sizing: border-box;   /* Opera/IE 8+ */ 
} 
.container { 
height: 100%; 
width: 100%; 
} 
.inner { 
width: 50%; 
padding: 20px; 
} 

Cách display:flex; sẽ thêm:

.container { 
display: -webkit-box; 
display: -moz-box; 
display: -ms-flexbox; 
display: -webkit-flex; 
display: flex; 
flex-wrap: nowrap; 
align-items: stretch; 
align-content: stretch; 
} 

Cách calc() sẽ là:

.inner { 
width: calc(100% - 40px); 
display: inline-block; 
} 

hay:

.inner { 
width: calc(100% - 40px); 
float: left; 
} 

tôi làm không muốn bất kỳ bảng l ayout trong css của tôi. Ngoài ra, chúng tôi không cần phải chăm sóc các phiên bản trình duyệt, điều này sẽ chỉ hoạt động trong các phiên bản mới nhất, luôn luôn.

Điều gì sẽ được khuyến nghị sử dụng? Điều gì có hiệu suất hơn?

Tôi đã tìm thấy một bài viết rằng hiệu suất đã được tăng lên rất nhiều. Link

Answer 1

Tôi đã chạy một thử nghiệm đơn giản về sự tò mò và dường như không có bất kỳ sự khác biệt nào về hiệu suất giữa float+calc và flex, ngoài IE rendering chậm hơn nhiều so với FF và Chrome.

Từ một related article:

Mã flexbox mới có ít nhiều codepaths bố trí đa-pass. Tuy nhiên, bạn vẫn có thể nhấn nhiều mã thông báo khá dễ dàng (ví dụ: flex-align: stretch thường là 2-pass). Nói chung, sẽ nhanh hơn nhiều so với trường hợp phổ biến là , nhưng bạn có thể xây dựng một trường hợp trong đó không kém phần chậm.

Điều đó nói rằng, nếu bạn có thể nhận được ngay với nó, bố trí khối thường xuyên (không phao), thường sẽ càng nhanh hoặc nhanh hơn flexbox mới kể từ nó luôn luôn đơn-pass. Nhưng flexbox mới nên nhanh hơn so với việc sử dụng các bảng hoặc viết mã bố cục cơ sở JS tùy chỉnh.

Tôi khá chắc chắn rằng calc() làm cho một bố cục khối đòi hỏi nhiều qua quá :)

---

LE: Có a bug in Firefox khiến chỉnh lại dòng rất chậm khi bạn có 4-5 flexboxes lồng nhau, nhưng nó đã được sửa trong các phiên bản mới nhất (37+).