ブラウザ

ブラウザ

執筆済 ソフトウェア開発Web

HTML を受け取って画面にするまでの処理。

レンダリングの流れ#

HTML → 解析 → DOM ツリー
CSS  → 解析 → CSSOM
              ↓
          レンダーツリー（表示されるものだけ）
              ↓
          レイアウト（各要素の位置と大きさを計算）
              ↓
          ペイント（描画命令を生成）
              ↓
          合成（レイヤを重ねて画面へ）

描画をブロックするもの#

資源 挙動
CSS レンダリングをブロックする（FOUC を防ぐため）
同期 <script> 解析を止める（DOM を書き換えうるため）
async 並行に取得し、取得でき次第実行
defer 並行に取得し、解析完了後に順序どおり実行

<script> を </body> の直前に置く、 あるいは defer を付けるのはこのため。

再計算のコスト#

操作 影響
リフロー（レイアウト） 位置・大きさの再計算。重い
リペイント 色などの描き直し
合成のみ transform、opacity。GPU で処理でき、最も安い

アニメーションに transform と opacity を使うのは、 レイアウトを引き起こさないから。 top や width を変えるとリフローが毎フレーム走る。

JavaScript の実行#

単一スレッドのイベントループで動く。

コールスタックが空になる
   ↓ マイクロタスク（Promise）をすべて処理
   ↓ 必要なら描画
   ↓ マクロタスク（setTimeout、イベント）を 1 つ処理
   ↓ 繰り返す

長い同期処理は画面を固まらせる。 重い計算は Web Worker（別スレッド）に逃がす。

セキュリティの境界#

同一オリジンポリシーが基本。 スキーム・ホスト・ポートの組が一致しなければ、 他のオリジンの資源を読めない。

これを緩めるのが CORS。

参考文献#