Tweet
Tweet

Slide 1

Slide 1 text

ブラウザレンダリング まるっと学ぶ 大事なことをわかりやすく ココカラ勉強会 松田幸典(よし)

Slide 2

Slide 2 text

要点 このプレゼンテーションの 主なトピック 前回までの流れ レスポンスからブラウザレンダリングの流れ 各層でやってること。 おさらい

Slide 3

Slide 3 text

ステップ 1 どうしてWebができた のか？？ ステップ 3 ・WWW ・ブラウザ Webの爆発的な普及 ステップ 2 TCP/IPモデル OSI参照モデル 世界の決まり事 ~プロトコル~ ステップ 5 カプセル化によって簡易に！ みんなが使うHTTP ステップ 4 クライアントとサーバの対話 リクエスト レスポンス Webの歴史

Slide 4

Slide 4 text

ブラウザの仕組み！ まるっと理解しよう！ 前回は大まかなWebとは何か？を考えました。 今回はリクエストとレスポンス間でももっと視点を絞ります。 レスポンスから受け取った情報(データ)のアプリケーション層での動き

Slide 5

Slide 5 text

CSSの ダウンロード 全体図 HTMLの ダウンロード HTMLの解析 DOMの構築 JSを ダウンロード JSの実行 CSSの解析 CSSOMの構築 Render Tree の構築 Layout Painting

Slide 6

Slide 6 text

参照(https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model?hl=ja)

Slide 7

Slide 7 text

①HTMLの ダウンロード サーバー側から送られてきたHTMLをダウンロード

Slide 8

Slide 8 text

②HTMLの解析(parse) Bytes ① Charracters ② Tokens ③ Nodes ④ DOM ⑤ ▷ ▷ ▷ ▷ 送られてきたHTMLデータはただの「0」「1」の羅列。 つまりBytesの状態です。 これをJavaScriptが扱えるDOMまで変換します。 変換する際にまずは解析(parse)します。

Slide 9

Slide 9 text

②HTMLの解析(parse) Bytes ① Charracters ② Tokens ③ Nodes ④ DOM ⑤ ▷ ▷ ▷ ▷ ByteかCharracters(文字)への変換 0,1のByteから人間が読める文字 (Characters)に変換します。 変換は「文字コード」に基づきます。 例)UTF-8,Shift-JIS,ASCIIコード,,,

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

優先度　①Content-Type に記述,②HTMLのmetaタグ 書かれてない場合は文字推測をする。

Slide 12

Slide 12 text

②HTMLの解析(parse) Bytes ① Charracters ② Tokens ③ Nodes ④ DOM ⑤ ▷ ▷ ▷ ▷ CharractersからTokenへの変換 Tokenとは「これ以上細かく分解できない最小単位」のこと。 主な種類は3種 (全部で6種※細かいので割愛) ①Start Tag,②End Tag,③Character

Slide 13

Slide 13 text

一番左から順に識別していきます。 <から始まるものがあればそれをStart Tag Tokenになります。 h,t,m,lと順に読み込み>を見つければ、＜＞に挟まれた文字は トークンに変化します。 bodyも同様に<から順に読み込まれ,Start Tagになります。

Slide 14

Slide 14 text

Hi!という文字列は一字ごとにCharacter Tokenに変換。 次の＜が見つかるまでCharacter Tokenへの変換が続きます。 /のを見つけると、End Tag Tokenに変換していきます。

Slide 15

Slide 15 text

②HTMLの解析(parse) Bytes ① Charracters ② Tokens ③ Nodes ④ DOM ⑤ ▷ ▷ ▷ ▷ TokenからNodeへの変換 Nodeとは? ①ノードとはオブジェクトである。 ②HTMLの要素やその属性,要素に含まれたテキスト

Slide 16

Slide 16 text

②HTMLの解析(parse) 【ノードとはオブジェクトである】 「トークンからノードに変換する際、プロパティとルールが定義さ れる」 →プロパティ（値、フィールド、変数） →ルール(メソッド) つまりオブジェクト指向のように振る舞えるように形作る。 例)appendChild や replaceChild や removeChild というメソッド が定義される。

Slide 17

Slide 17 text

②HTMLの解析(parse) 「DOM,Node,Element,って何がちがうの？」 DOMとは木「DOMツリーと言われる階層構造を持ったオブジェク トを物として扱うモデル」 Nodeとは葉「DOMを構成する一つ一つの要素」 Elementとはある一種の葉「Nodeの種類の一種」 例)Document,Element,Attr,CharacterData,,,

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

②HTMLの解析(parse) Bytes ① Charracters ② Tokens ③ Nodes ④ DOM ⑤ ▷ ▷ ▷ ▷ DOMの構造化 Document Object Model →データ構造として扱う ここで初めてJavaScriptが使えるようになります。

Slide 20

Slide 20 text

この構造がDOMであり、一つ一つがNodeです!!

Slide 21

Slide 21 text

参照(https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model?hl=ja)

Slide 22

Slide 22 text

もともとは0と1の数字の羅列です。 そこにどうやって意味付けしていくのか、 ルールを作ったのかを知ることで より自身の学びにつながっていきます。 まとめ

Slide 23

Slide 23 text

御清聴ありがとう ございました！ 今回のLTで新しいことを学んでいただけたら幸いです。