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
170
ブラウザレンダリングをまるッと学ぶ
yosi
August 08, 2022
Tweet
Share
More Decks by yosi
See All by yosi
自社開発のエンジニアの私が 大事にしてること(n=1)
yoshisan
1
51
なるほどGit講座 (追跡ブランチが理解できます!)
yoshisan
0
170
「自分の時間を生きる」キャリア論
yoshisan
1
97
小学生でもわかる SlackAPI×GAS
yoshisan
0
100
達人プログラマーになろう!
yoshisan
0
110
認証認可
yoshisan
1
120
オブジェクト指向が"チョットワカル"スライド
yoshisan
0
110
Linuxについて"ほんのチョットワカル"スライド
yoshisan
1
100
Let's React!! "チョットワカル"の第一歩
yoshisan
1
180
Other Decks in Programming
See All in Programming
Live Coding: Migrating an Application to Signals
manfredsteyer
PRO
0
110
AI時代のリアーキテクチャ戦略 / Re-architecture Strategy in the AI Era
dachi023
0
140
GitHub Copilot for Azureを使い倒したい
ymd65536
1
340
設計の本質:コード、システム、そして組織へ / The Essence of Design: To Code, Systems, and Organizations
nrslib
10
3.9k
Orleans + Sekiban + SignalR でリアルタイムWeb作ってみた
tomohisa
0
250
AWS Summit Hong Kong 2025: Reinventing Programming - How AI Transforms Our Enterprise Coding Approach
dwchiang
0
150
AIコーディングの本質は“コード“ではなく“構造“だった / The essence of AI coding is not “code” but "structure
seike460
PRO
2
540
“技術カンファレンスで何か変わる?” ──RubyKaigi後の自分とチームを振り返る
ssagara00
0
150
20250426 GDGoC 合同新歓 - GDGoC のススメ
getty708
0
120
Designing Your Organization's Test Pyramid ( #scrumniigata )
teyamagu
PRO
5
1.7k
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
6
1.6k
MySQL初心者が311個のカラムにNot NULL制約を追加していってALTER TABLEについて学んだ話
hatsu38
2
150
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Documentation Writing (for coders)
carmenintech
71
4.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Fireside Chat
paigeccino
37
3.4k
RailsConf 2023
tenderlove
30
1.1k
Producing Creativity
orderedlist
PRO
344
40k
Become a Pro
speakerdeck
PRO
28
5.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
The Pragmatic Product Professional
lauravandoore
33
6.6k
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で新しいことを学んでいただけたら幸いです。