なおひさです。今回取り上げるテーマは「Browsers and how they work?」です。
ブラウザの仕組みと一口に言ってもブラウザは色々なことをやってくれていますが、ざっくり分けると次の2つに分類できます。
- 「ネットワーキング」 接続の確立やリソースの取得など
- 「レンダリング」 取得したHTMLドキュメントをもとにDOMの構築やスタイリングなど
今回はメンバーから推薦してもらった「ハイパフォーマンス ブラウザネットワーキング」を読んで、「ネットワーキング」について内容をまとめていきたいと思います。 割とボリュームのある本なので「14章 ブラウザネットワーキング入門」、「15章 XMLHTTPRequest」のみを扱っていきます。

ハイパフォーマンス ブラウザネットワーキング ―ネットワークアプリケーションのためのパフォーマンス最適化
- 作者:Ilya Grigorik
- 発売日: 2014/05/16
- メディア: 大型本
レンダリングについては素晴らしい記事があるのでこちらを参考にしてください! qiita.com
14章 ブラウザネットワーク入門
ソケット管理やネットワークセキュリティ、キャッシュ機能について書かれています。
これらはブラウザが自動的に行なってくれているので私達が普段Webアプリケーションを作る際にあまり意識しません。
しかし理解しておくことでトラブルシューティングやパフォーマンスの向上に繋げることができます。
- ソケット管理*1
- ソケット管理はWebアプリケーションではなくブラウザが行う。これによりブラウザはソケットの再利用やリクエストの発生を予測してソケット接続をしたり、パフォーマンスの最適化をしてくれる。
- ネットワークセキュリティとサンドボックス化
- ブラウザがソケット管理を行う利点は他にも、ブラウザをサンドボックス化できることにある。
- Webアプリケーションがソケット管理をする場合、悪意のあるアプリケーションがメールサーバーに接続して意図しないメッセージを送るなどセキュリティを担保できない。
- 同一生成元ポリシーを適用して他のオリジンのリソースにアクセスできないように制限しているのもブラウザの仕事。同一オリジンポリシー - ウェブセキュリティ | MDN
- リソースとクライアント状態キャッシュ
15章 XMLHttpRequest
Webアプリケーションで非同期処理を実装した方は使ったことあるかもしれません。現在はFetch APIやaxios、jQueryの$.ajax
などがありますが、その元祖ですね。
- XHRの歴史
- XMLHttpRequest(XHR)とはJavaScriptを使ってデータ転送ができるブラウザレベルのAPI
- XHRが登場する前にはサーバー・クライアント間で情報を送受信するためにはページ全体を更新する必要があったが、XHRにより非同期に送受信できるようになった。
- ブラウザAPIということは接続管理などの低レイヤの処理をブラウザに任せて、開発者はリクエストの発行やサーバーから受信したデータの処理などに集中できる。
- リアルタイム通知と配信
- XHRを使うことでクライアントからサーバへの通信は簡単に実装できるが、逆にサーバからクライアントへの通信は難しい。
- サーバ上の状態変化をトリガーにクライアントにリアルタイム通知をしたい場合など。HTTPはサーバからクライアントへの新規接続の開始はできない。
- XHRポーリング
- XHRを使ったロングポーリング
- XHRのユースケース
- HTTPリクエストやレスポンスに関わる転送を簡単に実装したい場合や認証が必要なリソースの取得や、転送データを圧縮する際などに使える。
- リアルタイム通知については現在はServer-Sent EventsやWebSocketなどより効率的に同様の機能を実現できる方法があるため、XHRのロングポーリングはこれらのフォールバックに使われている。
- XHRはストリーミングには向いていない。
14-15章とまとめて来ましたがかなりボリューミーで、理解できていない箇所が多いです、、、 他の章も含めて読み直して理解を深めていきたいと思います。
*1:ソケットとはプログラムの世界とTCP/IPの世界を結ぶ特別な出入り口のようなものhttp://research.nii.ac.jp/~ichiro/syspro98/socket.html