ブラウザレンダリングをまるッと学ぶ

Transcript

1. ブラウザレンダリング まるっと学ぶ 大事なことをわかりやすく ココカラ勉強会 松田幸典(よし)
2. 要点 このプレゼンテーションの 主なトピック 前回までの流れ レスポンスからブラウザレンダリングの流れ 各層でやってること。 おさらい
3. ステップ 1 どうしてWebができた のか？？ ステップ 3 ・WWW ・ブラウザ Webの爆発的な普及 ステップ 2 TCP/IPモデル OSI参照モデル 世界の決まり事 ~プロトコル~ ステップ 5 カプセル化によって簡易に！ みんなが使うHTTP ステップ 4 クライアントとサーバの対話 リクエスト レスポンス Webの歴史
4. ブラウザの仕組み！ まるっと理解しよう！ 前回は大まかなWebとは何か？を考えました。 今回はリクエストとレスポンス間でももっと視点を絞ります。 レスポンスから受け取った情報(データ)のアプリケーション層での動き
5. CSSの ダウンロード 全体図 HTMLの ダウンロード HTMLの解析 DOMの構築 JSを ダウンロード JSの実行 CSSの解析 CSSOMの構築 Render Tree の構築 Layout Painting
6. 参照(https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model?hl=ja)
7. ①HTMLの ダウンロード サーバー側から送られてきたHTMLをダウンロード
8. ②HTMLの解析(parse) Bytes ① Charracters ② Tokens ③ Nodes ④ DOM ⑤ ▷ ▷ ▷ ▷ 送られてきたHTMLデータはただの「0」「1」の羅列。 つまりBytesの状態です。 これをJavaScriptが扱えるDOMまで変換します。 変換する際にまずは解析(parse)します。
9. ②HTMLの解析(parse) Bytes ① Charracters ② Tokens ③ Nodes ④ DOM ⑤ ▷ ▷ ▷ ▷ ByteかCharracters(文字)への変換 0,1のByteから人間が読める文字 (Characters)に変換します。 変換は「文字コード」に基づきます。 例)UTF-8,Shift-JIS,ASCIIコード,,,
11. 優先度　①Content-Type に記述,②HTMLのmetaタグ 書かれてない場合は文字推測をする。
12. ②HTMLの解析(parse) Bytes ① Charracters ② Tokens ③ Nodes ④ DOM ⑤ ▷ ▷ ▷ ▷ CharractersからTokenへの変換 Tokenとは「これ以上細かく分解できない最小単位」のこと。 主な種類は3種 (全部で6種※細かいので割愛) ①Start Tag,②End Tag,③Character
13. 一番左から順に識別していきます。 <から始まるものがあればそれをStart Tag Tokenになります。 h,t,m,lと順に読み込み>を見つければ、＜＞に挟まれた文字は トークンに変化します。 bodyも同様に<から順に読み込まれ,Start Tagになります。
14. Hi!という文字列は一字ごとにCharacter Tokenに変換。 次の＜が見つかるまでCharacter Tokenへの変換が続きます。 /のを見つけると、End Tag Tokenに変換していきます。
15. ②HTMLの解析(parse) Bytes ① Charracters ② Tokens ③ Nodes ④ DOM ⑤ ▷ ▷ ▷ ▷ TokenからNodeへの変換 Nodeとは? ①ノードとはオブジェクトである。 ②HTMLの要素やその属性,要素に含まれたテキスト
16. ②HTMLの解析(parse) 【ノードとはオブジェクトである】 「トークンからノードに変換する際、プロパティとルールが定義さ れる」 →プロパティ（値、フィールド、変数） →ルール(メソッド) つまりオブジェクト指向のように振る舞えるように形作る。 例)appendChild や replaceChild や removeChild というメソッド が定義される。
17. ②HTMLの解析(parse) 「DOM,Node,Element,って何がちがうの？」 DOMとは木「DOMツリーと言われる階層構造を持ったオブジェク トを物として扱うモデル」 Nodeとは葉「DOMを構成する一つ一つの要素」 Elementとはある一種の葉「Nodeの種類の一種」 例)Document,Element,Attr,CharacterData,,,
19. ②HTMLの解析(parse) Bytes ① Charracters ② Tokens ③ Nodes ④ DOM ⑤ ▷ ▷ ▷ ▷ DOMの構造化 Document Object Model →データ構造として扱う ここで初めてJavaScriptが使えるようになります。
20. この構造がDOMであり、一つ一つがNodeです!!
21. 参照(https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model?hl=ja)
22. もともとは0と1の数字の羅列です。 そこにどうやって意味付けしていくのか、 ルールを作ったのかを知ることで より自身の学びにつながっていきます。 まとめ
23. 御清聴ありがとう ございました！ 今回のLTで新しいことを学んでいただけたら幸いです。