ブラウザレンダリングについて(簡易版)

Transcript

1. ブラウザレンダリングについて

2. 概要
 • ブラウザがページ表示するまでの流れ
 • 知ることのメリット
 ◦ パフォーマンス改善の原因特定
 初期描画だけでなく操作に対しての応答速度も含む
 
 ◦ web系やるとき知っておけば便利
 • ブラウザがやってくれてることなので知らなくても
 ものは作れる

3. 工程
 Download Parse Scripting Calculate Style Layout Paint Rasterize Paint Composite Layers Loading
 Rendering
 Painting
 Frame

4. Download Parse Scripting Calculate Style Layout Paint Rasterize Paint Composite Layers Loading
 Frame
 Rendering
 Painting

5. Loading
 • Download
 ◦ htmlやcss、JavaScriptファイル、画像などの
 リソースをサーバーからダウンロードする
 
 • Parse
 ◦ html/cssをパース(構文解析)してレンダリング用の
 データ構造に変換
 
 html → DOMツリー
 css → CSSOMツリー

6. Download Parse Scripting Calculate Style Layout Paint Rasterize Paint Composite Layers Loading
 Frame
 Painting
 Rendering

7. Scripting
 • JavaScriptファイルの実行
 • JavaScriptのコードを解析してコンパイルすることで
 実行可能な形式に変換
 
 • 解析も以下の二段階に分かれて実施している
 ◦ 字句解析
 ソースコードをトークンと呼ばれる単位に分割
 ◦ 構文解析
 トークンの配列から抽象構文木を作成

8. Download Parse Scripting Calculate Style Layout Paint Rasterize Paint Composite Layers Loading
 Frame
 Painting
 Rendering

9. Rendering
 • Calculate Style
 ◦ DOMツリー内のすべての要素に対してどのcssプロパティが
 当たるか計算
 ◦ cssルールのcssセレクタがマッチするか総当たりで実施
 
 • Layout
 ◦ レイアウト情報の計算とレイアウトを実施
 ◦ レイアウト情報とは
 →要素の大きさ/margin/padding/位置/z軸の位置

10. Download Parse Scripting Calculate Style Layout Paint Rasterize Paint Composite Layers Loading
 Frame
 Painting
 Rendering

11. Painting
 • Paint
 ◦ 内部の2Dグラフィックエンジン向けの命令を生成
 
 • Rasterize
 ◦ 生成された命名を基にレイヤーと呼ばれる単位で
 ピクセルへと描画
 ◦ レイヤーはz軸の上下関係を持つ
 
 • Composite Layers
 ◦ レイヤーを合成してレンダリング結果を生成

12. 最後に
 • 大分端折った内容になった
 • 右の本でこの辺もっと詳しく書いてるらしい
 →今買ったので未読
 
 • パフォーマンス系の問題に当たった時に
 軽く思い出してほしい
 
 • 目に見える部分だけでなく
 低レイヤーの理解も大事