成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

重學(xué)前端學(xué)習(xí)筆記（十一）--瀏覽器工作解析（一）

alighters / 363人閱讀

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

筆記說明 
重學(xué)前端是程劭非（winter）【前手機淘寶前端負責(zé)人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語音】，如有侵權(quán)請聯(lián)系我，郵箱：[email protected]。
一、URL到網(wǎng)頁呈現(xiàn)發(fā)生了什么？ 1.1、過程

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

2、把請求回來的 HTML 代碼經(jīng)過解析，構(gòu)建成 DOM 樹

3、計算 DOM 樹上的 CSS 屬性

4、最后根據(jù) CSS 屬性對元素逐個進行渲染，得到內(nèi)存中的位圖

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

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

1.2、流程圖

winter用訪問極客時間網(wǎng)站為例整理了一下流程

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

二、HTTP協(xié)議 2.1、HTTP標(biāo)準(zhǔn) 2.1.1、介紹

1、HTTP 標(biāo)準(zhǔn)由 IETF 組織制定，跟它相關(guān)的標(biāo)準(zhǔn)主要有兩份：

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

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

2、TCP 協(xié)議是一條雙向的通訊通道，HTTP 在 TCP 的基礎(chǔ)上，規(guī)定了 Request-Response 的模式。這個模式?jīng)Q定了通訊必定是由瀏覽器端首先發(fā)起的。

3、HTTP 是純粹的文本協(xié)議，它是規(guī)定了使用 TCP 協(xié)議來傳輸文本格式的一個應(yīng)用層協(xié)議。

2.1.2、小實驗 
winter用一個純粹的 TCP 客戶端來手工實現(xiàn) HTTP，實驗需要使用telnet客戶端

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

telnet time.geekbang.org 80

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

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

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

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

3、按下兩次回車，收到服務(wù)端回復(fù)（響應(yīng)部分）

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，它也分為三個部分，協(xié)議和版本、狀態(tài)碼和狀態(tài)文本。

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

三、HTTP 協(xié)議格式 3.1、HTTP協(xié)議劃分

3.2、HTTP Method（方法） 
類型：GET、POST、HEADPUT、DELETE、CONNECT、OPTIONS、TRACE

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

2、表單提交產(chǎn)生 POST 方法

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

4、CONNECT 現(xiàn)在多用于 HTTPS 和 WebSocket

5、OPTIONS 和 TRACE 一般用于調(diào)試，多數(shù)線上服務(wù)都不支持

3.3、 HTTP Status code（狀態(tài)碼）和 Status text（狀態(tài)文本） 3.3.1、1xx 
臨時回應(yīng)，表示客戶端請繼續(xù)。對前端來說1xx 系列的狀態(tài)碼是非常陌生的，原因是 1xx 的狀態(tài)被瀏覽器 http 庫直接處理掉了，不會讓上層應(yīng)用知曉。
3.3.2、2xx 
2xx 系列的狀態(tài)最熟悉的就是 200，這通常是網(wǎng)頁請求成功的標(biāo)志
3.3.3、3xx 
表示請求的目標(biāo)有變化，希望客戶端進一步處理。

301&302：永久性與臨時性跳轉(zhuǎn)。

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

3.3.4、4xx 
客戶端請求錯誤。

403：無權(quán)限。

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

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

3.3.5、5xx 
服務(wù)端請求錯誤。

500：服務(wù)端錯誤。

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

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 標(biāo)簽提交產(chǎn)生的 html 請求，默認會產(chǎn)生 application/x-www-form-urlencoded 的數(shù)據(jù)格式

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

四、HTTPS 4.1、作用

1、確定請求的目標(biāo)服務(wù)端身份

2、保證傳輸?shù)臄?shù)據(jù)不會被網(wǎng)絡(luò)中間節(jié)點竊聽或者篡改

4.2、標(biāo)準(zhǔn)

HTTPS 的標(biāo)準(zhǔn)也是由 RFC 規(guī)定的查看詳情

HTTPS 是使用加密通道來傳輸 HTTP 的內(nèi)容。

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

TLS 構(gòu)建于 TCP 協(xié)議之上，它實際上是對傳輸?shù)膬?nèi)容做一次加密，所以從傳輸內(nèi)容上看，HTTPS 跟 HTTP 沒有任何區(qū)別。

五、HTTP2 
HTTP 2 是 HTTP 1.1 的升級版本查看詳情
5.1、最大改進

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

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

個人總結(jié)

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/110211.html

相關(guān)文章

  • 重學(xué)前端學(xué)習(xí)筆記（十一）--瀏覽器工作解析（一）

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

    paulli3 評論0 收藏0

  • 重學(xué)前端學(xué)習(xí)筆記（十一）--瀏覽器工作解析（一）

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

    付永剛 評論0 收藏0

  • 重學(xué)前端學(xué)習(xí)筆記（二十一）--如何選中svg里的a元素？

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

    jemygraw 評論0 收藏0

  • 重學(xué)前端學(xué)習(xí)筆記（二十一）--如何選中svg里的a元素？

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

    CloudwiseAPM 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<