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
yosi
August 08, 2022
Programming
0
180
ブラウザレンダリングをまるッと学ぶ
yosi
August 08, 2022
Tweet
Share
More Decks by yosi
See All by yosi
自社開発のエンジニアの私が 大事にしてること(n=1)
yoshisan
1
55
なるほどGit講座 (追跡ブランチが理解できます!)
yoshisan
0
180
「自分の時間を生きる」キャリア論
yoshisan
1
98
小学生でもわかる SlackAPI×GAS
yoshisan
0
110
達人プログラマーになろう!
yoshisan
0
110
認証認可
yoshisan
1
130
オブジェクト指向が"チョットワカル"スライド
yoshisan
0
110
Linuxについて"ほんのチョットワカル"スライド
yoshisan
1
110
Let's React!! "チョットワカル"の第一歩
yoshisan
1
190
Other Decks in Programming
See All in Programming
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
Deep Dive into Kotlin Flow
jmatsu
1
360
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
230
AIでLINEスタンプを作ってみた
eycjur
1
230
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
7
2.5k
Testing Trophyは叫ばない
toms74209200
0
890
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.9k
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
1.8k
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
710
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
320
Featured
See All Featured
Scaling GitHub
holman
463
140k
A Tale of Four Properties
chriscoyier
160
23k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
Why Our Code Smells
bkeepers
PRO
339
57k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
How to Ace a Technical Interview
jacobian
279
23k
Balancing Empowerment & Direction
lara
3
620
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
How to train your dragon (web standard)
notwaldorf
96
6.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Faster Mobile Websites
deanohume
309
31k
Transcript
ブラウザレンダリング まるっと学ぶ 大事なことをわかりやすく ココカラ勉強会 松田幸典(よし)
要点 このプレゼンテーションの 主なトピック 前回までの流れ レスポンスからブラウザレンダリングの流れ 各層でやってること。 おさらい
ステップ 1 どうしてWebができた のか?? ステップ 3 ・WWW ・ブラウザ Webの爆発的な普及 ステップ
2 TCP/IPモデル OSI参照モデル 世界の決まり事 ~プロトコル~ ステップ 5 カプセル化によって簡易に! みんなが使うHTTP ステップ 4 クライアントとサーバの対話 リクエスト レスポンス Webの歴史
ブラウザの仕組み! まるっと理解しよう! 前回は大まかなWebとは何か?を考えました。 今回はリクエストとレスポンス間でももっと視点を絞ります。 レスポンスから受け取った情報(データ)のアプリケーション層での動き
CSSの ダウンロード 全体図 HTMLの ダウンロード HTMLの解析 DOMの構築 JSを ダウンロード JSの実行
CSSの解析 CSSOMの構築 Render Tree の構築 Layout Painting
参照(https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model?hl=ja)
①HTMLの ダウンロード サーバー側から送られてきたHTMLをダウンロード
②HTMLの解析(parse) Bytes ① Charracters ② Tokens ③ Nodes ④ DOM
⑤ ▷ ▷ ▷ ▷ 送られてきたHTMLデータはただの「0」「1」の羅列。 つまりBytesの状態です。 これをJavaScriptが扱えるDOMまで変換します。 変換する際にまずは解析(parse)します。
②HTMLの解析(parse) Bytes ① Charracters ② Tokens ③ Nodes ④ DOM
⑤ ▷ ▷ ▷ ▷ ByteかCharracters(文字)への変換 0,1のByteから人間が読める文字 (Characters)に変換します。 変換は「文字コード」に基づきます。 例)UTF-8,Shift-JIS,ASCIIコード,,,
None
優先度 ①Content-Type に記述,②HTMLのmetaタグ 書かれてない場合は文字推測をする。
②HTMLの解析(parse) Bytes ① Charracters ② Tokens ③ Nodes ④ DOM
⑤ ▷ ▷ ▷ ▷ CharractersからTokenへの変換 Tokenとは「これ以上細かく分解できない最小単位」のこと。 主な種類は3種 (全部で6種※細かいので割愛) ①Start Tag,②End Tag,③Character
一番左から順に識別していきます。 <から始まるものがあればそれをStart Tag Tokenになります。 h,t,m,lと順に読み込み>を見つければ、<>に挟まれた文字は トークンに変化します。 bodyも同様に<から順に読み込まれ,Start Tagになります。
Hi!という文字列は一字ごとにCharacter Tokenに変換。 次の<が見つかるまでCharacter Tokenへの変換が続きます。 /のを見つけると、End Tag Tokenに変換していきます。
②HTMLの解析(parse) Bytes ① Charracters ② Tokens ③ Nodes ④ DOM
⑤ ▷ ▷ ▷ ▷ TokenからNodeへの変換 Nodeとは? ①ノードとはオブジェクトである。 ②HTMLの要素やその属性,要素に含まれたテキスト
②HTMLの解析(parse) 【ノードとはオブジェクトである】 「トークンからノードに変換する際、プロパティとルールが定義さ れる」 →プロパティ(値、フィールド、変数) →ルール(メソッド) つまりオブジェクト指向のように振る舞えるように形作る。 例)appendChild や replaceChild
や removeChild というメソッド が定義される。
②HTMLの解析(parse) 「DOM,Node,Element,って何がちがうの?」 DOMとは木「DOMツリーと言われる階層構造を持ったオブジェク トを物として扱うモデル」 Nodeとは葉「DOMを構成する一つ一つの要素」 Elementとはある一種の葉「Nodeの種類の一種」 例)Document,Element,Attr,CharacterData,,,
None
②HTMLの解析(parse) Bytes ① Charracters ② Tokens ③ Nodes ④ DOM
⑤ ▷ ▷ ▷ ▷ DOMの構造化 Document Object Model →データ構造として扱う ここで初めてJavaScriptが使えるようになります。
この構造がDOMであり、一つ一つがNodeです!!
参照(https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model?hl=ja)
もともとは0と1の数字の羅列です。 そこにどうやって意味付けしていくのか、 ルールを作ったのかを知ることで より自身の学びにつながっていきます。 まとめ
御清聴ありがとう ございました! 今回のLTで新しいことを学んでいただけたら幸いです。