瀏覽器輸入url 按下回車發(fā)生了什么?
耗時的角度分析：
- DNS 查詢
- TCP 連接
- HTTP 請求及響應
- 服務器響應
- 客戶端渲染
DNS查詢
- DNS（Domain Name System, 域名系統(tǒng)）
- 是域名和IP地址相互映射的一個分布式數據庫
- DNS 查詢就是將域名轉換成 IP 的過程
- DNS Prefetch 瀏覽器會對其IP進行緩存，有效縮短了DNS的解析時間
- 自動解析： 當遇到a標簽，自動將href中的域名解析為IP地址。但是HTTPS頁面中不會自動解析。
- 手動解析：
// 希望在HTTPS頁面開啟自動解析功能時
<meta http-equiv="x-dns-prefetch-control" content="on">
// 希望在HTTP頁面關閉自動解析功能時，添加如下標記：
<meta http-equiv="x-dns-prefetch-control" content="off">
// 讓瀏覽器預取"http://XXXX.com"的解析
<link rel="dns-prefetch" />
TCP 連接
一個TCP連接可以同時發(fā)送幾個HTTP請求？
- HTTP/1.1中，單個TCP連接，在同一時間只能處理一個http請求，雖然存在Pipelining技術支持多個請求同時發(fā)送，但存在很多問題無法解決，瀏覽器默認關閉，所以認為是不支持同時多個請求。
- HTTP2提供了多路傳輸功能，多個http請求，可以同時在同一個TCP連接中進行傳輸。
瀏覽器與服務器建立一個TCP連接后，是否會在完成一個http請求后斷開？什么條件下會斷開？
- HTTP/1.1將 Connection 寫入了標準，默認值為 keep-alive 。除非強制設置為Connection: close 才會在請求后關閉TCP連接
瀏覽器http請求的并發(fā)性是如何體現的？并發(fā)請求的數量有沒有限制？
- 頁面資源請求時，瀏覽器會同時和服務器建立多個TCP連接，在同一個TCP連接上順序處理多個HTTP請求。
- 瀏覽器的并發(fā)性體現在可以建立多個TCP連接，來支持多個http同時請求。
- Chrome瀏覽器最多允許對同一個域名Host建立6個TCP連接，不同的瀏覽器有所區(qū)別。
HTTP 請求及響應
HTTP?
- 他就是計算機通過網絡進行通信的規(guī)則，是一個基于請求與響應，無狀態(tài)的，應用層的協議，?；赥CP/IP協議傳輸數據。
HTTP請求報文?
- 一個HTTP請求報文由請求行（request line）、請求頭部（header）、空行和請求數據4個部分組成
請求頭部?
| 請求頭 | 說明 |
|---|---|
| Host | 接受請求的服務器地址 IP:端口 或 域名 |
| User-Agent | 請求的應用程序名稱 |
| Connection | 連接形式 Connection：Keep-Alive |
| Accept-Charset | 通知服務器可以發(fā)送的編碼格式 |
| Accept-Encoding | 通知服務器可以發(fā)送的數據壓縮格式 |
| Accept-Language | 通知服務器可以發(fā)送的語言 |
post的請求報文
POST /index.php HTTP/1.1 請求行
Host: localhost
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:10.0.2) Gecko/20100101 Firefox/10.0.2 請求頭
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8
Accept-Language: zh-cn,zh;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive
Referer: http://localhost/
Content-Length：25
Content-Type：application/x-www-form-urlencoded
空行
username=admin&password=123456 請求數據
- 請求頭部的最后會有一個空行，表示請求頭部結束，接下來為請求數據，這一行非常重要，必不可少。
為什么要TCP三次握手，四次揮手?
- 客戶端和服務器通過三次握手建立了TCP連接以后，TCP的斷開連接，這里就有了的“四次分手”
- 為了防止已失效的連接請求報文段突然又傳送到了服務端，因而產生錯誤。
服務器響應
響應報文的
HTTP/1.1 200 OK // 狀態(tài)行
Date: Sun, 17 Mar 2013 08:12:54 GMT // 響應頭部
Server: Apache/2.2.8 (Win32) PHP/5.2.5
X-Powered-By: PHP/5.2.5
Set-Cookie: PHPSESSID=c0huq7pdkmm5gg6osoe3mgjmm3; path=/
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma: no-cache
Content-Length: 4393
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=utf-8
空行 // 表示結束
<html> 響應數據
<head>
<title>HTTP響應<title>
</head>
<body>
'你好'
</body>
</html>
客戶端渲染
解析過程：
js修改dom結構或樣式 -> 計算style -> layout(重排) -> paint(重繪) -> composite(合成)
- Html Parser 解析 html 構建
Dom Tree - Css Parser 解析 css 構建
CSS Rule Tree - 解析完成后，瀏覽器引擎會通過DOM Tree 和 CSS Rule Tree 來構造
Rendering Tree - 最后通過調用操作系統(tǒng)
Native GUI的API繪制。
WebKit CSS 解析器：
#head .warp div span { color: 'red' }
- 以上代碼瀏覽器會按照從右向左的順序去讀取選擇器
- display:none 不會被放在渲染樹中 visibility: hidden 會被放入渲染樹
JS解析：
- 比較有名的有 Chrome 的 V8 引擎，可以引入事件循環(huán)進行分析
- 對JavaScript文本代碼通過詞法和語法分析形成抽象語法樹
