重學前端學習筆記（十一）--瀏覽器工做解析（一）

時間 2019-12-05

原文原文鏈接

筆記說明

重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，天天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的能夠加入winter的專欄學習【原文有winter的語音】，若有侵權請聯繫我，郵箱：kaimo313@foxmail.com。html

1、URL到網頁呈現發生了什麼？

1.一、過程

一、瀏覽器首先使用 HTTP 協議或者 HTTPS 協議，向服務端請求頁面
二、把請求回來的 HTML 代碼通過解析，構建成 DOM 樹
三、計算 DOM 樹上的 CSS 屬性
四、最後根據 CSS 屬性對元素逐個進行渲染，獲得內存中的位圖
五、一個可選的步驟是對位圖進行合成，這會極大地增長後續繪製的速度
六、合成以後，再繪製到界面上

1.二、流程圖

winter用訪問極客時間網站爲例整理了一下流程前端

注意一點：從 HTTP 請求回來，就產生了流式的數據，後續的 DOM 樹構建、CSS 計算、渲染、合成、繪製，都是儘量地流式處理前一步的產出json

2、HTTP協議

2.一、HTTP標準

2.1.一、介紹

一、HTTP 標準由 IETF 組織制定，跟它相關的標準主要有兩份：後端

1）、HTTP1.1：tools.ietf.org/html/rfc261…api

2）、HTTP1.1：tools.ietf.org/html/rfc723…瀏覽器

二、TCP 協議是一條雙向的通信通道，HTTP 在 TCP的基礎上，規定了 Request-Response 的模式。這個模式決定了通信一定是由瀏覽器端首先發起的。緩存

三、HTTP 是純粹的文本協議，它是規定了使用 TCP 協議來傳輸文本格式的一個應用層協議。bash

2.1.二、小實驗

winter用一個純粹的 TCP 客戶端來手工實現 HTTP，實驗須要使用telnet客戶端網絡

一、運行 telnet，鏈接到極客時間主機app

telnet time.geekbang.org 80
複製代碼

二、TCP 鏈接已經創建，輸入下面字符做爲請求（請求部分）

GET / HTTP/1.1
Host: time.geekbang.org
複製代碼

第一行被稱做 request line，它分爲三個部分，HTTP Method（請求的方法）、請求的路徑、請求的協議和版本。

緊跟在request line後面的是請求頭，每行用冒號分隔名稱和值

三、按下兩次回車，收到服務端回覆（響應部分）

HTTP/1.1 301 Moved Permanently
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

<html>
<head><title>301 Moved Permanently</title></head>
<body bgcolor="white">
<center><h1>301 Moved Permanently</h1></center>
<hr><center>openresty</center>
</body>
</html>
複製代碼

第一行被稱做 response line，它也分爲三個部分，協議和版本、狀態碼和狀態文本。

緊隨在 response line 以後，是響應頭，每行用冒號分隔的名稱和值

3、HTTP 協議格式

3.一、HTTP協議劃分

3.二、HTTP Method（方法）

類型：GET、POST、HEADPUT、DELETE、CONNECT、OPTIONS、TRACE

一、瀏覽器經過地址欄訪問頁面都是 GET 方法

二、表單提交產生 POST 方法

三、PUT 和 DELETE 分別表示添加資源和刪除資源

四、CONNECT 如今多用於 HTTPS 和 WebSocket

五、OPTIONS 和 TRACE 通常用於調試，多數線上服務都不支持

3.三、 HTTP Status code（狀態碼）和 Status text（狀態文本）

3.3.一、1xx

臨時迴應，表示客戶端請繼續。對前端來講1xx 系列的狀態碼是很是陌生的，緣由是 1xx 的狀態被瀏覽器 http 庫直接處理掉了，不會讓上層應用知曉。

3.3.二、2xx

2xx 系列的狀態最熟悉的就是 200，這一般是網頁請求成功的標誌

3.3.三、3xx

表示請求的目標有變化，但願客戶端進一步處理。

301&302：永久性與臨時性跳轉。
304：跟客戶端緩存沒有更新。

3.3.四、4xx

客戶端請求錯誤。

403：無權限。
404：表示請求的頁面不存在。
418：It’s a teapot. 這是一個彩蛋，來自 IETF 的一個愚人節玩笑。（超文本咖啡壺控制協議）

3.3.五、5xx

服務端請求錯誤。

500：服務端錯誤。
503：服務端暫時性錯誤，能夠一會再試。

3.四、HTTP Head (HTTP 頭)

3.4.一、Request Header

3.4.二、Response Header

3.五、HTTP Request Body

HTTP 請求的 body 主要用於提交表單場景。

常見的 body 格式是：

application/json
application/x-www-form-urlencoded
multipart/form-data
text/xml

一、使用 html 的 form 標籤提交產生的 html 請求，默認會產生 application/x-www-form-urlencoded 的數據格式

二、當有文件上傳時，則會使用 multipart/form-data。

4、HTTPS

4.一、做用

一、肯定請求的目標服務端身份
二、保證傳輸的數據不會被網絡中間節點竊聽或者篡改

4.二、標準

HTTPS 的標準也是由 RFC 規定的查看詳情

HTTPS 是使用加密通道來傳輸 HTTP 的內容。
HTTPS首先與服務端創建一條 TLS 加密通道。
TLS 構建於 TCP 協議之上，它其實是對傳輸的內容作一次加密，因此從傳輸內容上看，HTTPS 跟 HTTP 沒有任何區別。

5、HTTP2

HTTP 2 是 HTTP 1.1 的升級版本查看詳情

5.一、最大改進

一、支持服務端推送：服務端推送可以在客戶端發送第一個請求到服務端時，提早把一部份內容推送給客戶端，放入緩存當中，這能夠避免客戶端請求順序帶來的並行度不高，從而致使的性能問題。
二、支持 TCP 鏈接複用：TCP 鏈接複用，則使用同一個 TCP 鏈接來傳輸多個 HTTP 請求，避免了 TCP 鏈接創建時的三次握手開銷，和初建 TCP 鏈接時傳輸窗口小的問題。