少し前に、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 のレイアウト パフォーマンス ツールのカバレッジが向上しました。まもなく、要素の再レイアウト境界を表示する機能が追加されます。タイムライン内のレイアウト イベントは、各レイアウトのスコープ、ルート、コストの詳細とともに読み込まれます。
