少し前に、Wilson Page が Financial Times ウェブアプリをどのように実現したのかを掘り下げた Smashing Magazine の素晴らしい記事を書いてくれました。記事の中で、Wilson はこう述べています。
アプリが成長し始めるにつれて、パフォーマンスは悪化の一途をたどってきました。
私たちは Chrome デベロッパー ツールのタイムラインで数時間を費やし、犯人を突き止めました。ショック、ホラー!それが私たちの新しい親友である Flexbox でした。タイムラインによると、一部のレイアウトは 100 ミリ秒近くかかっていましたが、Flexbox を使用しないでレイアウトを作り直すと、10 ミリ秒に短縮されました。
Wilson さんのコメントは、display: box;
を使用していた元の(レガシー)フレックスボックスに関するものでした。残念ながら、新しい Flexbox(display: flex;
)の方が速いのかは疑問でしたが、CSS Tricks では、Chris Coyier がその質問を開始しています。
WebKit と Blink での実装の多くを書いた Ojan Vafai に、新しい Flexbox モデルと実装について尋ねました。
新しいフレックスボックスのコードでは、マルチパス レイアウトのコードパスが大幅に少なくなります。ただし、マルチパス コードパスは簡単にヒットできます(たとえば、
flex-align: stretch
は多くの場合 2 パスです)。一般に、一般的なケースでははるかに高速になりますが、同じくらい遅いケースを作成することもできます。
とはいえ、この手法で対処できれば、通常のブロック レイアウト(非浮動小数点)は、常にシングルパスであるため、通常は新しい Flexbox と同じかそれ以上になります。しかし、新しい Flexbox は、テーブルを使用したり、カスタムの JS ベースのレイアウト コードを記述したりするよりも高速です。
数値の違いを確認するために、新旧の構文を直接比較しました。
新旧の Flexbox ベンチマーク
- 古い Flexbox と新しい Flexbox(フォールバックあり)
- 500 要素/ページ
- ページ読み込みのコストを評価して
- 各 3 回の実行の平均
- パソコンで測定されます(モバイルでは約 10 倍遅くなります)
以前の Flexbox: レイアウトのコストは約 43.5 ミリ秒

新しい Flexbox: レイアウトのコストが約 18.2 ミリ秒

まとめ: 旧バージョンのパフォーマンスは新旧の 2.3 倍。
どうすればよいですか。
Flexbox を使用する場合は、常に新しいものを作成する必要がある: IE10 Tweener 構文と、Chrome 21 以降、Safari 7 以降、Firefox 22 以降、Opera(および Opera Mobile)12.1 以降、IE 11 以降、Blackberry 10 以降の新しい更新された Flexbox では、多くの場合、古いモバイル ブラウザへのフォールバックが可能です。
覚えておくべきこと: ルールではなくツール
さらに重要なのは、重要なものを最適化することです。ある種類のオペレーションの最適化に時間を費やす前に、必ずタイムラインを使用してボトルネックを特定してください。
実際、Wilson や Financial Times Labs チームと連絡をとった結果、Chrome DevTools のレイアウト パフォーマンス ツールのカバレッジが向上しました。まもなく、要素の再レイアウト境界を表示する機能が追加されます。タイムライン内のレイアウト イベントは、各レイアウトのスコープ、ルート、コストの詳細とともに読み込まれます。
