Performance improvements by using display: inline-block on the startpage

by Ingo Chao and Christopher Blum

Our start page after logging in got faster. It takes significantly less time until the user can interact with the application.

Before, the alignment of the start page boxes (e.g. ‘What’s new in my network’, ‘Visitors to my profile’) was calculated via JavaScript, a time-consuming task. Since drag and drop of the boxes always causes a reflow,  any new combination of boxes implied a re-calculation.

This was acceptable until the new feature boxes required the ability to self-adjust in dimension. The idle time while waiting for the content to render plus the calculation of the alignment could, depending on the browser’s JavaScript engine, easily have taken a few seconds or more, especially in Internet Explorer.

We now use the CSS 2.1 property display: inline-block for these boxes (and some hacks for Firefox 2 and Internet Explorer < 8 that do not support this property). Inline-block is a CSS-concept of blocks that form ‘lines’ (in CSS-terms: line-boxes), similar to what single words in a text do. Even if a word is taller, the line contains all the words.

The browser flows the resulting lines of boxes into a vertical stack. The start page, even if a reflow occurs, self-aligns by pure CSS. In fact the old JavaScript solution tried to re-engineer the behavior of inline-blocks. Still, drag and drop requires Scriptaculous’ JavaScript methods, but not the alignment, which is time-critical for frontend performance and user experience.