先日、Wilson Page が Smashing Magazine に素晴らしい記事を投稿し、Financial Times ウェブアプリを実現した方法を詳しく説明しています。ウィルソン氏は記事の中で次のように述べています。
アプリの規模が大きくなるにつれて、パフォーマンスが悪化していることがわかりました。
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 と 新しい Flexbox（フォールバックあり）
- ページあたり 500 個の要素
- ページ読み込みコストを評価して要素をレイアウトする
- 3 回の実行の平均
- パソコンで測定されます。（モバイルは約 10 倍遅くなります）。
古い Flexbox: レイアウト費用 43.5 ms
新しい Flexbox: レイアウト費用 ~18.2ms
概要: 古いバージョンは新しいバージョンの 2.3 倍遅い。
どうすればよいですか。
flexbox を使用する場合は、常に新しいもの向けに作成してください。IE10 の tweener 構文と、Chrome 21 以降、Safari 7 以降、Firefox 22 以降、Opera（および Opera Mobile）12.1 以降、IE 11 以降、Blackberry 10 以降で利用できる新しい flexbox です。多くの場合、以前の flexbox にフォールバックして、古いモバイル ブラウザに対応できます。
ルールではなくツールであることを覚えておいてください
重要なのは、重要なものを最適化することです。1 種類のオペレーションの最適化に時間を費やす前に、必ずタイムラインを使用してボトルネックを特定してください。
実際、Google はウィルソン氏と Financial Times Labs チームと連携し、その結果、レイアウト パフォーマンス ツールの Chrome DevTools の範囲を改善しました。まもなく、要素の再レイアウト境界を表示する機能が追加されます。タイムラインのレイアウト イベントには、各レイアウトのスコープ、ルート、コストの詳細が読み込まれます。
