I. ブラウザの作業プロセス
- ブラウザはまず、HTTPプロトコルまたはHTTPSプロトコルを使用してサーバーにページを要求します；
- 要求された HTML コードは解析され、DOM ツリーに構築されます；
- DOM ツリーの CSS プロパティを計算します；
- 最後に、CSSプロパティに従って要素を1つずつレンダリングし、メモリ内のビットマップを取得します；
- オプションのステップとして、ビットマップを合成することができます；
- 合成後、インターフェイスに描画されます。
第二に、ネットワーク通信
I. レンダリング
HTTP1.1
HTTP1.1
HTTP プロトコルは、双方向通信チャネルである TCP プロトコルをベースにしています。 HTTP は TCP をベースにしており、Request-Response モデルを提供します。このモデルでは、通信はまずブラウザによって開始されなければなりません。
ほとんどの場合、ブラウザの実装者は TCP ライブラリを使用するだけでよく、市販の HTTP ライブラリでもブラウザのネットワーク通信部分を処理することができます。 HTTP は純粋にテキストベースのプロトコルであり、TCP プロトコルを使用してアプリケーション層プロトコルのテキスト形式を転送します。
、HTTPプロトコルの形式
- パスは、リクエストのパスは完全にサーバーによって定義され、特別なコンテンツの多くはありません；
- バージョンはほとんど常に固定文字列です；
- レスポンスボディは、最も身近なHTMLです。
描画
- GET
- POST
- HEAD
- PUT
- 削除
- 接続
- オプション
- 追跡
ブラウザからアドレスバー経由でページにアクセスするのはGETメソッドです。フォーム送信はPOSTメソッドです。
HEADはGETに似ていて、リクエストヘッダのみを返し、主にJavaScriptによって開始されます。
PUTとDELETEはそれぞれリソースの追加と削除のためのものですが、実際にはこれらは強い制約のないセマンティックな規約です。
CONNECTは現在、ほとんどがHTTPSとWebSocketに使われています。
OPTIONSとTRACEは一般的にデバッグに使われ、ほとんどのオンラインサービスはサポートしていません。
、HTTPステータスコードとステータステキスト(状態テキスト)
1xx: 一時的な応答で、クライアントが続行していることを示します。
2xx：リクエストは成功しました。
- 200：リクエストは成功しました。
3xx：要求のターゲットが変更されたことを示し、クライアントがさらに処理することを願っています。
- 301&302: 永久ジャンプと一時ジャンプ。
- 304: クライアントキャッシュの更新がありません。
4xx: クライアント要求エラー。
- 403: パーミッションがありません。
- 404: 要求されたページが存在しません。
- 418: 急須です、卵です、ietfのエイプリルフールジョークです。
5xx: サーバー側のリクエスト・エラーです。
- 500: サーバー側のエラーです。
- 503: 一時的なサーバー側のエラーです。
1xx ステータスはブラウザの HTTP ライブラリによって直接処理され、上位のアプリケーションには知らされないため、1xx ステータスコードのシリーズはフロントエンドにはあまりなじみがありません。
2xx 系列のステータスは 200 として最もよく知られており、これは通常ウェブリクエストが成功したことを示すもので、最もよく使われるステータスコードです。
3xx 系列はもう少し複雑で、301 と 302 ステータスはリソースが転送されたことを示しますが、一方は永続的な転送で、もう一方は一時的な転送です。実際、301はエラーメッセージに近く、クライアントに次回は戻ってこないように注意喚起します。
304は、フロントエンドが状態を知っている必要があります知っている必要があり、この状態の前提は次のとおりです。クライアントは、キャッシュのローカルバージョンを持っており、リクエストでサーバーに伝えた、サーバーが時間やタグを介して、更新がないことがわかったとき、それは304状態に戻りますボディが含まれていません。
、HTTPヘッド
HTTPヘッダは、キーと値のペアとみなすことができます。原則的に、HTTPヘッダもデータの一種であり、自由にHTTPヘッダと値を定義することができます。しかし、HTTPの仕様では、いくつかの特別なHTTPヘッダがあります。例えば
レスポンスヘッダ
、HTTPリクエストボディ
一般的なボディ形式
- application/json
- application/x-www-form-urlencoded
- マルチパート/フォームデータ
- text/xml
HTTPSについて
HTTPプロトコルをベースにしたHTTPSとHTTP2は、より複雑なコンテンツを提供しますが、基本的にはHTTPのアイデアの設計、つまりリクエスト・レスポンス・モデルの使用を維持します！
まず HTTPS を見てみましょう。この HTTPS には2つの目的があります：リクエストのターゲットであるサーバーを識別することと、送信データがネットワーク内の中間ノードによって盗聴されたり改ざんされたりしないことを保証することです。
HTTPS の標準も RFC で規定されており、その詳細はリンク先で確認できます：
HTTPS は HTTP コンテンツを伝送するために暗号化されたチャネルを使用します。ただし、HTTPSはまずTCPプロトコルの上に構築されたTLS暗号化チャネルをサーバーと確立し、実際に送信コンテンツを暗号化するので、送信コンテンツという点ではHTTPSとHTTPに違いはありません。
、HTTP2
HTTP 2はHTTP 1.1のアップグレード版です、あなたはその詳細リンクをチェックすることができます。
HTTP 2.0の2つの最大の改良点は、サーバーサイドプッシュのサポートとTCPコネクションの多重化のサポートです。
サーバサイドプッシュは、クライアントがサーバに最初のリクエストを送るときに、コンテンツの一部をあらかじめクライアントにキャッシュにプッシュしておくもので、クライアントのリクエストの順番によって生じる並列性が性能の問題につながることを回避できます。
TCP 接続の多重化では、複数の HTTP リクエストを送信するために同じ TCP 接続を使用します。これにより、TCP 接続を確立する際の 3 回のハンドシェイクのオーバーヘッドや、最初に TCP 接続を確立する際の小さな送信ウィンドウの問題を回避できます。
