Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
ブラウザレンダリングをまるッと学ぶ
yosi
August 08, 2022
Programming
0
55
ブラウザレンダリングをまるッと学ぶ
yosi
August 08, 2022
Tweet
Share
More Decks by yosi
See All by yosi
なるほどGit講座 (追跡ブランチが理解できます!)
yoshisan
0
86
「自分の時間を生きる」キャリア論
yoshisan
1
50
小学生でもわかる SlackAPI×GAS
yoshisan
0
31
達人プログラマーになろう!
yoshisan
0
48
認証認可
yoshisan
1
35
オブジェクト指向が"チョットワカル"スライド
yoshisan
0
42
Linuxについて"ほんのチョットワカル"スライド
yoshisan
1
34
Let's React!! "チョットワカル"の第一歩
yoshisan
1
53
ようこそ!!ココカラ勉強会へ!
yoshisan
0
24
Other Decks in Programming
See All in Programming
はてなリモートインターンシップ2022 インフラ 講義資料
hatena
4
2.1k
ipa-medit: Memory search and patch tool for IPA without Jailbreaking/ipa-medit-bh2022-europe
tkmru
0
130
Swift Concurrency in GoodNotes
inamiy
4
1.3k
xarray-Datatree: Hierarchical Data Structures for Multi-Model Science
tomnicholas
0
200
ITエンジニア特化型Q&Aサイトteratailを 言語、DB、クラウドなど フルリプレイスした話
leveragestech
0
390
まだ日本国内で利用できないAppActionsにトライしてみた / MoT TechTalk #15
mot_techtalk
0
110
Spring BootとKubernetesで実現する今どきのDevOps入門
xblood
0
340
Refactor with using `available` and `deprecated`
417_72ki
3
380
Workshop on Jetpack compose
aldefy
0
140
Hono v3 - Do Everything, Run Anywhere, But Small, And Faster
yusukebe
4
130
Remix + Cloudflare Pages + D1 で ポケモン SV のレンタルチームを検索できるアプリを作ってみた
kuroppe1819
4
1.3k
ECS Service Connectでマイクロサービスを繋いでみた
xblood
0
530
Featured
See All Featured
In The Pink: A Labor of Love
frogandcode
132
21k
Documentation Writing (for coders)
carmenintech
51
2.9k
Happy Clients
brianwarren
90
5.8k
Practical Orchestrator
shlominoach
178
8.9k
Mobile First: as difficult as doing things right
swwweet
213
7.8k
Docker and Python
trallard
30
1.9k
Building an army of robots
kneath
301
40k
Gamification - CAS2011
davidbonilla
75
4.1k
Building a Scalable Design System with Sketch
lauravandoore
451
31k
A Philosophy of Restraint
colly
193
15k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
175
9.1k
It's Worth the Effort
3n
177
26k
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で新しいことを学んでいただけたら幸いです。