資訊專欄INFORMATION COLUMN
摘要：緊跟在后面的是請求頭，每行用冒號分隔名稱和值按下兩次回車，收到服務端回復響應部分第一行被稱作，它也分為三個部分，協議和版本狀態碼和狀態文本。對前端來說系列的狀態碼是非常陌生的，原因是的狀態被瀏覽器庫直接處理掉了，不會讓上層應用知曉。
筆記說明
重學前端是程劭非（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=15768000301 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 BodyHTTP 請求的 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 沒有任何區別。
五、HTTP2HTTP 2 是 HTTP 1.1 的升級版本查看詳情5.1、最大改進
1、支持服務端推送：服務端推送能夠在客戶端發送第一個請求到服務端時，提前把一部分內容推送給客戶端，放入緩存當中，這可以避免客戶端請求順序帶來的并行度不高，從而導致的性能問題。
2、支持 TCP 連接復用：TCP 連接復用，則使用同一個 TCP 連接來傳輸多個 HTTP 請求，避免了 TCP 連接建立時的三次握手開銷，和初建 TCP 連接時傳輸窗口小的問題。
個人總結這一部分的知識對我們排查api問題很有幫助，理解http的一些知識，能幫助我們更好的理解前后端的通訊，接下來winter會繼續講解瀏覽器是怎樣工作的后續階段。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/55014.html
摘要：緊跟在后面的是請求頭，每行用冒號分隔名稱和值按下兩次回車，收到服務端回復響應部分第一行被稱作，它也分為三個部分，協議和版本狀態碼和狀態文本。對前端來說系列的狀態碼是非常陌生的，原因是的狀態被瀏覽器庫直接處理掉了，不會讓上層應用知曉。 筆記說明 重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要...
摘要：緊跟在后面的是請求頭，每行用冒號分隔名稱和值按下兩次回車，收到服務端回復響應部分第一行被稱作，它也分為三個部分，協議和版本狀態碼和狀態文本。對前端來說系列的狀態碼是非常陌生的，原因是的狀態被瀏覽器庫直接處理掉了，不會讓上層應用知曉。 筆記說明 重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要...
摘要：二選擇器的基本意義根據一些特征，選中元素樹上的一批元素。四偽類選擇器樹結構關系偽類選擇器偽類表示樹的根元素。偽類表示沒有子節點的元素。表示焦點落在這個元素之上。用于選中瀏覽器的部分所指示的元素。 筆記說明 重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入wint...
摘要：二選擇器的基本意義根據一些特征，選中元素樹上的一批元素。四偽類選擇器樹結構關系偽類選擇器偽類表示樹的根元素。偽類表示沒有子節點的元素。表示焦點落在這個元素之上。用于選中瀏覽器的部分所指示的元素。 筆記說明 重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入wint...
閱讀 2405·2021-11-18 10:02
閱讀 1922·2021-10-13 09:40
閱讀 2999·2021-09-07 10:07
閱讀 2105·2021-09-04 16:48
閱讀 1005·2019-08-30 13:18
閱讀 2451·2019-08-29 14:03
閱讀 2921·2019-08-29 12:54
閱讀 3155·2019-08-26 11:41
