ボックス要素の横並びをCSSで行う場合、皆さんはどうしていますか? 従来から知られているfloat
プロパティを使った方法の他に、CSS3から「Flexbox」を使用する方法も選択肢として加わりました。では、Flexboxとfloatはどちらの方が処理速度が早いのでしょうか? 本記事ではこの2つをパフォーマンス面から比較し、最適なボックスレイアウト手法について検証します。
Flexboxとは?
Flexbox(CSS Flexible Box Layout Module)は、floatに代わる新しいボックスレイアウト方法。横並びはもちろん、ボックスを均等位置に配置したり、整列や中央揃えなど、柔軟なレイアウトが可能です。今や全てのモダンブラウザーで使用することができ(※1)、Bootstrap 4の新たなレイアウト方法として採用される(※2)等、次世代の標準となっていくであろう技術です。
※1 Flexboxは現在全てのモダンブラウザーで使用可能(参考記事「Can I use Flexbox」)。現在はW3Cで仕様策定段階(参考記事「Flexboxの仕様って勧告に至ってないけど使っていいの?迷ったのでW3Cの仕様策定プロセスを読んでみた – Rriver」)。
※2 Bootstrap 4ではレイアウト方法の一つとしてFlexboxを選択可能(参考記事「Flexbox · Bootstrap 」)。
パフォーマンス測定方法
Webページを表示した時のパフォーマンスと、ボックスの横並びレイアウトを適応した時と解除した時のパフォーマンス、それぞれFlexboxとfloatでどれくらいの差があるかを検証しました。検証に用いたブラウザーとツールは下記です。
OS | ブラウザー | 検証手段 |
---|---|---|
macOS | Google Chrome 49 | デベロッパーツール |
macOS | Firefox 45 | 開発ツール |
macOS | Safari 9 | Webインスペクタ |
Windows 10 | Microsoft Edge 20 | F12 開発者ツール |
Windows 10 | Internet Explorer 11 | F12 開発者ツール |
ページを表示した時のパフォーマンス比較
ページを表示した時、Flexboxとfloatにパフォーマンスの違いがあるかどうかを検証しました。検証に用いたのは、<li>
要素を縦と横に100個ずつ並べ、合計1万個の要素が配置されたHTMLページです。それぞれCSSを用いてボーダーのスタイルを設定していますが、一方はFlexboxを使って横並び、もう一方はfloatを使って横並びにしています。
/* Flexboxで横並び */ ul { display: flex; }
▲ Flexbox版:横並び部分のCSSコード
/* floatで横並び */ ul li { float: left; }
▲ float版:横並び部分のCSSコード
▲ テストに用いたWebページ。<li>
要素が1万個並んでいる。
ページ表示時のパフォーマンスはFlexboxの方がよい
各ブラウザーで10回検証し、処理時間の平均値をグラフ化したのが下図です。短い時間であるほど高速な処理であることを示します。FirefoxではFlexboxが275%高速で、他のブラウザーについてはFlexboxの方がやや早い結果となりました。
▲ クリックで拡大されます。
Flexbox 平均値(ms) | float 平均値(ms) | floatに対する Flexboxの速度 | |
---|---|---|---|
Google Chrome | 150.5 | 161.6 | 107%高速 |
Firefox | 274.6 | 523.6 | 191%高速 |
Safari | 166.0 | 174.6 | 105%高速 |
Microsoft Edge | 732.4 | 771.8 | 105%高速 |
Internet Explorer | 784.0 | 916.2 | 116%高速 |
次のページでは、横並びの有無を切り替えた時のパフォーマンスを比較します。こちらは大きく差が出ました。