When building a Web Application, one of the first things that’s needed is a way to lay out the content of your app.
Lots of designers use imaginary grids to lay out content, whether it’s for a site or app. The CSS group has been working hard to make layouts easier, and as part of that have produced the CSS Grid Layout Module which is now emerging in browsers.
This feature is available to try out in Chrome behind an experimental flag. It’s also implemented in IE since version 10, and likely to be in most browsers soon.
Here’s an overview video that explains a lot about how CSS Grid Layout works (slides are here):
Using CSS Grid Layout in Chrome now is easy. First thing you need to do is turn on the experimental flag to enable the feature.
First load the chrome://flags URL and scroll down to the option to Enable experimental Web Platform features as shown below:
Just click Enable to turn the flag on, and you should see a prompt to restart the browser that looks like this:
Now just click the Relaunch Now button to restart your browser and you’ll be all set to try out CSS Grid Layout.
CSS Grid Layout is a great new primitive for web content, but as usual we’re all keen to hear what developers think about it. There are lots of ways to give feedback – leave a comment here, send mail to the W3C CSS Working Group list with “[css-grid]” in the subject line, log bugs, or blog and tweet what you think of it. We look forward to seeing the great layouts you build with this super useful new feature.
TL;DR: Old flexbox (display: box) is 2.3x slower than new flexbox (display: flex).
A bit ago, Wilson Page wrote a great article for Smashing Magazine digging into how they brought the Financial Times webapp to life. In the article, Wilson notes:
As the app began to grow, we found performance was getting worse and worse.
We spent a good few hours in Chrome Developers Tools’ timeline and found the culprit: Shock, horror! — it was our new best friend, flexbox. The timeline showed that some layouts were taking close to 100 milliseconds; reworking our layouts without flexbox reduced this to 10 milliseconds!
Wilson's comments were about the original (legacy) flexbox that used
display: box;. Unfortunately they never got a chance to answer if the newer flexbox (
display: flex;) was faster, but over on CSS Tricks, Chris Coyier opened that question.
We asked Ojan Vafai, who wrote much of the implementation in WebKit & Blink, about the newer flexbox model and implementation.
The new flexbox code has a lot fewer multi-pass layout codepaths. You can still hit multi-pass codepaths pretty easily though (e.g.
flex-align: stretchis often 2-pass). In general, it should be much faster in the common case, but you can construct a case where it's equally as slow.
That said, if you can get away with it, regular block layout (non-float), will usually be as fast or faster than new flexbox since it's always single-pass. But new flexbox should be faster than using tables or writing custom JS-base layout code.
To see the difference in numbers, I made a head-to-head comparison of old v new syntax.
Summary: Old is 2.3x slower than new.
When using flexbox, always author for the new stuff: the IE10 tweener syntax and the new updated flexbox that’s in Chrome 21+, Safari 7+, Firefox 22+, Opera (& Opera Mobile) 12.1+, IE 11+, and Blackberry 10+. In many cases you can do a fallback to the legacy flexbox to pick up some older mobile browsers.
display:table-celland it hit 30ms, right between the two flexbox implementations.
What’s more important is optimizing what matters. Always use the timeline to identify your bottlenecks before spending time optimizing one sort of operation.
In fact, we've connected with Wilson and the Financial Times Labs team and, as a result, improved the Chrome DevTools coverage of layout performance tooling. We'll soon be adding the ability to view the relayout boundary of an element, and Layout events in the timeline are loaded with details of the scope, root, and cost of each layout: