Некоторое время назад Уилсон Пейдж написал для Smashing Magazine отличную статью, в которой рассказывает, как они воплотили в жизнь веб-приложение Financial Times. В статье Уилсон отмечает:
По мере того, как приложение начало расти, мы обнаружили, что производительность становится все хуже и хуже.
Мы провели несколько часов в хронике инструментов разработчика Chrome и нашли виновника: шок, ужас! — это был наш новый лучший друг, флексбокс. График времени показал, что на создание некоторых макетов уходит около 100 миллисекунд; переработка наших макетов без флексбокса сократила это время до 10 миллисекунд!
Комментарии Уилсона касались оригинального (устаревшего) флексбокса, который использовал display: box; . К сожалению, у них так и не было возможности ответить, был ли новый флексбокс ( display: flex; ) быстрее, но на CSS Tricks Крис Койер открыл этот вопрос .
Мы спросили Ояна Вафая , который написал большую часть реализации в WebKit и Blink, о новой модели и реализации флексбокса.
В новом коде flexbox гораздо меньше кодовых путей многопроходной компоновки. Тем не менее, вы все равно можете довольно легко использовать многопроходные кодовые пути (например
flex-align: stretchчасто бывает двухпроходным). В общем, в обычном случае он должен быть намного быстрее, но вы можете построить случай, в котором он будет столь же медленным.
Тем не менее, если вам это сойдет с рук, обычный макет блока (не плавающий) обычно будет таким же быстрым или даже быстрее, чем новый флексбокс, поскольку он всегда однопроходный. Но новый flexbox должен быть быстрее, чем использование таблиц или написание собственного кода макета на основе JS.
Чтобы увидеть разницу в цифрах, я провел прямое сравнение старого и нового синтаксиса.
Тестирование старого и нового Flexbox
- старый флексбокс против нового флексбокса (с резервным вариантом)
- 500 элементов на странице
- оценка стоимости загрузки страницы для размещения элементов
- в среднем за 3 запуска каждого
- измерено на рабочем столе. (мобильный телефон будет примерно в 10 раз медленнее)
Старый флексбокс: затраты на макет ~43,5 мс.
Новый флексбокс: затраты на макет ~18,2 мс.
Резюме: старый компьютер в 2,3 раза медленнее нового.
Что вы должны сделать?
При использовании flexbox всегда пишите новые материалы : синтаксис твинера IE10 и новый обновленный flexbox, который есть в Chrome 21+, Safari 7+, Firefox 22+, Opera (и Opera Mobile) 12.1+, IE 11+ и Blackberry 10. +. Во многих случаях вы можете вернуться к устаревшему flexbox , чтобы использовать некоторые старые мобильные браузеры.
Помните: инструменты, а не правила
Гораздо важнее оптимизировать то, что имеет значение. Всегда используйте временную шкалу, чтобы выявить узкие места, прежде чем тратить время на оптимизацию того или иного вида операций.
Фактически, мы связались с Уилсоном и командой Financial Times Labs и в результате улучшили охват Chrome DevTools инструментов повышения производительности макета. Вскоре мы добавим возможность просматривать границу ретрансляции элемента, а события макета на временной шкале загружаются с подробной информацией об области действия, корне и стоимости каждого макета:
