前端的同學(xué)大家經(jīng)常會(huì)在面試中碰到關(guān)于瀏覽器的問(wèn)題但是我們由于經(jīng)常在代碼中很少碰到這方面的知識(shí)我們經(jīng)常會(huì)忽略它亡问，今天就來(lái)系統(tǒng)的總結(jié)一下。
我們經(jīng)常會(huì)碰到這種高頻試題
從輸入域名到最后呈現(xiàn)經(jīng)歷的過(guò)程
這個(gè)題其實(shí)是個(gè)開(kāi)發(fā)性試題 你從很多方面回答都是對(duì)的。
比如
域名解析 --> 發(fā)起TCP的3次握手 --> 建立TCP連接后發(fā)起http請(qǐng)求 --> 服務(wù)器響應(yīng)http請(qǐng)求，瀏覽器得到html代碼 --> 瀏覽器解析html代碼，并請(qǐng)求html代碼中的資源（如js猪贪、css、圖片等） --> 瀏覽器對(duì)頁(yè)面進(jìn)行渲染呈現(xiàn)給用戶(hù) --> 四次揮手結(jié)束
當(dāng)然我們也可以細(xì)化從瀏覽器得到html
域名解析 --> 發(fā)起TCP的3次握手 --> 建立TCP連接后發(fā)起http請(qǐng)求 --> 服務(wù)器響應(yīng)http請(qǐng)求讯私，瀏覽器得到html代碼 --> 瀏覽器把請(qǐng)求回來(lái)的 HTML 代碼經(jīng)過(guò)解析，構(gòu)建成 DOM 樹(shù) -->計(jì)算 DOM 樹(shù)上的 CSS 屬性--> 最后根據(jù) CSS 屬性對(duì)元素逐個(gè)進(jìn)行渲染西傀，得到內(nèi)存中的位圖(排版)--> 瀏覽器對(duì)頁(yè)面進(jìn)行渲染呈現(xiàn)給用戶(hù) --> 四次揮手結(jié)束
接下來(lái)我們看下大學(xué)中都會(huì)遇到的OSI七層模型
- Layer 7 - Application
- Layer 6 - Presentation
- Layer 5 - Session
- Layer 4 - Transport
- Layer 3 - Network
- Layer 2 - Data Link
- Layer 1 - Physical
在我們開(kāi)始請(qǐng)求TCP的時(shí)候這個(gè)時(shí)候是在Transport層 在Node.js中屬于net模塊
IP屬于Network層 在Node.js中要引入C++ libnet或者libpcap
接下來(lái)在HTTP時(shí)就在上面三層 在Node.js中屬于HTTP模塊
這也就是為什么我們創(chuàng)建HTTP server時(shí)候要用到HTTP模塊
我們寫(xiě)個(gè)列子
const http = require('http');
const server = http.createServer((req, res) => {
res.setHeader('Content-Type', 'text/html');
res.setHeader('X-Foo', 'bar');
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.end('ok');
});
server.listen(8088)
HTTP
HTTP 協(xié)議是基于 TCP 協(xié)議出現(xiàn)的斤寇，對(duì) TCP 協(xié)議來(lái)說(shuō)，TCP 協(xié)議是一條雙向的通訊通道拥褂，HTTP 在 TCP 的基礎(chǔ)上娘锁，規(guī)定了 Request-Response 的模式。這個(gè)模式?jīng)Q定了通訊必定是由瀏覽器端首先發(fā)起的饺鹃。
request
一個(gè)HTTP請(qǐng)求報(bào)文由請(qǐng)求行（request line）莫秆、請(qǐng)求頭部（header）间雀、空行和請(qǐng)求數(shù)據(jù)4個(gè)部分組成
- 請(qǐng)求行 get post put
- 請(qǐng)求頭部 accept user agent
- 空行 （最后一個(gè)請(qǐng)求頭之后是一個(gè)空行，發(fā)送回車(chē)符和換行符镊屎，通知服務(wù)器以下不再有請(qǐng)求頭）
- 請(qǐng)求數(shù)據(jù) （post中）
POST / HTTP/1.1 301 Moved Permanently // request line
Date: Fri, 25 Jan 2019 13:28:12 GMT // header
Content-Type: text/html
Content-Length: 182
Connection: keep-alive
Location: https://time.geekbang.org/
Strict-Transport-Security: max-age=15768000
// 空行
<html> // body
<head><title>301 Moved Permanently</title></head>
<body bgcolor="white">
<center><h1>301 Moved Permanently</h1></center>
<hr><center>openresty</center>
</body>
</html>
response
HTTP響應(yīng)也由三個(gè)部分組成惹挟，分別是：狀態(tài)行、消息報(bào)頭缝驳、響應(yīng)正文连锯。
- 狀態(tài)行 get post put
- 消息報(bào)頭 accept user agent
- 空行 （最后一個(gè)請(qǐng)求頭之后是一個(gè)空行，發(fā)送回車(chē)符和換行符用狱，通知服務(wù)器以下不再有請(qǐng)求頭）
- 響應(yīng)正文 （post中）
狀態(tài)行 有狀態(tài)碼
POST / HTTP/1.1 301 Moved Permanently // status line
Date: Fri, 25 Jan 2019 13:28:12 GMT // header
Content-Type: text/html
Content-Length: 182
Connection: keep-alive
Transfer-Rncoding: chunked
// 空行
2
<html> // body
<head><title>301 Moved Permanently</title></head>
<body bgcolor="white">
hi
</body>
</html>
HTTP狀態(tài)碼
- 1xx：臨時(shí)回應(yīng)运怖，表示客戶(hù)端請(qǐng)繼續(xù)。
- 2xx：請(qǐng)求成功夏伊。
- 200：請(qǐng)求成功摇展。
- 3xx: 表示請(qǐng)求的目標(biāo)有變化，希望客戶(hù)端進(jìn)一步處理溺忧。
- 301&302：永久性與臨時(shí)性跳轉(zhuǎn)咏连。
- 304：跟客戶(hù)端緩存沒(méi)有更新。
- 4xx：客戶(hù)端請(qǐng)求錯(cuò)誤砸狞。
- 403：無(wú)權(quán)限捻勉。
- 404：表示請(qǐng)求的頁(yè)面不存在。
- 418：It’s a teapot. 這是一個(gè)彩蛋刀森，來(lái)自 ietf 的一個(gè)愚人節(jié)玩笑踱启。（超文本咖啡壺控制協(xié)議）
- 5xx：服務(wù)端請(qǐng)求錯(cuò)誤。
- 500：服務(wù)端錯(cuò)誤研底。
- 503：服務(wù)端暫時(shí)性錯(cuò)誤埠偿，可以一會(huì)再試。
HTTP Request Header 傳送門(mén)
Request Header 由 general-header | request-header | entity-header組成榜晦。
- general-header
- Cache-Control
- Connection
- Date
- Pragma
- Trailer
- Transfer-Encoding
- Upgrade
- Via
- Warning
- request-header
- Accept
- Accept-Charset
- Accept-Encoding
- Accept-Language
- Authorization
- Expect
- From
- Host
- If-Match
- If-Modified-Since
- If-None-Match
- If-Range
- If-Unmodified-Since
- Max-Forwards
- Proxy-Authorization
- Range
- Referer
- TE
- User-Agent
- entity-header
- Allow
- Content-Encoding
- Content-Language
- Content-Length
- Content-Location
- Content-MD5
- Content-Range
- Content-Type
- Expires
- Last-Modified
HTTP Response Header 傳送門(mén)
Request Header 由 general-header | response-header | entity-header組成冠蒋。
- general-header(同上)
- request-header
- Accept-Ranges
- Age
- ETag
- Location
- Proxy-Authenticate
- Retry-After
- Server
- Vary
- WWW-Authenticate
- entity-header(同上)
HTTPS 傳送門(mén)
HTTPS在 HTTP 協(xié)議的基礎(chǔ)上，HTTPS 和 HTTP2 規(guī)定了更復(fù)雜的內(nèi)容乾胶，但是它基本保持了 HTTP 的設(shè)計(jì)思想抖剿，即：使用上的 Request-Response 模式。
我們首先來(lái)了解下 HTTPS识窿。HTTPS 有兩個(gè)作用斩郎，一是確定請(qǐng)求的目標(biāo)服務(wù)端身份，二是保證傳輸?shù)臄?shù)據(jù)不會(huì)被網(wǎng)絡(luò)中間節(jié)點(diǎn)竊聽(tīng)或者篡改喻频。
HTTPS 是使用加密通道來(lái)傳輸 HTTP 的內(nèi)容缩宜。但是 HTTPS 首先與服務(wù)端建立一條 TLS 加密通道。TLS 構(gòu)建于 TCP 協(xié)議之上，它實(shí)際上是對(duì)傳輸?shù)膬?nèi)容做一次加密锻煌，所以從傳輸內(nèi)容上看妓布，HTTPS 跟 HTTP 沒(méi)有任何區(qū)別。
HTTP 2 傳送門(mén)
2.0 最大的改進(jìn)有兩點(diǎn)宋梧，一是支持服務(wù)端推送匣沼，二是支持 TCP 連接復(fù)用。
服務(wù)端推送能夠在客戶(hù)端發(fā)送第一個(gè)請(qǐng)求到服務(wù)端時(shí)乃秀，提前把一部分內(nèi)容推送給客戶(hù)端肛著，放入緩存當(dāng)中，這可以避免客戶(hù)端請(qǐng)求順序帶來(lái)的并行度不高跺讯，從而導(dǎo)致的性能問(wèn)題枢贿。
TCP 連接復(fù)用，則使用同一個(gè) TCP 連接來(lái)傳輸多個(gè) HTTP 請(qǐng)求刀脏，避免了 TCP 連接建立時(shí)的三次握手開(kāi)銷(xiāo)局荚，和初建 TCP 連接時(shí)傳輸窗口小的問(wèn)題。
Note: 其實(shí)很多優(yōu)化涉及更下層的協(xié)議愈污。IP 層的分包情況耀态，和物理層的建連時(shí)間是需要被考慮的
