Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

yosi
August 08, 2022

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

yosi

August 08, 2022
Tweet

More Decks by yosi

Other Decks in Programming

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コード,,,
  10. None
  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,,,

  18. None
  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で新しいことを学んでいただけたら幸いです。