27
27

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Webページが表示されるまで

Last updated at Posted at 2015-10-26

一般的なwebページをブラウザで表示するまでの流れをかなり大雑把にメモ

流れ

  1. HTTPリクエスト
  2. HTTPレスポンス
  3. 返ってきたHTMLの評価
  4. レンダーツリーの構築と描画

HTTPリクエスト

DNSルックアップ

アクセスしようとしているURLに含まれるドメイン名からアクセスすべきホストのIPアドレスを取得します

http://hoge.com
↓
◯◯.◯◯.◯◯.◯◯

TCP接続の確立

3ウェイハンドシェイクと呼ばれる手法でTCP接続を確立させます
通信の信頼性を担保する必要があるため、この手続きが発生します

HTTPリクエスト

TCP接続が確立したら、データをHTTPリクエストとして送信します

GET / HTTP/1.1
Host: hoge.com

HTTPレスポンス

サーバーへとHTTPリクエストを送信したら、それに応じたレスポンスが返ってきます
静的なHTMLを返す場合もあれば、サーバーサイドでHTMLを動的に生成して、返す場合もあります。

返ってきたHTMLの評価

サーバーからHTMLを取得すると、ブラウザでDOMが構築されます
linkタグ、imgタグ、scriptタグなどのサブリソースがあれば順次HTTPリクエストが発生します
画像、CSS、JavaScriptなどもこのタイミングでロードされます

レンダーツリーの構築と描画

サブリソースのロードが終わるといよいよ描画計算をします
DOMとCSSのスタイル情報をもとに、描画すべき要素の視覚情報を計算します
画像などはデータをビットマップデータにデコードして描画処理に回されます

27
27
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
27
27

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?