Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ブラウザレンダリングについて(簡易版)
Search
kab0718
November 29, 2023
0
22
ブラウザレンダリングについて(簡易版)
kab0718
November 29, 2023
Tweet
Share
More Decks by kab0718
See All by kab0718
アルゴリズムと計算量
kab0718
0
9
お嬢様言葉
kab0718
0
15
アイドルとコミュニケーション
kab0718
0
8
コーディングで意識してること
kab0718
0
29
趣味とぷよぐらみんぐ
kab0718
0
110
SDLアプリコンテスト2019プレゼン資料
kab0718
0
45
近況報告
kab0718
0
1.1k
アイドル×アイドル
kab0718
0
120
ツンデレの女の子
kab0718
0
99
Featured
See All Featured
BBQ
matthewcrist
80
8.8k
GraphQLとの向き合い方2022年版
quramy
33
13k
Designing with Data
zakiwarfel
96
4.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
What's new in Ruby 2.0
geeforr
338
31k
Clear Off the Table
cherdarchuk
86
310k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
23
1.7k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
47k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
Happy Clients
brianwarren
92
6.4k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Transcript
ブラウザレンダリングについて
概要 • ブラウザがページ表示するまでの流れ • 知ることのメリット ◦ パフォーマンス改善の原因特定 初期描画だけでなく操作に対しての応答速度も含む ◦
web系やるとき知っておけば便利 • ブラウザがやってくれてることなので知らなくても ものは作れる
工程 Download Parse Scripting Calculate Style Layout Paint Rasterize Paint
Composite Layers Loading Rendering Painting Frame
Download Parse Scripting Calculate Style Layout Paint Rasterize Paint Composite
Layers Loading Frame Rendering Painting
Loading • Download ◦ htmlやcss、JavaScriptファイル、画像などの リソースをサーバーからダウンロードする • Parse ◦
html/cssをパース(構文解析)してレンダリング用の データ構造に変換 html → DOMツリー css → CSSOMツリー
Download Parse Scripting Calculate Style Layout Paint Rasterize Paint Composite
Layers Loading Frame Painting Rendering
Scripting • JavaScriptファイルの実行 • JavaScriptのコードを解析してコンパイルすることで 実行可能な形式に変換 • 解析も以下の二段階に分かれて実施している ◦
字句解析 ソースコードをトークンと呼ばれる単位に分割 ◦ 構文解析 トークンの配列から抽象構文木を作成
Download Parse Scripting Calculate Style Layout Paint Rasterize Paint Composite
Layers Loading Frame Painting Rendering
Rendering • Calculate Style ◦ DOMツリー内のすべての要素に対してどのcssプロパティが 当たるか計算 ◦ cssルールのcssセレクタがマッチするか総当たりで実施
• Layout ◦ レイアウト情報の計算とレイアウトを実施 ◦ レイアウト情報とは →要素の大きさ/margin/padding/位置/z軸の位置
Download Parse Scripting Calculate Style Layout Paint Rasterize Paint Composite
Layers Loading Frame Painting Rendering
Painting • Paint ◦ 内部の2Dグラフィックエンジン向けの命令を生成 • Rasterize ◦ 生成された命名を基にレイヤーと呼ばれる単位で
ピクセルへと描画 ◦ レイヤーはz軸の上下関係を持つ • Composite Layers ◦ レイヤーを合成してレンダリング結果を生成
最後に • 大分端折った内容になった • 右の本でこの辺もっと詳しく書いてるらしい →今買ったので未読 • パフォーマンス系の問題に当たった時に 軽く思い出してほしい
• 目に見える部分だけでなく 低レイヤーの理解も大事