1.ユーザーがURLを入力すると、ブラウザは、DNSクエリ要求を開始します
システムキャッシュ - 必要なレコードがブラウザのキャッシュに見つからない場合、ブラウザはシステムコール（のgethostbynameのウィンドウ）を作成します。この方法では、記録システムキャッシュを得ることができます。
ルータのキャッシュ - 、その後、クエリの前で、一般的に、独自のDNSキャッシュを持っているルータに送信。
ISPのDNSキャッシュ - その後、ISPがDNSサーバーにキャッシュされて確認する必要があります。一般的に、これは、対応するキャッシュレコードで見つけることができます。
再帰検索 - Facebookのドメインネームサーバへの.comトップレベルドメインのサーバーからの再帰検索を開始すると、ドメイン・ネーム・サーバーからISPのDNSサーバ。一般的なキャッシュDNSサーバーは、ドメイン名で.COMドメインネームサーバを持つことになりますので、トップサーバーにマッチング処理はそれほど必要ありません。
|
1
2
3
4
5
6
7
|
GET http:
//www.cricode.com/ HTTP/1.1
Host: www.cricode.com
Connection: keep-alive
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36
Accept-Encoding: gzip,deflate,sdch
Accept-Language: zh-CN,zh;q=0.8
|
Webサーバーは通常、クライアントのHTTPリクエストを取得するには、ポート80でリッスンします。あなたは、クライアントとのTCP接続を作成した後、Webサーバは、次のような他の情報の前にリクエストされたURL情報を解析し、HTTPを経由して、クライアントから送信されたデータを受け入れ、デコード始まり、受け入れ言語およびネットワークから受信した他のデータ・エンコーディングを受け入れます。クライアントに返された応答データを取得するためにHTTPリクエスト・ヘッダーに係るWebサーバ。典型的なHTTPレスポンスヘッダデータパケットを次のように
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
HTTP/1.1 200 OK
Date: Fri, 24 Oct 2014 13:55:18 GMT
Server: Apache
X-Powered-By: PHP/5.4.32
Keep-Alive: timeout=5, max=10000
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: text/html; charset=UTF-8
a0f6
<</span>!DOCTYPE HTML>
<</span>html>
<</span>head>
<</span>meta charset=
"UTF-8"
>
<</span>meta http-equiv=
"X-UA-Compatible"
content=
"IE=10,IE=9,IE=8"
>
<</span>meta name=
"viewport"
content=
"width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"
>
<</span>title><</span>/title>
<</span>body
class
=
"home"
><</span>/body>
<</span>/html>
|
この時点で、HTTP通信処理は終了します。フィールド値接続のキープアライブ、Webサーバはすぐに接続を閉じていないTCPリンクチャネルを、閉鎖するかどうかを決定するためにHTTP接続リクエストヘッダフィールド値からWebサーバ。（このステップは始まりで、多分、ブラウザ等、リダイレクトアドレスを以下のがリダイレクトされます）。
5は、ブラウザがHTTPレスポンスを解析し、
（1）HTML文書の解析（DOMツリー）
ブラウザは、すべての完全なHTML文書を受け入れない場合は、このページに表示し始めています。即ちDOMツリー解析木が要素によって、生成されたDOMノード属性され、ツリーのルートは、ドキュメントオブジェクトです。
（2）ブラウザは、取得したオブジェクトは、HTMLに埋め込まれている送信します
外部CSSファイルのロード中に発生した、ブラウザは、CSSファイルを取得するには、別の要求を送信します。画像リソースが遭遇した、ブラウザは、画像リソースを取得するために別のリクエストを送信します。これは非同期要求され、かつ負荷にhtmlファイルには影響を与えません。
文書負荷がJSファイル中に遭遇したときには、HTMLファイルは、唯一の文書がjsのロードされているため、ファイルを待つために、スレッド（ロード解決の同期をレンダリング）レンダリングハング終了した解析を待つ必要が、HTML文書をレンダリングするために復元することができますスレッド。
（3）CSSの解析（パーサツリーをレンダリング）
ダウンロードファイル、CSSファイルへのCSSのブラウザはスタイルシートオブジェクトを解析し、DOMツリーをレンダリングするために使用されます。オブジェクトは、セレクタと宣言オブジェクトを含むCSS規則を含んでいます。
要素のCSSのトラバーサル順序は、下端からツリーをトラバースあります。
（4）JS解析
ブラウザUIスレッド：単一のスレッド（例えば、クロムなど）ほとんどのブラウザは、シングルスレッド実行javascripを作成し、ユーザーインターフェースを更新するために使用しました。
ページのブロッキングJS：その他の行為JS実行時間がブラウザを詰まらせるだろうしながら、ダウンロードが完了した後、ブラウザのHTTP要求は、JSファイルのための特定の理由は、一般的にJSによって引き起こさブロックされているが、すぐに実行されますが、時間のない期間がありませんネットワーク要求は、この時間後にHTTPリクエストは、このアイドル時間がブロックされたHTTPリクエストと呼ばれているの実装が続く、処理されます。
理由ブロッキングJS：JSは、UIの表示を制御することができるので、実行のUIスレッドをブロックする理由、およびルール・ページのロードは、UIスレッドが最初に実行される出会いJSコードように、注文を実行することです
1.ユーザーがURLを入力すると、ブラウザは、DNSクエリ要求を開始します
システムキャッシュ - 必要なレコードがブラウザのキャッシュに見つからない場合、ブラウザはシステムコール（のgethostbynameのウィンドウ）を作成します。この方法では、記録システムキャッシュを得ることができます。
ルータのキャッシュ - 、その後、クエリの前で、一般的に、独自のDNSキャッシュを持っているルータに送信。
ISPのDNSキャッシュ - その後、ISPがDNSサーバーにキャッシュされて確認する必要があります。一般的に、これは、対応するキャッシュレコードで見つけることができます。
再帰検索 - Facebookのドメインネームサーバへの.comトップレベルドメインのサーバーからの再帰検索を開始すると、ドメイン・ネーム・サーバーからISPのDNSサーバ。一般的なキャッシュDNSサーバーは、ドメイン名で.COMドメインネームサーバを持つことになりますので、トップサーバーにマッチング処理はそれほど必要ありません。
|
1
2
3
4
5
6
7
|
GET http:
//www.cricode.com/ HTTP/1.1
Host: www.cricode.com
Connection: keep-alive
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36
Accept-Encoding: gzip,deflate,sdch
Accept-Language: zh-CN,zh;q=0.8
|
Webサーバーは通常、クライアントのHTTPリクエストを取得するには、ポート80でリッスンします。あなたは、クライアントとのTCP接続を作成した後、Webサーバは、次のような他の情報の前にリクエストされたURL情報を解析し、HTTPを経由して、クライアントから送信されたデータを受け入れ、デコード始まり、受け入れ言語およびネットワークから受信した他のデータ・エンコーディングを受け入れます。クライアントに返された応答データを取得するためにHTTPリクエスト・ヘッダーに係るWebサーバ。典型的なHTTPレスポンスヘッダデータパケットを次のように
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
HTTP/1.1 200 OK
Date: Fri, 24 Oct 2014 13:55:18 GMT
Server: Apache
X-Powered-By: PHP/5.4.32
Keep-Alive: timeout=5, max=10000
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: text/html; charset=UTF-8
a0f6
<</span>!DOCTYPE HTML>
<</span>html>
<</span>head>
<</span>meta charset=
"UTF-8"
>
<</span>meta http-equiv=
"X-UA-Compatible"
content=
"IE=10,IE=9,IE=8"
>
<</span>meta name=
"viewport"
content=
"width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"
>
<</span>title><</span>/title>
<</span>body
class
=
"home"
><</span>/body>
<</span>/html>
|
この時点で、HTTP通信処理は終了します。フィールド値接続のキープアライブ、Webサーバはすぐに接続を閉じていないTCPリンクチャネルを、閉鎖するかどうかを決定するためにHTTP接続リクエストヘッダフィールド値からWebサーバ。（このステップは始まりで、多分、ブラウザ等、リダイレクトアドレスを以下のがリダイレクトされます）。
5は、ブラウザがHTTPレスポンスを解析し、
（1）HTML文書の解析（DOMツリー）
在浏览器没有完整接受全部HTML文档时，它就已经开始显示这个页面了。生成解析树即dom树，是由dom元素及属性节点组成，树的根是document对象。
（2）浏览器发送获取嵌入在HTML中的对象
加载过程中遇到外部css文件，浏览器另外发出一个请求，来获取css文件。遇到图片资源，浏览器也会另外发出一个请求，来获取图片资源。这是异步请求，并不会影响html文档进行加载。
但是当文档加载过程中遇到js文件，html文档会挂起渲染（加载解析渲染同步）的线程，不仅要等待文档中js文件加载完毕，还要等待解析执行完毕，才可以恢复html文档的渲染线程。
（3）css解析（parser Render Tree）
浏览器下载css文件，将css文件解析为样式表对象，并用来渲染dom tree。该对象包含css规则，该规则包含选择器和声明对象。
css元素遍历的顺序，是从树的低端向上遍历。
（4）js解析
浏览器UI线程：单线程，大多数浏览器（比如chrome）让一个单线程共用于执行javascrip和更新用户界面。
js阻塞页面：浏览器里的http请求被阻塞一般都是由js所引起，具体原因是js文件在下载完毕之后会立即执行，而js执行时候会阻塞浏览器的其他行为，有一段时间是没有网络请求被处理的，这段时间过后http请求才会接着执行，这段空闲时间就是所谓的http请求被阻塞。
js阻塞原因：之所以会阻塞UI线程的执行，是因为js能控制UI的展示，而页面加载的规则是要顺序执行，所以在碰到js代码时候UI线程会首先执行它