【学習記録】ブラウザのレンダリングについて

こちらの記事を読んで学習。

• ブラウザレンダリング入門〜知ることで見える世界〜 - Qiita

レンダリングとは

「レンダリング」を「描画」と覚えていたのですが、描画の為の計算なども含めてレンダリングでした。

厳密には、以下の通り。

データ記述言語やデータ構造で記述された抽象的で高次の情報から、コンピュータのプログラムを用いて画像・映像・音声などを生成することをいう。 (中略) "render" の原義は「表現する、翻訳する、（脚本などを）上演する」などの意味。

レンダリング (コンピュータ) - Wikipedia

レンダリングの流れ

• Parse
  • DOM Treeを作成
  • Style Rulesを作成
• Style
  • Render Treeを作成
• Layout (Reflow)
  • Layout Treeを作成
• Paint
  • Paint Recordsを作成
  • Layer Treeを作成
• Composite

ブラウザとレンダリングエンジン

• Chrome
  • Blink
• Safari
  • Webkit

疑問(もう少し深堀りしたい情報)

• ready(load)とかDOMContentLoadedのイベントはどのタイミング？