打開(kāi)網(wǎng)頁(yè)需要幾步？
1、打開(kāi)瀏覽器；
2、輸入網(wǎng)址；
3、敲下回車鍵。
這是從用戶行為的角度來(lái)描述。
然而，從敲下回車鍵到網(wǎng)頁(yè)加載完成的短短幾秒內(nèi)，瀏覽器默默地做了很多事情：
1、向服務(wù)器發(fā)送請(qǐng)求；
2、服務(wù)器響應(yīng)請(qǐng)求返回?cái)?shù)據(jù)；
3、瀏覽器展示數(shù)據(jù)。
理解到這個(gè)層面，一般也就夠了，不過(guò)實(shí)際上遠(yuǎn)不止這么簡(jiǎn)單。作為互聯(lián)網(wǎng)的從業(yè)人員，尤其是產(chǎn)品經(jīng)理，了解網(wǎng)絡(luò)請(qǐng)求的全過(guò)程，會(huì)是一個(gè)加分項(xiàng)。很多公司面試產(chǎn)品，也會(huì)拿這個(gè)問(wèn)題考察面試者的技術(shù)儲(chǔ)備。下面就來(lái)說(shuō)說(shuō)，打開(kāi)網(wǎng)頁(yè)究竟需要幾步？
瀏覽器正式發(fā)送請(qǐng)求前，會(huì)有很多的準(zhǔn)備工作。首先得知道服務(wù)器的地址，也就是IP地址，例如14.215.177.38（百度）。如下圖，輸入這串?dāng)?shù)字，敲下回車，百度首頁(yè)就會(huì)加載出來(lái)，就和我們平常輸入www.baidu.com一樣。但是這串?dāng)?shù)字太難記了，所以會(huì)有www.baidu.com這樣的網(wǎng)址（以下統(tǒng)稱域名）出現(xiàn)，方便我們平時(shí)上網(wǎng)。
因此，打開(kāi)網(wǎng)頁(yè)的第一步，需要將域名轉(zhuǎn)化為IP地址。瀏覽器會(huì)找到域名服務(wù)器（DNS：Domain Name System，里面存著互聯(lián)網(wǎng)所有域名與IP地址的映射關(guān)系，解析域名，就能獲取對(duì)應(yīng)的IP地址 ），將www.baidu.com轉(zhuǎn)化成14.215.177.38。這時(shí)，服務(wù)器的地址找到了。
現(xiàn)在知道了出發(fā)點(diǎn)（瀏覽器）與目的地（服務(wù)器）的地址，然而并沒(méi)有什么卵用。如果我在杭州，想去北京，還不知道怎么走呢。假設(shè)坐高鐵，沿途會(huì)?？亢芏嗾九_(tái)，在網(wǎng)絡(luò)中，這一個(gè)個(gè)站臺(tái)，就是路由器，如下圖。高鐵遵循一定的規(guī)則與調(diào)度，網(wǎng)絡(luò)也一樣，它遵循協(xié)議。通過(guò)協(xié)議的規(guī)定與調(diào)度，瀏覽器會(huì)找到去往目的地的最優(yōu)路徑。這里的協(xié)議主要指IP協(xié)議、ARP協(xié)議和OSPF協(xié)議，感興趣的童鞋可以自己研究，本人也僅了解概念。
OK，現(xiàn)在找到去往目的地的最優(yōu)路徑了?？梢园l(fā)起請(qǐng)求了么？還不行，請(qǐng)求也不是隨便亂請(qǐng)，需要瀏覽器與服務(wù)器互相確認(rèn)3次，才能建立發(fā)送請(qǐng)求的連接。
第1次確認(rèn)，瀏覽器：服務(wù)器，我準(zhǔn)備向你發(fā)送請(qǐng)求；
第2次確認(rèn)，服務(wù)器：好的，我會(huì)響應(yīng)并返回?cái)?shù)據(jù)的；
第3次確認(rèn)，瀏覽器：OK，收到！
這3次確認(rèn)也叫3次握手，機(jī)制比我描述的肯定復(fù)雜很多，這里只是介紹大概的意思。
完成3次握手，通過(guò)TCP協(xié)議（傳輸控制協(xié)議），瀏覽器與服務(wù)器就建立了可發(fā)送請(qǐng)求的TCP連接。
接著，瀏覽器會(huì)向服務(wù)器發(fā)送HTTP請(qǐng)求，服務(wù)器收到請(qǐng)求，將數(shù)據(jù)包返回到瀏覽器，返回的數(shù)據(jù)包，簡(jiǎn)單來(lái)說(shuō)一般包含3部分代碼：HTML、CSS和JavaScript。其中HTML負(fù)責(zé)搭建網(wǎng)頁(yè)的結(jié)構(gòu)，CSS負(fù)責(zé)展示網(wǎng)頁(yè)的樣式，JavaScript負(fù)責(zé)監(jiān)聽(tīng)事件與交互。
瀏覽器收到數(shù)據(jù)包，就解析數(shù)據(jù)包中的HTML、CSS和JavaScript代碼，并渲染到屏幕上。
至此，大功告成！
我們來(lái)總結(jié)一下，打開(kāi)網(wǎng)頁(yè)究竟需要幾步？
1、DNS服務(wù)器解析域名，獲得服務(wù)器的IP地址
2、瀏覽器與服務(wù)器建立發(fā)送消息的最優(yōu)路徑
3、瀏覽器與服務(wù)器經(jīng)歷3次握手，互相確認(rèn)可以發(fā)送HTTP請(qǐng)求
4、瀏覽器向服務(wù)器發(fā)送HTTP請(qǐng)求
5、服務(wù)器響應(yīng)HTTP請(qǐng)求，并返回?cái)?shù)據(jù)包到瀏覽器
6、瀏覽器收到數(shù)據(jù)包，讀取數(shù)據(jù)
7、瀏覽器解析HTML、CSS、JavaScript代碼，并進(jìn)行渲染
8、網(wǎng)頁(yè)加載完成
最后再?gòu)?qiáng)調(diào)一下，真實(shí)的網(wǎng)絡(luò)請(qǐng)求遠(yuǎn)比我所描述的復(fù)雜地多。而作為產(chǎn)品認(rèn)識(shí)到這8步應(yīng)該夠用，如果想再深入，可以與身邊的前端后臺(tái)大牛多聊聊，當(dāng)然也可以自己去學(xué)著寫代碼。最近在慕課網(wǎng)上學(xué)習(xí)JS，想在下篇文章中分析一小段代碼，借此說(shuō)明程序員常說(shuō)的對(duì)象、方法、屬性與事件，敬請(qǐng)期待！
