「ハイパフォーマンス ブラウザネットワーキング」を読む

なおひさです。今回取り上げるテーマは「Browsers and how they work?」です。
ブラウザの仕組みと一口に言ってもブラウザは色々なことをやってくれていますが、ざっくり分けると次の２つに分類できます。

  1. 「ネットワーキング」 接続の確立やリソースの取得など
  2. 「レンダリング」 取得したHTMLドキュメントをもとにDOMの構築やスタイリングなど

今回はメンバーから推薦してもらった「ハイパフォーマンス ブラウザネットワーキング」を読んで、「ネットワーキング」について内容をまとめていきたいと思います。 割とボリュームのある本なので「14章 ブラウザネットワーキング入門」、「15章 XMLHTTPRequest」のみを扱っていきます。

ハイパフォーマンス ブラウザネットワーキング ―ネットワークアプリケーションのためのパフォーマンス最適化

ハイパフォーマンス ブラウザネットワーキング ―ネットワークアプリケーションのためのパフォーマンス最適化

レンダリングについては素晴らしい記事があるのでこちらを参考にしてください！ qiita.com

14章 ブラウザネットワーク入門

ソケット管理やネットワークセキュリティ、キャッシュ機能について書かれています。
これらはブラウザが自動的に行なってくれているので私達が普段Webアプリケーションを作る際にあまり意識しません。
しかし理解しておくことでトラブルシューティングやパフォーマンスの向上に繋げることができます。

  • ソケット管理*1
    • ソケット管理はWebアプリケーションではなくブラウザが行う。これによりブラウザはソケットの再利用やリクエストの発生を予測してソケット接続をしたり、パフォーマンスの最適化をしてくれる。
  • ネットワークセキュリティとサンドボックス化
    • ブラウザがソケット管理を行う利点は他にも、ブラウザをサンドボックス化できることにある。
    • Webアプリケーションがソケット管理をする場合、悪意のあるアプリケーションがメールサーバーに接続して意図しないメッセージを送るなどセキュリティを担保できない。
    • 同一生成元ポリシーを適用して他のオリジンのリソースにアクセスできないように制限しているのもブラウザの仕事。同一オリジンポリシー - ウェブセキュリティ | MDN
  • リソースとクライアント状態キャッシュ
    • 最速のリクエストはリクエストがまったく行われないこと、つまりローカルのキャッシュを利用すること。
    • キャッシュの管理自体はブラウザが行ってくれる、Webアプリの開発者の仕事は適切なキャッシュ制御ディレクティブを返すように実装すること。
    • 認証、セッション、クッキーの管理もブラウザが行っている。複数タブやウインドウで認証セッションを共有できるので、そのうちのどれかでログアウトしたら他のセッションも無効になる。

15章 XMLHttpRequest

Webアプリケーションで非同期処理を実装した方は使ったことあるかもしれません。現在はFetch APIやaxios、jQueryの$.ajaxなどがありますが、その元祖ですね。

  • XHRの歴史
    • XMLHttpRequest(XHR)とはJavaScriptを使ってデータ転送ができるブラウザレベルのAPI
    • XHRが登場する前にはサーバー・クライアント間で情報を送受信するためにはページ全体を更新する必要があったが、XHRにより非同期に送受信できるようになった。
    • ブラウザAPIということは接続管理などの低レイヤの処理をブラウザに任せて、開発者はリクエストの発行やサーバーから受信したデータの処理などに集中できる。
  • リアルタイム通知と配信
    • XHRを使うことでクライアントからサーバへの通信は簡単に実装できるが、逆にサーバからクライアントへの通信は難しい。
    • サーバ上の状態変化をトリガーにクライアントにリアルタイム通知をしたい場合など。HTTPはサーバからクライアントへの新規接続の開始はできない。
  • XHRポーリング
    • リアルタイム通知を実現するためにはクライアントからサーバへ定期的にXHRリクエストを送りアップデートの確認する方法がある(XHRポーリング)。定期的に送られるリクエストに対して新しいデータがあれば返し、なければ空のレスポンスを返す。
    • ただしポーリングのインターバル設定の決定が難しい。長すぎる場合はリアルタイム性が失われ、短すぎる場合には不要なトラフィックやオーバーヘッドが発生する。モバイルにとってはバッテリーを消費させてしまうアンチパターン。
    • インターバルが長い場合や配信のインターバルが予測できる場合などにはポーリングが適している。
  • XHRを使ったロングポーリング
    • 新しいデータがない場合はアップデートが行われるまでレスポンスを返さない(接続をアイドルにする)というロジックにすることで不要なトラフィックを発生させないようにすることをロングポーリングという。
    • アップデートのタイミングが不明な場合はロングポーリングが有効。ただし頻繁にアップデートが行われる場合、アップデートされるごとにレスポンスが返るので定期的なポーリングよりトラフィックが増えてしまう。
  • XHRのユースケース
    • HTTPリクエストやレスポンスに関わる転送を簡単に実装したい場合や認証が必要なリソースの取得や、転送データを圧縮する際などに使える。
    • リアルタイム通知については現在はServer-Sent EventsやWebSocketなどより効率的に同様の機能を実現できる方法があるため、XHRのロングポーリングはこれらのフォールバックに使われている。
    • XHRはストリーミングには向いていない。

14-15章とまとめて来ましたがかなりボリューミーで、理解できていない箇所が多いです、、、 他の章も含めて読み直して理解を深めていきたいと思います。

*1:ソケットとはプログラムの世界とTCP/IPの世界を結ぶ特別な出入り口のようなものhttp://research.nii.ac.jp/~ichiro/syspro98/socket.html