дисплей: flex; vs calc(); производительность

Question

Я пришел сегодня в дискуссию, где мне интересно, какой самый эффективный способ иметь двух div друг на друга.

С одной стороны, я обожаю использовать display:flex;, с другой стороны есть возможность использовать calc(), причина в том, что у нашего div есть отступы, и нам нужно уменьшить ширину прописью. Корпус:

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

Оба должны быть на 50% ширины. По умолчанию CSS является:

* { 
-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; 
} 

display:flex; способ будет дополнительно:

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

calc() путь будет:

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

или:

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

я не нужна таблица l ayout в моем css. Кроме того, нам не нужно заботиться о версиях браузера, это должно быть функционально только в самых последних версиях.

Что было бы рекомендовано использовать? Чем больше производительность?

Я уже нашел статью о том, что производительность была увеличена уже много. Link

Answer 1

Я провел простой тест из любопытства и там, кажется, не будет каких-либо различий в производительности между float+calc против flex, кроме IE рендеринга и гораздо медленнее, чем FF и Chrome.

Из related article:

Новый Flexbox код имеет намного меньше многоходовой макета codepaths. Вы все еще можете легко удалять многопроходные кодеки (например, flex-align: растяжка часто 2-х прохода). В общем случае в общем случае это должно быть намного больше , но вы можете построить случай, когда он равен в равной степени медленным.

Сказанное, если вы можете уйти от него, регулярный макет блока (не плавающий), как правило, будет таким же быстрым или быстрым, как новый flexbox, поскольку это всегда однопроходный. Но новый flexbox должен быть быстрее, чем с использованием таблиц или написания собственного кода компоновки JS-base.

Я уверен, что calc() делает макет блока требуется несколько проходы тоже :)

---

LE: Был a bug in Firefox, что сделали перекомпоновки очень медленно, когда вы имели 4-5 вложенное flexboxes, но он был исправлен в последних версиях (37+).