從輸入U(xiǎn)RL到展示頁面分為5步,總流程為:
第1步:用戶輸入url網(wǎng)址(URL)
?用戶輸入url(也就是我們說的網(wǎng)址,也是統(tǒng)一資源定義符,用于定義互聯(lián)網(wǎng)資源)
比如輸入https://www.baidu.com
其中https為協(xié)議
baidu.com是域名
www:World Wide Web”首字母的縮寫形式?！癢WW”在我國(guó)曾被譯為“環(huán)球網(wǎng)”、“環(huán)球信息網(wǎng)”、“超媒體環(huán)球信息網(wǎng)”等,為什么要加,我猜是規(guī)范,有些網(wǎng)址不加www也能訪問
有時(shí)候域名后面會(huì)跟端口號(hào)如xxx.com:8080,8080就是端口號(hào)
互聯(lián)網(wǎng)上的每一臺(tái)計(jì)算機(jī)，都會(huì)分配到一個(gè)IP地址,規(guī)定網(wǎng)絡(luò)地址的協(xié)議，叫做IP協(xié)議。它所定義的地址，就被稱為IP地址,那為什么我們輸入網(wǎng)址而不是IP地址?因?yàn)榫W(wǎng)址是語義化的好記憶,而IP是類似:192.168.1.0,不易人記憶.
2.? IP尋址:瀏覽器根據(jù)輸入的網(wǎng)址去尋找它對(duì)應(yīng)的IP地址
首先需了解
DNS(網(wǎng)域名稱系統(tǒng)):?是互聯(lián)網(wǎng)的一項(xiàng)服務(wù),它作為將域名和IP地址相互映射的一個(gè)分布式數(shù)據(jù)庫，能夠使人更方便地訪問互聯(lián)網(wǎng),DNS使用TCP和UDP端口53;
DNS解析是一種在服務(wù)器上尋找資源的過程;
TCP:為了解決這個(gè)問題，提高網(wǎng)絡(luò)可靠性，TCP協(xié)議就誕生了。這個(gè)協(xié)議非常復(fù)雜，但可以近似認(rèn)為，它就是有確認(rèn)機(jī)制的UDP協(xié)議，每發(fā)出一個(gè)數(shù)據(jù)包都要求確認(rèn)。如果有一個(gè)數(shù)據(jù)包遺失，就收不到確認(rèn)，發(fā)出方就知道有必要重發(fā)這個(gè)數(shù)據(jù)包了。因此TCP協(xié)議能夠確保數(shù)據(jù)不會(huì)遺失。
它的缺點(diǎn)是過程復(fù)雜、實(shí)現(xiàn)困難、消耗較多的資源。TCP協(xié)議具體實(shí)現(xiàn)是"三次握手":如圖:
UDP : 我們必須在數(shù)據(jù)包中加入端口信息，這就需要新的協(xié)議。最簡(jiǎn)單的實(shí)現(xiàn)叫做UDP協(xié)議,UDP數(shù)據(jù)包，也是由"標(biāo)頭"和"數(shù)據(jù)"UDP協(xié)議的優(yōu)點(diǎn)是比較簡(jiǎn)單，容易實(shí)現(xiàn).
缺點(diǎn):可靠性較差，一旦數(shù)據(jù)包發(fā)出，無法知道對(duì)方是否收到。
網(wǎng)址到IP地址的轉(zhuǎn)換，這個(gè)過程就是DNS解析，實(shí)現(xiàn)了網(wǎng)址到IP地址的轉(zhuǎn)換,其步驟如下
域名解析:
1.先從瀏覽器緩存里找IP,因?yàn)闉g覽器會(huì)緩存DNS記錄一段時(shí)間
2.如沒找到,再從Hosts文件查找是否有該域名和對(duì)應(yīng)IP
3.如沒找到,再從路由器緩存找
4.如沒好到,再從DNS緩存查找
5.如果都沒找到,瀏覽器域名服務(wù)器向根域名服務(wù)器(baidu.com)查找域名對(duì)應(yīng)IP,還沒找到就把請(qǐng)求轉(zhuǎn)發(fā)到下一級(jí),直到找到IP
補(bǔ)充:什么是dns劫持:黑客攻擊根域名服務(wù)器的節(jié)點(diǎn),發(fā)生在上面第四步,從DNS緩存數(shù)據(jù)庫里找時(shí)被惡意改為其他的網(wǎng)址,所以請(qǐng)求到的是其他網(wǎng)址.
3.服務(wù)器處理
服務(wù)器:是一臺(tái)安裝了系統(tǒng)的機(jī)器,常見的系統(tǒng)如linux,windows server2012,系統(tǒng)里安裝的處理請(qǐng)求應(yīng)用叫 Web server,常用Web服務(wù)器有Apache.
處理流程如圖:
Rails路由匹配網(wǎng)址,通過控制器從數(shù)據(jù)里取出模型數(shù)據(jù),顯示到視圖.簡(jiǎn)稱為MVC模式.而前端開發(fā)者專注在上圖的視圖view的處理.
4 瀏覽器處理?
服務(wù)器通過后臺(tái)語言程序處理,找到數(shù)據(jù)返回給瀏覽器: HTML字符串被瀏覽器接收后一句句讀取解析,解析到link標(biāo)簽后重新發(fā)送請(qǐng)求獲取css,解析到script標(biāo)簽后發(fā)送請(qǐng)求獲取js,并執(zhí)行代碼
5.繪制網(wǎng)頁
關(guān)于瀏覽器引擎渲染: 不同的瀏覽器內(nèi)核對(duì)網(wǎng)頁編寫語法的解釋也有不同，因此同一網(wǎng)頁在不同的內(nèi)核的瀏覽器里的渲染（顯示）效果也可能不同，這也是網(wǎng)頁編寫者需要在不同內(nèi)核的瀏覽器中測(cè)試網(wǎng)頁顯示效果;可以閱讀:瀏覽器內(nèi)核和javascript引擎
瀏覽器根據(jù)HTML和CSS計(jì)算得到渲染樹,繪制到屏幕上,js會(huì)被執(zhí)行.
這篇文章涉及的東西太多,花了很長(zhǎng)時(shí)間整理,面試也經(jīng)常問到,作為一個(gè)前端自然好奇真相.?
備注:如需了解IP尋址的細(xì)節(jié)和htttp協(xié)議請(qǐng)點(diǎn)擊:互聯(lián)網(wǎng)協(xié)議入門（一）,互聯(lián)網(wǎng)協(xié)議入門（二）
參考資料:
阮一峰互聯(lián)網(wǎng)協(xié)議入門?;?
—————————————————————————————————————
"聽很多大神說寫博客可以提高技術(shù)水平,以后會(huì)養(yǎng)成寫博客習(xí)慣,也是方便自己復(fù)習(xí)".
