URLをブラウザに入力してAppを表示するまで
Webブラウザ Web BrowserにURL Uniform Resource Locatorsを入力
(例.https://calendar.google.com/calendar/) ]
Webブラウザ Web BrowserがURL Uniform Resource Locatorsを読み取る
https:
通信方法
HTTPS Hypertext Transfer Protocol Secure
⛰詳細
他にも
HTTP Hypertext Transfer Protocol
FTP File Transfer Protocol
calendar.google.com
ドメイン Domainから該当するサービスのIP Address アドレスを取得する必要あり
calendar/
該当するサービスのIP Address アドレスを取得後使う
ドメイン Domainから該当するサービスのIP Address アドレスを取得
Cashing キャッシュで探す
ブラウザ キャッシュで探す
OSキャッシュで探す
など
途中What happens when we hit URL in Browser?
DNS Domain Name Systemを使う場合
calendar.google.comから
root(ルート)DNSサーバへ
comDNSサーバへ
googleDNSサーバへ
calendar.google.comのIP Address アドレス(172.217.26.110)を取得
クライアントとサーバがTCP Transmission Control Protocol接続
アクセス先サーバ
DNS Domain Name Systemで取得したIP Address アドレス
クライアントがリクエスト
GET:calendar/
サーバがクライアントのWebブラウザ Web Browserへレスポンス
GET:calendar/のレスポンス
送るデータ
HTML HyperText Markup Language
CSS
JavaScript
画像 Imageなど
Webブラウザ Web Browserがレンダリング Rendering Web
オブジェクトモデルの構築
DOM Document Object Modelの構築
Bytes(バイト)→Characters(文字列)→Tokens(トークン)→Nodes(オブジェクトノード)→DOM Document Object Model
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/images/full-process.png
変換 Conversion
Bytes(バイト)→Characters(文字列)
HTMLファイルの未加工のバイト byteを読み取り、ファイルに指定されているエンコード encode方法（UTF-8 など）に基づいて個々の文字に変換
Tokenizing トークン化
Characters(文字列)→Tokens(トークン)
取得した文字列をトークンに変換
HTML Standardに基づく
例.<html> <body></body></html>
Lexical analysis 字句解析
Tokens(トークン)→Nodes(オブジェクトノード)
トークンをオブジェクトノードに変換
例. html,body
DOM Document Object Modelの構築
Nodes(オブジェクトノード)→DOM Document Object Model
オブジェクトノードをTree 木構造に整形
補足
HTML HyperText Markup Languageが大きいと時間かかる
Google Chrome DevToolsなどで、時間計測可能
オブジェクト モデルの構築  |  Web  |  Google Developers
CSSOM CSS Object Modelツリーの構築
DOM Document Object Modelの構築中に外部のCSSファイルを発見
CSSファイルを取得
CSSOM CSS Object Modelツリーの構築
Bytes(バイト)→Characters(文字列)→Tokens(トークン)→Nodes(オブジェクトノード)→CSSOM CSS Object Model
DOM Document Object Model構築と同じ
補足
スタイルを設定していないと
デフォルト Default CSSが割り当てられる
ブラウザ独自のCSS
Render-tree レンダリングツリーの構築
DOM Document Object ModelツリーとCSSOM CSS Object Modelツリーを組み合わせる
行うこと
個々の要素 element HTMLのレイアウトを計算
Painting Webが必要とする値の生成
工程
DOMツリーのルートから開始して、表示されている各ノードをtraverse 辿って操作
描画に関係のないものを除く
<script>など
非表示にしていされているものを除く
display noneになっているものなど
それぞれのノードに対応したCSSOM CSS Object Model適用
CSSが適用され、表示可能になったノードを除く
? ここあまりわかっていない
なぜ除く？
Layout レイアウト
Device デバイスのViewport内の位置とサイズを計算
reflow リフロー
具体的内容
Render-tree レンダリングツリーのルートからtraverse 辿って操作
出力:box model
Painting, rasterizing
Render-tree レンダリングツリーを画面上のピクセルに変換
hr.icon
レンダリング Rendering Webをブロックするものへの対策
CSS
Render Blocking CSS  |  Web Fundamentals  |  Google Developers
JavaScript
非同期処理 asynchronousする
不要なJavaScript削除
以下途中
Adding Interactivity with JavaScript  |  Web Fundamentals
参考
What happens when we hit URL in Browser?
通信する部分
オブジェクト モデルの構築  |  Web  |  Google Developers
レンダリング Rendering Webの部分
ブラウザレンダリングの仕組み - Qiita
これを参考に説明している記事
https://noti.st/andydavies/Tw5Q3B#sRsoK76
alex/what-happens-when: An attempt to answer the age old interview question "What happens when you type google.com into your browser and press enter?"
詳しくてよい
https://dev.to/teo_garcia/understanding-rendering-in-react-i5i
後で見たい
Inside look at modern web browser (part 1)  |  Web  |  Google Developers
CPU周り触れてる。イラスト多い。