產(chǎn)品應(yīng)懂技術(shù)術(shù)語(yǔ)（網(wǎng)絡(luò)類(lèi)）

聊到瀏覽器中的網(wǎng)絡(luò)，就離不開(kāi)HTTP。HTTP是瀏覽器和服務(wù)器之間的通信語(yǔ)言，他們通過(guò)HTTP的請(qǐng)求頭和響應(yīng)頭來(lái)協(xié)商。

比如瀏覽器發(fā)起請(qǐng)求時(shí)，會(huì)通過(guò)HTTP請(qǐng)求頭告訴瀏覽器，它需要什么類(lèi)型的數(shù)據(jù)，是text/html，json或者file，當(dāng)服務(wù)器返回響應(yīng)數(shù)據(jù)時(shí)，會(huì)通過(guò)響應(yīng)頭告訴瀏覽器它返回的數(shù)據(jù)類(lèi)型，瀏覽器這時(shí)就可以去正確地解析數(shù)據(jù)和渲染頁(yè)面了。

下面總結(jié)下跟HTTP相關(guān)的常用技術(shù)術(shù)語(yǔ)。

目錄

1、帶寬
2、流量
3、qps
4、域名和DNS
5、http緩存
6、狀態(tài)碼
7、同源策略

1、帶寬

帶寬是指每秒最大能發(fā)送或者接收的字節(jié)數(shù)。指的是網(wǎng)速的大小，比如我們?cè)谵k理寬帶套餐時(shí)，有20Mb/s 、100Mb/s等等。

1B = 8b ?(1字節(jié)=8位，比特是表示信息的最小單位)
1KB=1024B
1MB=1024KB
1GB=1024MB

我們?？吹綄拵峁┥痰奶撞蛯?xiě)著上行帶寬和下行帶寬，指的是什么呢？

我們把每秒能發(fā)送的最大字節(jié)數(shù)叫作上行帶寬，每秒能接收的最大字節(jié)數(shù)叫作下行帶寬。

發(fā)送的最大字節(jié)數(shù)實(shí)際是指上傳請(qǐng)求數(shù)據(jù)的最大速度；接收的最大字節(jié)數(shù)實(shí)際是指當(dāng)請(qǐng)求返回時(shí)，下載數(shù)據(jù)的最大速度。

比如你辦理了一個(gè)上行帶寬是300Mb/s、下行帶寬是500Mb/s的寬帶套餐，當(dāng)你在看一個(gè)視頻時(shí)，視頻下載的最大速度是500Mb/s，不過(guò)一般不會(huì)到這個(gè)速度，因?yàn)橥瑫r(shí)可能有多個(gè)并發(fā)請(qǐng)求，所有的并發(fā)請(qǐng)求會(huì)一起來(lái)占用這些帶寬，當(dāng)帶寬不足時(shí)，這些請(qǐng)求連接就會(huì)放慢發(fā)送和接收的速度。

2、流量

流量指的是發(fā)送數(shù)據(jù)和接收數(shù)據(jù)的大小總和。單位有B,KB,MB,GB。比如我們的手機(jī)流量套餐有10塊錢(qián)100MB，20塊錢(qián)200MB等

舉個(gè)例子：
比如你打開(kāi)一個(gè)網(wǎng)頁(yè)，這個(gè)網(wǎng)頁(yè)的所有請(qǐng)求需要發(fā)送10KB的數(shù)據(jù)，服務(wù)器返回的響應(yīng)是需要下載200KB的數(shù)據(jù)，所以打開(kāi)這個(gè)網(wǎng)頁(yè)總共消耗了10KB+200KB=210KB的流量

3、qps

全名是 Queries Per Second，意思是“每秒查詢(xún)率”，是一臺(tái)服務(wù)器每秒能夠響應(yīng)的查詢(xún)次數(shù)。是對(duì)一個(gè)特定的查詢(xún)服務(wù)器在規(guī)定時(shí)間內(nèi)所處理流量多少的衡量標(biāo)準(zhǔn)。

4、域名和DNS

在網(wǎng)絡(luò)的遠(yuǎn)古時(shí)代，最開(kāi)始的時(shí)候，我們是通過(guò)ip地址來(lái)訪(fǎng)問(wèn)服務(wù)器的。
比如61.135.169.125 就是百度的官網(wǎng)地址之一，如果每個(gè)網(wǎng)址我們都用ip地址來(lái)記憶，那是相當(dāng)麻煩了。

域名比ip地址更好記憶，假設(shè)ip地址是電話(huà)號(hào)碼，域名就是人名，那么DNS就是通訊錄，當(dāng)你想打電話(huà)給某個(gè)人時(shí)，輸入人名，DNS就會(huì)從通訊錄中找出電話(huà)號(hào)碼撥打。

DNS是把域名解析映射成對(duì)應(yīng)的ip地址的服務(wù)器系統(tǒng)

域名的層級(jí)結(jié)構(gòu)是怎樣的呢？

一般來(lái)說(shuō)，一個(gè)域名是由至少3部分組成的：以www.baidu.com為例。

1）頂級(jí)域名
頂級(jí)域名，也叫做一級(jí)域名，比如.com / .cn / .net / .org等等。

2）次級(jí)域名
頂級(jí)域名的下一級(jí)就是次級(jí)域名，也叫做二級(jí)域名，baidu.com就是二級(jí)域名。這也是我們能購(gòu)買(mǎi)到的最高級(jí)域名。以此類(lèi)推，N級(jí)域名的下一級(jí)就是N+1級(jí)域名。

3）主機(jī)名
次級(jí)域名的下一級(jí)就是主機(jī)名，其實(shí)就是一個(gè)完整的域名，比如www.baidu.com就是百度的主機(jī)名。

一般我們購(gòu)買(mǎi)域名，購(gòu)買(mǎi)的是一個(gè)二級(jí)域名的管理權(quán)，然后我們就可以在二級(jí)域名基礎(chǔ)上去設(shè)置三級(jí)、四級(jí)域名等等。

相同的二級(jí)域名，不同的三級(jí)域名還可用來(lái)共享登錄態(tài)。我們知道，cookie是存儲(chǔ)在域名下的，比如有2個(gè)域名，分別是www.a.baidu.com和www.b.baidu.com，如果cookie存儲(chǔ)在二級(jí)域名baidu.com下面的話(huà)，那么a.baidu.com和b.baidu.com就可以共享這個(gè)cookie。

5、http緩存

你有沒(méi)有遇到過(guò)這種情況？
1、開(kāi)發(fā)說(shuō)前端已經(jīng)發(fā)版本，但是部分人刷新之后看到的還是老的頁(yè)面。
2、第一次打開(kāi)網(wǎng)頁(yè)時(shí)比較慢，第二次打開(kāi)時(shí)速度快了許多。

為了提升頁(yè)面的加載速度，http提供了緩存策略。服務(wù)器只要設(shè)置好需要緩存的資源和過(guò)期時(shí)間就可以使用了。不過(guò)一般設(shè)置的都是變化比較少的靜態(tài)文件，比如html、css、js、圖片字體等。

舉個(gè)例子：
當(dāng)瀏覽器想要發(fā)起一個(gè)獲取一張a.png的圖片請(qǐng)求時(shí)，會(huì)先到本地緩存中尋找，是否有一張名字是a.png的圖片，如果有則取消請(qǐng)求直接從緩存中獲取，如果沒(méi)有或者緩存時(shí)間已經(jīng)過(guò)期時(shí)就發(fā)起真正的請(qǐng)求到服務(wù)器獲取，獲取到圖片后再緩存到本地瀏覽器的內(nèi)存當(dāng)中。

所以說(shuō)http緩存是以資源的URL為key，以資源為value，用key-value結(jié)構(gòu)來(lái)存儲(chǔ)緩存的。

因?yàn)榫彺娴木壒?，所以打開(kāi)同個(gè)網(wǎng)頁(yè)第二次及以后會(huì)變快很多。但為什么有時(shí)候前端發(fā)了新版本拿到的還是老的頁(yè)面呢？

原因大概有以下幾種，
第一是文件名沒(méi)處理好，比如文件名沒(méi)有變更，但實(shí)際內(nèi)容已經(jīng)發(fā)生更改，比如a.png這張圖片，實(shí)際已經(jīng)替換成另一個(gè)張圖片，但是緩存里還是老的圖片。

第二是html緩存，因?yàn)槭醉?yè)html名字是不會(huì)發(fā)生變化的，但是html里面請(qǐng)求的子資源比如css，js已經(jīng)發(fā)生了變化，所以如果拿了緩存的html就會(huì)出現(xiàn)老版本的情況。

當(dāng)然通過(guò)清掉緩存來(lái)請(qǐng)求也是可以的，window系統(tǒng)下用F5+ctrl 強(qiáng)制刷新，mac 系統(tǒng)下用?command＋shift＋r

6、狀態(tài)碼

狀態(tài)碼是服務(wù)器告訴瀏覽器它的處理結(jié)果。狀態(tài)碼由3位數(shù)字組成，狀態(tài)碼有以下幾種類(lèi)型：

舉個(gè)例子：
比如瀏覽器在收到請(qǐng)求響應(yīng)時(shí)，如果發(fā)現(xiàn)返回的狀態(tài)碼是302，說(shuō)明服務(wù)器需要瀏覽器重定向到其他的URL。這時(shí)瀏覽器就會(huì)從響應(yīng)頭信息中拿到location字段，這個(gè)字段存儲(chǔ)著重定向的地址，然后再發(fā)起新的HTTP請(qǐng)求。

7、同源策略

先看個(gè)例子：

設(shè)想這樣一種情況：A 網(wǎng)站是一家銀行，用戶(hù)登錄以后，A 網(wǎng)站在用戶(hù)的機(jī)器上設(shè)置了一個(gè) Cookie，包含了一些隱私信息（比如存款總額）。用戶(hù)離開(kāi) A 網(wǎng)站以后，又去訪(fǎng)問(wèn) B 網(wǎng)站，如果沒(méi)有同源限制，B 網(wǎng)站可以讀取 A 網(wǎng)站的 Cookie，那么隱私信息就會(huì)泄漏。更可怕的是，Cookie 往往用來(lái)保存用戶(hù)的登錄狀態(tài)，如果用戶(hù)沒(méi)有退出登錄，其他網(wǎng)站就可以冒充用戶(hù)，為所欲為。因?yàn)闉g覽器同時(shí)還規(guī)定，提交表單不受同源政策的限制。（注：以上例子來(lái)自阮一峰老師）

為了保證用戶(hù)信息的安全，1995年開(kāi)始，所有瀏覽器都遵循了“同源策略”。同源策略指的是，網(wǎng)址在協(xié)議、域名、端口都相同的情況下才是同源的。

舉個(gè)例子：

網(wǎng)址：http://a.com:80/page/index.html。http:// 是協(xié)議，域名是a.com，端口是80。

不同源的網(wǎng)址，不能獲取對(duì)方的cookie、localstorage，不能給對(duì)方發(fā)送ajax異步請(qǐng)求，不能獲取對(duì)方的頁(yè)面元素。

如果你對(duì)不同源網(wǎng)址發(fā)起了請(qǐng)求，或者是去獲取不同源的頁(yè)面元素，就叫做跨域，瀏覽器會(huì)攔截報(bào)錯(cuò)。