瀏覽器工作原理——step1 通訊（整理）

Performance API:

navigationStart
unloadStart
unloadEnd
fetchStart
domainLookupStart
domainLookupEnd
connectStart
secureConnectStart
connectEnd
requestStart
responseStart
responseEnd
domLoading
domInteractive
contentLoadedEventStart
contentLoadedEventEnd
domComplete
loadEventStart
loadEventEnd

將一個url變成屏幕上顯示的網(wǎng)頁過程

  • http或https協(xié)議向服務(wù)端請求頁面（以下步驟不是做完一步才做下一步，是流式處理，即不需要等到上一步完全結(jié)束，就開始處理上一步的輸出）
  • 將請求回來的html代碼解析，構(gòu)建成DOM樹
  • 計算DOM樹上的css屬性
  • 最后根據(jù)css屬性對元素逐個渲染，得到內(nèi)存中的位圖
  • 一個可選步驟是對位圖進(jìn)行合成（能夠極大地增加后續(xù)繪制的速度）
  • 合成后，繪制到界面上

HTTP協(xié)議

3-1. telnet示例

telnet baidu.com 80

request

# request line: HTTP method, 請求的路徑， 協(xié)議和版本
GET / HTTP/1.1 
# 請求頭，每行以冒號分隔名稱和值
HOST: baidu.com

response

# response line: 協(xié)議和版本， HTTP狀態(tài)碼，狀態(tài)文本
HTTP/1.1 301 Moved Permanently
# 響應(yīng)頭，每行以冒號分隔名稱和值
Date: Fri, 25 Jan 2019 13:28:12 GMT
Content-Type: text/html
Content-Length: 182
Connection: keep-alive
Location: https://time.geekbang.org/
Strict-Transport-Security: max-age=15768000

# 響應(yīng)體，html代碼
<html>
<head><title>301 Moved Permanently</title></head>
<body bgcolor="white">
<center><h1>301 Moved Permanently</h1></center>
<hr><center>openresty</center>
</body>
</html>

3-2 HTTP協(xié)議格式

  • request
    • request line
      • method
      • path
      • version
    • head
    • body
  • response
    • response line
      • version
      • status code
      • status text
    • head
    • body

3-3 HTTP方法（method）

GET
POST
HEAD
OPTIONS
PUT
DELETE
CONNECT 多用于HTTPS和Websocket
TRACE 一般用于調(diào)試 多數(shù)線上服務(wù)都不支持

3-4 HTTP Status code(狀態(tài)碼) 和 Status text (狀態(tài)文本)

  • 1xx：消息，臨時回應(yīng)，表示客戶端請繼續(xù)
    • 100 Continue
    • 101 Switching Protocols
    • 102 Processing
  • 2xx：請求成功
    • 200 OK
    • 201 Created
    • 202 Accepted
    • 203 Non-Authoritative Information
    • 204 No Content
    • 205 Reset Content
    • 206 Partial Content
    • 207 Multi-Status
  • 3xx：重定向，請求的目標(biāo)有變化 希望客戶端進(jìn)一步處理
    • 300 Multiple Choices
    • 301 Moved Permanently 永久性跳轉(zhuǎn)
    • 302 Moved Temporarily 臨時性跳轉(zhuǎn)
    • 303 See Other
    • 304 Not Modified 跟客戶端緩存一致 沒有更新
    • 305 Use Proxy
    • 306 Switch Proxy
    • 307 Temporary Redirect
  • 4xx: 客戶端請求錯誤
    • 400 Bad Request
    • 401 Unauthorized
    • 402 Payment Required
    • 403 Forbidden 無權(quán)限
    • 404 Not Found 請求的頁面不存在
    • 405 Method Not Allowed
      ...
  • 5xx: 服務(wù)端請求錯誤
    • 500 Internal Server Error 服務(wù)端錯誤
    • 501 Not Implemented
    • 502 Bad Gateway
    • 503 Service Unavailable 服務(wù)端暫時性錯誤，可以一會再試
    • 504 Gateway Timeout
    • 505 HTTP Version No Supported
      ...

3-5 HTTP Head (HTTP 頭)

較常見的HTTP頭：

Request Header 意義
Accept 瀏覽器端接受的格式
Accept-Encoding 瀏覽器端接收的編碼方式
Accept-Language 瀏覽器端接受的語言，用于判斷多語言
Cache-Control 控制緩存的時效性
Connection 連接方式，若是keep-alive 且服務(wù)端支持，則會復(fù)用連接
Host HTTP訪問使用的域名
If-Modified-Since 上次訪問的更改時間，如果服務(wù)端認(rèn)為此時間后自己沒有更新，則會給出304響應(yīng)
If-None-Match 上次訪問時使用的E-Tag，通常是頁面的信息摘要（比更改時間更準(zhǔn)確）
User-Agent 客戶端表示，多數(shù)瀏覽器的這個字段十分復(fù)雜
Cookie 客戶端存儲的cookie字符串
Response Header 意義
Content-Encoding 內(nèi)容編碼方式，通常是gzip
Content-Length 內(nèi)容的長度，有利于瀏覽器判斷內(nèi)容是否已經(jīng)結(jié)束
Content-Type 內(nèi)容的類型，所有請求網(wǎng)頁的都是text/html
Cache-Control 緩存控制 ，用于通知各級緩存保存的時間，如max-age=0,表示不需要緩存
Connection 連接方式，keep-alive 表示復(fù)用連接
Keep-Alive 保持連接不斷時需要的一些信息，如timeout=5,max=100
Last-Modified 頁面上次修改的時間
ETag 頁面信息摘要，用于判斷是否需要重新到服務(wù)端取回頁面
Expires 過期時間，用于判斷下次請求是否需要到服務(wù)端取回頁面
Server 服務(wù)端軟件的類型
Set-Cookie 設(shè)置cookie，可以存在多個
Date 當(dāng)前服務(wù)器的日期
Via 服務(wù)端的請求鏈路，對一些調(diào)試場景至關(guān)重要的一個頭

3-6 HTTP Request Body (HTTP 頭)

一些常見的body格式是：（Content-Type的內(nèi)容）
application/x-www-form-urlencoded # 常見于表單提交數(shù)據(jù)，key1=value1&key2=value2
multipart/form-data # 表單上傳文件
application/xml # xml
application/json # json數(shù)據(jù)
text/plain # 純文本數(shù)據(jù)

3-7 HTTPS

在HTTP協(xié)議的基礎(chǔ)上，HTTPS和HTTP2規(guī)定了更復(fù)雜的內(nèi)容，但即便保持了HTTP的設(shè)計思想，使用Request-Response模式

  1. HTTPS
    HTTPS有兩方面作用，1是確認(rèn)目標(biāo)服務(wù)端身份，二是保證傳輸?shù)臄?shù)據(jù)不會被網(wǎng)絡(luò)中間節(jié)點竊聽或篡改

  2. HTTP2
    HTTP2是HTTP 1.1的升級版本
    HTTP2.0最大的改進(jìn)有兩點，1是支持服務(wù)端推送，2是支持TCP連接復(fù)用
    服務(wù)端推送能狗仔客戶端發(fā)送第一個請求到服務(wù)端是，提前把一部分內(nèi)容推送給客戶端，放入緩存當(dāng)中，這可以避免客戶端請求順序帶來的并行度不高，從而導(dǎo)致的性能問題
    TCP連接復(fù)用，則使用同一個TCP連接來傳輸多個HTTP請求，避免了TCP連接建立時的三次握手開銷，和初建TCP連接時傳輸窗口小的問題

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容