横並びの有無を切り替えた時のパフォーマンス比較

レスポンシブなレイアウトでは、ブラウザーの幅によって各々の要素が横並びになったり縦並びになったりします。このように横並びのあり・なしを切り替える場合、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 Chrome80.4251.6313%高速
Firefox50.2197.4393%高速
Safari56.6136.0222%高速
Microsoft Edge540.0631.7117%高速
Internet Explorer425.0520.0122%高速

横並びなし→ありの時もFlexboxの方が高速

横並びなしから横並びありへ切り替えた場合(上図②)のFlexboxとfloatのパフォーマンス比較です。各ブラウザーで10回検証し、処理時間の平均値をグラフ化しています。この場合、Microsoft Edgeを除くブラウザーでFlexboxの方がよいパフォーマンスとなりました。

▲ クリックで拡大されます。

Flexbox
平均値(ms)
float
平均値(ms)
floatに対する
Flexboxの速度
Google Chrome90.4265.6292%高速
Firefox61.5205.0333%高速
Safari83.9135.9161%高速
Microsoft Edge631.6632.2(ほぼ同じ)
Internet Explorer503.6573.4113%高速

パフォーマンスの差は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で気軽にご連絡くださいませ。