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

付永剛發布于2019-08-30 10:49 / 1791人閱讀

摘要：緊跟在后面的是請求頭，每行用冒號分隔名稱和值按下兩次回車，收到服務端回復響應部分第一行被稱作，它也分為三個部分，協議和版本狀態碼和狀態文本。對前端來說系列的狀態碼是非常陌生的，原因是的狀態被瀏覽器庫直接處理掉了，不會讓上層應用知曉。

筆記說明

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

一、URL到網頁呈現發生了什么？ 1.1、過程

1、瀏覽器首先使用 HTTP 協議或者 HTTPS 協議，向服務端請求頁面

2、把請求回來的 HTML 代碼經過解析，構建成 DOM 樹

3、計算 DOM 樹上的 CSS 屬性

4、最后根據 CSS 屬性對元素逐個進行渲染，得到內存中的位圖

5、一個可選的步驟是對位圖進行合成，這會極大地增加后續繪制的速度

6、合成之后，再繪制到界面上

1.2、流程圖

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

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

二、HTTP協議 2.1、HTTP標準 2.1.1、介紹

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

1）、HTTP1.1：https://tools.ietf.org/html/rfc2616

2）、HTTP1.1：https://tools.ietf.org/html/rfc7234

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

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

2.1.2、小實驗

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

1、運行 telnet，連接到極客時間主機

telnet time.geekbang.org 80

2、TCP 連接已經建立，輸入下面字符作為請求（請求部分）

GET / HTTP/1.1
Host: time.geekbang.org

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

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

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

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


301 Moved Permanently

301 Moved Permanently
openresty

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

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

三、HTTP 協議格式 3.1、HTTP協議劃分

3.2、HTTP Method（方法）

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

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

2、表單提交產生 POST 方法

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

4、CONNECT 現在多用于 HTTPS 和 WebSocket

5、OPTIONS 和 TRACE 一般用于調試，多數線上服務都不支持

3.3、 HTTP Status code（狀態碼）和 Status text（狀態文本） 3.3.1、1xx

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

3.3.2、2xx

2xx 系列的狀態最熟悉的就是 200，這通常是網頁請求成功的標志

3.3.3、3xx

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

301&302：永久性與臨時性跳轉。

304：跟客戶端緩存沒有更新。

3.3.4、4xx

客戶端請求錯誤。

403：無權限。

404：表示請求的頁面不存在。

418：It’s a teapot. 這是一個彩蛋，來自 IETF 的一個愚人節玩笑。（超文本咖啡壺控制協議）

3.3.5、5xx

服務端請求錯誤。

500：服務端錯誤。

503：服務端暫時性錯誤，可以一會再試。

3.4、HTTP Head (HTTP 頭) 3.4.1、Request Header

3.4.2、Response Header

3.5、HTTP Request Body

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

常見的 body 格式是：

application/json

application/x-www-form-urlencoded

multipart/form-data

text/xml

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

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

四、HTTPS 4.1、作用

1、確定請求的目標服務端身份

2、保證傳輸的數據不會被網絡中間節點竊聽或者篡改

4.2、標準

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

HTTPS 是使用加密通道來傳輸 HTTP 的內容。

HTTPS首先與服務端建立一條 TLS 加密通道。

TLS 構建于 TCP 協議之上，它實際上是對傳輸的內容做一次加密，所以從傳輸內容上看，HTTPS 跟 HTTP 沒有任何區別。

五、HTTP2

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

5.1、最大改進

1、支持服務端推送：服務端推送能夠在客戶端發送第一個請求到服務端時，提前把一部分內容推送給客戶端，放入緩存當中，這可以避免客戶端請求順序帶來的并行度不高，從而導致的性能問題。

2、支持 TCP 連接復用：TCP 連接復用，則使用同一個 TCP 連接來傳輸多個 HTTP 請求，避免了 TCP 連接建立時的三次握手開銷，和初建 TCP 連接時傳輸窗口小的問題。

個人總結

這一部分的知識對我們排查api問題很有幫助，理解http的一些知識，能幫助我們更好的理解前后端的通訊，接下來winter會繼續講解瀏覽器是怎樣工作的后續階段。

云服務器 GPU云服務器學習筆記一前端工作學習筆記基礎學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114593.html

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

摘要：緊跟在后面的是請求頭，每行用冒號分隔名稱和值按下兩次回車，收到服務端回復響應部分第一行被稱作，它也分為三個部分，協議和版本狀態碼和狀態文本。對前端來說系列的狀態碼是非常陌生的，原因是的狀態被瀏覽器庫直接處理掉了，不會讓上層應用知曉。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要...

paulli3 2019-08-02 16:17 評論0 收藏0
重學前端學習筆記（十一）--瀏覽器工作解析（一）

摘要：緊跟在后面的是請求頭，每行用冒號分隔名稱和值按下兩次回車，收到服務端回復響應部分第一行被稱作，它也分為三個部分，協議和版本狀態碼和狀態文本。對前端來說系列的狀態碼是非常陌生的，原因是的狀態被瀏覽器庫直接處理掉了，不會讓上層應用知曉。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要...

alighters 2019-08-26 18:26 評論0 收藏0
重學前端學習筆記（二十一）--如何選中svg里的a元素？

摘要：二選擇器的基本意義根據一些特征，選中元素樹上的一批元素。四偽類選擇器樹結構關系偽類選擇器偽類表示樹的根元素。偽類表示沒有子節點的元素。表示焦點落在這個元素之上。用于選中瀏覽器的部分所指示的元素。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入wint...

CloudwiseAPM 2019-08-30 10:57 評論0 收藏0
重學前端學習筆記（二十一）--如何選中svg里的a元素？

摘要：二選擇器的基本意義根據一些特征，選中元素樹上的一批元素。四偽類選擇器樹結構關系偽類選擇器偽類表示樹的根元素。偽類表示沒有子節點的元素。表示焦點落在這個元素之上。用于選中瀏覽器的部分所指示的元素。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入wint...

jemygraw 2019-08-26 13:51 評論0 收藏0