学習ロードマップ

フロントエンドエンジニアの学習ロードマップ

HTML/CSSの土台 → ブラウザの描画 → 通信とデータ → パフォーマンス の順で、画面が速く正しく描かれる仕組みを理解します。

1. 1

   HTML/CSSの土台

   カスケード・レイアウト・セレクタの仕組み
   カスケードと詳細度CSSレイアウトの計算セレクタのマッチング
2. 2

   ブラウザの描画

   DOMから画素までのパイプライン
   DOMツリーの内部ブラウザレンダリングクリティカルレンダリングパスコンポジットとGPU
3. 3

   通信とデータ

   HTTP・Cookie・キャッシュ・CORS
   HTTP/1.1→2→3Cookieとセッションブラウザキャッシュの階層CORS
4. 4

   パフォーマンス

   体感速度を測って改善する
   Core Web Vitalsの内部bfcacheの仕組み1秒の旅（描画まで）