横並びの有無を切り替えた時のパフォーマンス比較
レスポンシブなレイアウトでは、ブラウザーの幅によって各々の要素が横並びになったり縦並びになったりします。このように横並びのあり・なしを切り替える場合、Flexboxとfloatにパフォーマンスの違いがあるかどうかを検証しました。検証に用いるのは、前ページの速度検証で用いたHTMLを改修したものです。
これらのHTMLでは、3秒ごとに<body>タグにno-sideクラスが付与され、<li>要素の横並びが解除されます。横並びありから横並びなしへ切り替えた場合（下図①）と、横並びなしから横並びありへ切り替えた場合（下図②）の両方についてパフォーマンスを検証しました。
/* 通常時はFlexboxで横並び */
ul {
display: flex;
}
/* bodyにno-sideクラスが付与された場合は横並びを解除 */
body.no-side ul {
display: block;
}
▲ Flexbox版：横並びの切り替えを行うCSS
/* 通常時はfloatで横並び */
ul li {
float: left;
}
/* bodyにno-sideクラスが付与された場合は横並びを解除 */
body.no-side li {
float: none;
}
▲ float版：横並びの切り替えを行うCSS
横並びあり→なしの時はFlexboxの方が高速
横並びありから横並びなしへ切り替えた場合（上図①）のFlexboxとfloatのパフォーマンス比較です。各ブラウザーで10回検証し、処理時間の平均値をグラフ化しています。この場合、全てのブラウザーでFlexboxの方がよいパフォーマンスとなりました。特にGoogle Chrome、Firefox、Safariについてはそれぞれ200%〜400%も高いパフォーマンスとなりました。
▲ クリックで拡大されます。
| Flexbox 平均値(ms) | float 平均値(ms) | floatに対する Flexboxの速度 | |
|---|---|---|---|
| Google Chrome | 80.4 | 251.6 | 313%高速 |
| Firefox | 50.2 | 197.4 | 393%高速 |
| Safari | 56.6 | 136.0 | 222%高速 |
| Microsoft Edge | 540.0 | 631.7 | 117%高速 |
| Internet Explorer | 425.0 | 520.0 | 122%高速 |
横並びなし→ありの時もFlexboxの方が高速
横並びなしから横並びありへ切り替えた場合（上図②）のFlexboxとfloatのパフォーマンス比較です。各ブラウザーで10回検証し、処理時間の平均値をグラフ化しています。この場合、Microsoft Edgeを除くブラウザーでFlexboxの方がよいパフォーマンスとなりました。
▲ クリックで拡大されます。
| Flexbox 平均値(ms) | float 平均値(ms) | floatに対する Flexboxの速度 | |
|---|---|---|---|
| Google Chrome | 90.4 | 265.6 | 292%高速 |
| Firefox | 61.5 | 205.0 | 333%高速 |
| Safari | 83.9 | 135.9 | 161%高速 |
| Microsoft Edge | 631.6 | 632.2 | (ほぼ同じ) |
| Internet Explorer | 503.6 | 573.4 | 113%高速 |
パフォーマンスの差はHTML要素の位置決定処理にある
横並びの切替時にFlexboxとfloatでパフォーマンスの差が大きく出ましたが、その差は何なのでしょうか？ Google Chromeのデベロッパーツールを用いて各処理の所要時間を計測してみたところ、「Rendering」（HTMLの各要素の位置決定処理）の差が一番大きいことがわかりました。
- Scripting：JavaScriptの実行
- Rendering：HTMLの各要素の位置決定処理
- Painting：画面への描画
Flexboxはfloatよりも高速だった
これまでの結果をまとめた表が次です。Flexboxの方がfloatよりも総合的にパフォーマンスが良く、高速な処理であることがわかりました。
| floatに対する Flexboxの速度 | |
|---|---|
| ページ表示時 | 105~191%高速 |
| 横並びあり→なし | 117~393%高速 |
| 横並びなし→あり | 100~333%高速 |
今回は1万個の要素で検証したため、実際のWebページではここまでの差は出ません。とは言え、実際の案件では横並びや入れ子を多用する場合が多いでしょう。塵も積もれば山となりますので、ボックスの横並びにはFlexboxを使用した方がパフォーマンスの面では適していると言えるのではないでしょうか。floatを使うのは文章の回り込みが必要な場合のみにし、ボックスのレイアウトにはFlexboxを使うべき時代になっているのかもしれません。
今回はFlexboxとfloatをパフォーマンスの面から比較しました。質問・疑問などあれば、Twitterで気軽にご連絡くださいませ。
