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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

10. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

18. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide