http協(xié)議前端深入理解之入門和基礎(chǔ)工具介紹

http協(xié)議的內(nèi)容已經(jīng)成為前端必須要掌握的理論知識(shí)，也是我們面試的重點(diǎn)和工作中需要經(jīng)常接觸的的東西。

http協(xié)議簡介

http協(xié)議，全稱超文本傳輸協(xié)議（Hyper Text Transfer Protocol）
它是用來處理客戶端和服務(wù)端之間的通信
它的核心設(shè)計(jì)思想非常簡單，就是http請(qǐng)求和http返回
一開始設(shè)計(jì)出來就是用于網(wǎng)頁，json，xml，提交表單這些功能的支持。

http的設(shè)計(jì)理念

http的設(shè)計(jì)理念非常簡潔，就是純文本+無狀態(tài)
文本大家都可讀，傳播容易，利于推廣。
無狀態(tài)就是每次請(qǐng)求都是獨(dú)立的，請(qǐng)求間互不影響。
但是有時(shí)候需要我們有狀態(tài)，所以瀏覽器提供了手段去維護(hù)狀態(tài)（cookie，session等）
http是一個(gè)應(yīng)用層的協(xié)議

http的歷史

1991 HTTP0.9
1996 HTTP1.0
1999 HTTP1.1
2015 HTTP2.0
需要注意的是，1.1是到現(xiàn)在為止，影響立最大的版本。2015年升級(jí)了2.0，很多大公司都應(yīng)用上了。
2.0相對(duì)于于1.1在速度上提升了很多。

設(shè)計(jì)http協(xié)議的設(shè)計(jì)因素

1 帶寬
基礎(chǔ)的網(wǎng)絡(luò)，比如線路，設(shè)備，但是現(xiàn)在我們的帶寬都比較大，所以基本不用考慮了。
2延遲
我們?cè)L問網(wǎng)頁，dns查詢，建立連接這些都需要時(shí)間，會(huì)造成一定的延遲。

因?yàn)檫@些因素，http在設(shè)計(jì)上做出了很多優(yōu)化
1 緩存
http1.0提供緩存機(jī)制，比如IF-Modified-Since等基礎(chǔ)緩存控制策略
http1.1 提供E-Tag等高級(jí)緩存策略
簡單理解，就是我加載過的東西，不需要再加載一遍。
2 帶寬優(yōu)化
http1.1 利用range頭獲取文件的某個(gè)部分
http1.1利用長連接讓多個(gè)請(qǐng)求在一個(gè)TCP連接上排隊(duì)，這樣可以減少tcp握手的一些開銷。
http2.0 利用多路復(fù)用技術(shù)同時(shí)傳遞多個(gè)請(qǐng)求
3 資源壓縮
http2.0采用二進(jìn)制傳輸，頭部使用HPACK算法壓縮
但是主流服務(wù)器都提供gzip壓縮功能
4 安全性
https 是安全超文本傳輸協(xié)議，多了一個(gè)secure
在http和tcp/ip之間增加了一個(gè)TSL/SSl層，一開始是SSL（安全套接層），后面使用更安全的TSL（傳輸層安全協(xié)議）
數(shù)據(jù)傳輸加密，是非對(duì)稱+對(duì)稱加密的。防止各種攻擊手段（信息泄露，篡改等）
它是需要客戶端安裝證書的。

http協(xié)議代碼實(shí)現(xiàn)（nodeJS實(shí)現(xiàn)）

http協(xié)議是一個(gè)文本傳輸協(xié)議，傳輸內(nèi)容是我們可讀的文本，大體分成兩部分
1 請(qǐng)求頭/返回頭
2 消息體

常用的開發(fā)工具

1 Chrome瀏覽器，是前端開發(fā)經(jīng)常使用的，開源免費(fèi)，擁有強(qiáng)大的調(diào)試能力
2cUrl 是一個(gè)命令，在命令行是和服務(wù)器交互，主要用來傳輸一個(gè)url，他支持非常多的協(xié)議
urlData 是你要訪問的網(wǎng)址

3fetch
fetch是一個(gè)新的，在網(wǎng)絡(luò)上獲取數(shù)據(jù)的標(biāo)準(zhǔn)接口。
用fetch發(fā)請(qǐng)求，返回的是一個(gè)標(biāo)準(zhǔn)的promise對(duì)象
它提供了自定義header的能力和跨域的能力。
4 postman 是我們和后端接口聯(lián)調(diào)經(jīng)常使用的，是一個(gè)協(xié)作型的api開發(fā)工具，國內(nèi)的話有一款apifox，也是不錯(cuò)的。
5 Whistle
它是一個(gè)跨平臺(tái)的網(wǎng)絡(luò)調(diào)試工具
安裝：?npm install whistle?-g
注意：
1 需要SwitchOmega插件的安裝支持
2它是一個(gè)node應(yīng)用，需要先安裝node
3它支持抓包，重放，替換，修改等功能。