2020-07-26
やること宣言
gaaamii.icon
勉強中メモ
gaaamii.icon
Loading
Download
リソースをダウンロードする。
Parse
構文解析して、レンダリングエンジンの内部表現にする
HTML -> DOMツリー
CSS -> CSSOMツリー
Scripting
字句解析 -> 構文解析 -> コンパイル -> 実行
Rendering
Calculate Style
セレクタを右から左に解釈してマッチング
詳細度(a=n, b=n, c=n)
Layout
LayoutTreeなるものを生成
Painting
Paint
RenderTree -> Display List -> グラフィックエンジン
グラフィックエンジン
Rasterize
生成された命令を用いて、レイヤという単位でピクセルへと描画
Composite Layers
レイヤを合成。
基本的にはCPUで、いくつかの条件を満たすとGPUによって合成される
GPUを使うのはz軸を伴う変形処理など。
再レンダリング
JavaScriptのイベントリスナがDOMを書き換えたりする。
どういったときにどのフェーズがやり直されるかは、第8章で。
闇雲なチューニングはやめて、ちゃんと計測しようという話
Response, Animation, Idle, Load の頭文字。
Response: 100ms
Animation: 16ms
Idle: 50ms
Load: 1000ms
やったこと
gaaamii.icon