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
54
なるほどGit講座 (追跡ブランチが理解できます!)
yoshisan
0
180
「自分の時間を生きる」キャリア論
yoshisan
1
98
小学生でもわかる SlackAPI×GAS
yoshisan
0
100
達人プログラマーになろう!
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
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
800
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
実践ArchUnit ~実例による検証パターンの紹介~
ogiwarat
2
280
事業戦略を理解してソフトウェアを設計する
masuda220
PRO
22
6.2k
Datadog RUM 本番導入までの道
shinter61
1
310
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
290
Go Modules: From Basics to Beyond / Go Modulesの基本とその先へ
kuro_kurorrr
0
120
セキュリティマネジャー廃止とクラウドネイティブ型サンドボックス活用
kazumura
1
190
GoのGenericsによるslice操作との付き合い方
syumai
2
670
Java on Azure で LangGraph!
kohei3110
0
160
Create a website using Spatial Web
akkeylab
0
290
レガシーシステムの機能調査・開発におけるAI利活用
takuya_ohtonari
0
610
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
Speed Design
sergeychernyshev
31
1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Optimizing for Happiness
mojombo
379
70k
Unsuck your backbone
ammeep
671
58k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
What's in a price? How to price your products and services
michaelherold
245
12k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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で新しいことを学んでいただけたら幸いです。