🐥

フロントエンドロードマップの覚書② ~Browsers~

2022/04/18に公開

初心者

tech

インターネット > Browsers and how they work?
https://roadmap.sh/frontend

Webブラウザーは、ユーザーがグラフィカルユーザーインターフェイスを介してWebページやその他のオンラインコンテンツにアクセスして表示できるようにするソフトウェアアプリケーションです。

Browsers > Populating the Page: How Browsers Work

概要

２つの主要な課題

レインテシ
- データ転送における指標のひとつ
- 要求してから返ってくるまでにかかる時間
シングルスレッド
- メインスレッドへの責務を最小限に抑えてウェブ性能を改善する

ナビゲーションはウェブページを読み込むための最初の一歩
ユーザーがなにかするたびにナビゲーションが発生
レイテンシと帯域幅が遅延を引き起こす
- 帯域幅
  - 周波数帯域幅
  - ≒データ伝送速度
  - 速度は bps (bit per second)
  - 太いほうが早い

DNS ルックアップ

ブラウザからDNSルックアップをリクエスト → ネームサーバが IP アドレスを返す
- キャッシュされたらキャッシュから取得
そのサイトに一度もアクセスしたことがない場合DNSルックアップが必要になる

TCP ハンドシェイク

トランスポート層におけるホスト間プロトコル
3ウェイハンドシェイク
サーバーとのコネクションを確立(仮想回線を使って通信)

SYN(確立要求)
SYN と ACK(確率応答)
ACK

UDP はコネクションこの手間を省く

TLSネゴシエーション

安全なコネクションを実現するためのもう１つのハンドシェイク

認証方式を決定 → 認証 → 鍵交換

最新のブラウザはTLSプロトコルに対応
認証フェーズ
- 一般的にはサーバ証明書によるサーバ認証のみ
- よりセキュリティが求められるサイトでは
  - クライアント認証, 証明書チェーンでルート証明書がPCにインストールされているか確認
鍵交換フェーズ
- 昔はRSA
８回のラウンドトリップを経てようやくリクエストを送ることができる

レスポンス

コネクション確立後ブラウザはHTTP GET リクエストを送信しレスポンスを返す
レスポンスヘッダーとHTMLコンテンツを返す
最初のリクエストのレスポンスは First Byte を含んでいる

TCPスロースタート/14kB ルール

パケット送信に使用可能な帯域幅を検出するために仕様されるアルゴリズム

ネットワークソフトのバランスを取る
輻輳を防ぐ
- 輻輳とは
  - 回線にアクセスが集中して通信速度が遅延したりすること
  - 例えば災害時の電話回線とか
  - バッファ（データを一時保存できる領域）から漏れたりする(?)
- 効率化のために一般的、インターネット設計的に回線を共有している
  - = 統計多重効果
    サーバの状態がわからない → 14kB 送る → 輻輳がおこらない → もっと送ってみよう 28kB →　輻輳を検知するまでサイズを増やす

パース処理

受信したデータを DOM と CSSOM に変換

DOM ツリーの構築

Critical rendering path (CRP)
ブラウザがHTML、CSS、JSをレンダリングする一連の手順
DOM → CSSOM →スタイル → レイアウト → 描画

CRP① DOM

ツリー構造
HTML パース処理 ( トークン化とツリーの構築に分かれる )
- トークンは開始終了タグ、属性の名前と値
- パーサーはトークン化された情報をドキュメントツリーを構成するドキュメントに変換
- パーサーがノンブロッキングリソース（画像等）やCSSファイルに遭遇してもパース処理を継続
- async``deferのないscriptはレンダリングをブロックしパース処理を停止

(プリロードスキャナー)

CSSやJS、ウェブフォントのような優先度の高いリソースをリクエスト
バックグラウンドでリースを取得する

CRP② CSSOM

ツリー構造
JS に CSS の操作を許可するAPIセット

その他の処理

JS のコンパイル

JS等のアセットがプリロードスキャナーによってダウンロードされる
インタープリターによって処理され、コンパイル、パース処理を経て実行される

アクセシビリティツリーの構築

AOM
補助機器向けのDOMのようなもの

レンダリング

スタイル → レイアウト → 描画 → 合成

CRP③スタイル

DOM と CSSOM を組み合わせること。
DOM 城の目に見えるノードとマッチングしCSSカスケードに基づいてスタイリング

CRP④ レイアウト

ノードの幅、高さ、位置を決定する処理のこと
画像等のサイズがわかれば再計算（再フロー）が発生

CRP⑤ 描画

ノードをスクリーンに描画すること

最初に発生する描画を first meaninghul paint と呼ぶ
描画は一般的に複数のレイヤーに分解される
- 一部のレイヤーをGPUに昇格させる
  - video
  - canvas
  - opacity
  - 3D tranform
  - will-change
  - これらはメモリー管理の面ではコストがかかる処理のため濫用は避ける

合成

レイヤーが重なる場合正しい順番で描画する必要がある

その他

TTI ( Time to interactive ) : DNS ルックアップと SSL コネクションを始める最初のリクエストからページが操作可能( First Contentful Paint: 50ms )になるまでの時間

概要

ナビゲーション