當(dāng)我們輸入U(xiǎn)RL，按下回車發(fā)生了什么桐玻？ 這個(gè)題目很俗套- -但是是面試經(jīng)常出現(xiàn)的題目了篙挽。今天聽尼古拉斯?屌?大斌哥介紹關(guān)于從URI到瀏覽器呈現(xiàn)給我們頁(yè)面發(fā)生了什么。感覺收獲頗多畸冲。索性就翻閱了一些其他資料嫉髓。在此總結(jié)下观腊。這一晚上也算是沒白白浪費(fèi)邑闲。
當(dāng)我們輸入U(xiǎn)RL，發(fā)生了什么梧油？
用一個(gè)例子來(lái)說(shuō)明把苫耸。當(dāng)我們打開https://datura900607.github.io/home-automation/ 這個(gè)網(wǎng)頁(yè)的時(shí)候發(fā)生了什么？
通過(guò)URI定位到主機(jī)儡陨。
當(dāng)我們?cè)跒g覽器輸入url后褪子，瀏覽器通過(guò)DNS服務(wù)器量淌，將網(wǎng)站中的URl中的主機(jī)域名解析為，web服務(wù)器中所對(duì)應(yīng)的IP地址嫌褪。順序差不多是：
- 先在瀏覽器緩存中查詢呀枢，如果瀏覽器緩存中有就直接使用。
- 瀏覽器緩存中找不到 在系統(tǒng)緩存中查詢笼痛。
- 系統(tǒng)緩存中沒有在路由器緩存中查詢裙秋。
- 路由器找不到在web服務(wù)器中查詢，直到找到這個(gè)IP地址缨伊。
打包HTTP請(qǐng)求
好了,經(jīng)過(guò)一番查詢摘刑，我們找到了我家居網(wǎng)站的IP地址：151.101.100.133:443 這是我們打包的HTTP請(qǐng)求：
通過(guò)TCP協(xié)議，向服務(wù)器發(fā)送請(qǐng)求
通過(guò)TCP協(xié)議與Web服務(wù)器創(chuàng)建連接刻坊。(俗稱三次握手)枷恕，向服務(wù)器發(fā)送請(qǐng)求
web服務(wù)器接收請(qǐng)求，交給相關(guān)進(jìn)程處理
這里要根據(jù)后臺(tái)語(yǔ)言不同而分情況處理谭胚，我這個(gè)是HTML類型文件徐块。web服務(wù)器接收請(qǐng)求后 找到服務(wù)器上相對(duì)應(yīng)的html文件(一般是index.html)
如果后臺(tái)語(yǔ)言是PHP類型，則web服務(wù)器在接收到用戶的請(qǐng)求后將請(qǐng)求轉(zhuǎn)交給PHP應(yīng)用服務(wù)器來(lái)處理灾而，（web服務(wù)器本身不能處理PHP動(dòng)態(tài)語(yǔ)言文件）
服務(wù)器響應(yīng)請(qǐng)求蛹锰，通過(guò)TCP協(xié)議回傳響應(yīng)
這里因?yàn)榇思揖泳W(wǎng)站就是一個(gè)靜態(tài)HTML。就直接找到HTML文件就會(huì)通過(guò)TCP協(xié)議回傳了绰疤。如果是php文件铜犬。則還需要PHP應(yīng)用服務(wù)器將PHP文件，翻譯成HTML靜態(tài)代碼轻庆，傳回Web服務(wù)器癣猾，然后再通過(guò)TCP協(xié)議回傳響應(yīng)。這是回傳的響應(yīng)head截圖
瀏覽器接收響應(yīng)余爆，開始下載并渲染纷宇，將頁(yè)面呈現(xiàn)在我們面前
- 解析HTML生成DOM樹，
- 解析CSS文件生成CSSOM樹蛾方，并解析Javascript代碼
- CSS和DOM組合形成渲染樹像捶，
- 進(jìn)行布局，在瀏覽器中繪制渲染樹中節(jié)點(diǎn)的屬性(位置桩砰，寬度拓春，大小等)
- 繪制元素，繪制各個(gè)節(jié)點(diǎn)的可視屬性(顏色背景等亚隅，此時(shí)可能會(huì)形成多個(gè)圖層)
- 合并圖層硼莽，將頁(yè)面呈現(xiàn)給用戶面前
額外提一點(diǎn)
在服務(wù)器接收響應(yīng)請(qǐng)求的時(shí)候，會(huì)因?yàn)橐恍┎煌囊蛩爻尸F(xiàn)出不同的頁(yè)面主要是：
影響服務(wù)器結(jié)果的因素
- 請(qǐng)求方式（例：get煮纵、post當(dāng)然請(qǐng)求方式不止這兩種懂鸵。）的不同
- 路徑的不同：（url不同服務(wù)器結(jié)果當(dāng)然不同Ｆ荨！）
- query string 傳參的不同
- cookie ————用于用戶身份識(shí)別的
- 服務(wù)器自身的配置
- 后臺(tái)語(yǔ)言的邏輯（java和php）
狀態(tài)碼
狀態(tài)碼常見的大致可分為以下幾種：
200 （正常OK）
304 （請(qǐng)求的網(wǎng)頁(yè)與上次比沒有更新）刷新的時(shí)候出現(xiàn)
301 （重定向）換域名
403 （配置服務(wù)器沒權(quán)限）
404 （沒找到文件（找到了服務(wù)器））
500 （沒找到服務(wù)器）
關(guān)于瀏覽器渲染頁(yè)面的一些細(xì)節(jié)
JS加載阻塞的原因
JS加載阻塞主要是因?yàn)闉g覽器需要一個(gè)穩(wěn)定的DOM樹匆光，而JS本質(zhì)就是操作DOM元素套像，就很有可能改變DOM樹的機(jī)構(gòu)，為了防止出現(xiàn)修改DOM樹的情況后重鑄DOM樹的情況终息，先等JS下載并解析完之后 再渲染DOM樹
CSS與JS一般情況下的放置位置
一般來(lái)說(shuō)css放置在Head凉夯，JS放置在底部主要原因有：
上面提過(guò)到JS的加載阻塞
因?yàn)镠TML的下載和解析是從上到下的順序解析的，如果CSS不都放在HEAD里面采幌，有的放前面后的放后面就會(huì)造成 放在前面的CSS元素渲染一次之后劲够，后面如果出現(xiàn)重復(fù)（這里涉及到一個(gè)優(yōu)先級(jí)，假設(shè)優(yōu)先級(jí)一致）后面的CSS樣式也會(huì)重新覆蓋前面的樣式休傍，再講前元素再渲染一邊(包括已經(jīng)渲染過(guò)的) 就會(huì)造成重復(fù)渲染征绎。而全放在HEAD里面 CSS文件會(huì)先合并，只會(huì)形成CSSDOM磨取，進(jìn)行渲染人柿。從性能和用戶體驗(yàn)來(lái)看 一般CSS放置在HEAD，JS放置在底部
