少し前、Wilson Page は Smashing Magazine の素晴らしい記事を執筆し、Financial Times ウェブアプリをどのように実現したかを詳しく解説しています。記事の中で Wilson さんは次のように述べています。
アプリが成長し始めるにつれて、パフォーマンスがどんどん悪化していることがわかりました。
私たちは Chrome デベロッパー ツールのタイムラインにかなりの時間を費やして、原因を突き止めました。それは「ショック、ホラー！」この新しい親友である Flexbox は、このタイムラインでは、一部のレイアウトで 100 ミリ秒近くかかっていたことが示されていました。Flexbox を使用せずにレイアウトを再構築した結果、これが 10 ミリ秒に短縮されました。
Wilson さんのコメントは、display: box; を使用したオリジナルの（レガシー）Flexbox に関するものでした。残念ながら、新しい Flexbox（display: flex;）の方が速いかどうかについて答える機会がありませんでしたが、CSS Tricks では Chris Coyier がその質問を開きました。
WebKit & Blink で実装の多くを作成した Ojan Vafai に、新しい Flexbox モデルと実装について尋ねました。
新しい Flexbox コードでは、マルチパス レイアウトのコードパスが大幅に削減されています。それでもマルチパス コードパスはかなり簡単にヒットできます（たとえば、
flex-align: stretchは多くの場合 2 パスです）。一般に、一般的なケースでははるかに高速ですが、同じくらい遅いケースを構築することもできます。
とはいえ、必要ないなら、通常のブロック レイアウト（非フローティング）は、常にシングルパスであるため、通常は新しい Flexbox と同じかそれ以上の速度になります。しかし、新しい Flexbox は、テーブルを使用したり、カスタムの JS ベースのレイアウト コードを記述したりするよりも高速です。
数値の違いを確認するために、古い構文と新しい構文を直接比較しました。
新旧の Flexbox のベンチマーク
- 古い Flexbox と新しい Flexbox（フォールバックあり）
- 1 ページあたり 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 を作成します。多くの場合、古いブラウザに対して、Flexbox を古いバージョンに戻すことができます。
重要: ルールではなくツール
それよりも重要なのは、重要なものを最適化することです。1 つのオペレーションの最適化に時間を費やす前に、必ずタイムラインを使用してボトルネックを特定します。
実際、Google は Wilson および Financial Times Labs チームと連携し、その結果、レイアウト パフォーマンス ツールの Chrome DevTools の対象範囲を拡大しました。要素の再レイアウト境界を表示する機能がまもなく追加される予定です。タイムライン内のレイアウト イベントが、各レイアウトのスコープ、ルート、コストの詳細とともに読み込まれます。
