1.背景介紹
當(dāng)你在瀏覽器地址欄輸入一個(gè)URL后回車秆吵，將會(huì)發(fā)生的事情淮椰？這是一道經(jīng)典的面試題，同時(shí)也是一道復(fù)雜的題目纳寂，涉及到很多東西主穗，不同的軟件開(kāi)發(fā)者對(duì)于此道問(wèn)題有不同的答案，對(duì)于其中的某一點(diǎn)也能無(wú)限深究毙芜，今天我們就來(lái)側(cè)重于web前端來(lái)看一下究竟發(fā)生了什么忽媒。
2.知識(shí)剖析
基本流程
查詢ip地址
建立tcp連接，接入服務(wù)器
瀏覽器發(fā)起http請(qǐng)求
服務(wù)器后臺(tái)操作并做出響應(yīng)
瀏覽器渲染頁(yè)面
3.常見(jiàn)問(wèn)題
1）URL是什么
統(tǒng)一資源定位符是對(duì)可以從互聯(lián)網(wǎng)上得到的資源的位置和訪問(wèn)方法的一種簡(jiǎn)潔的表示腋粥，是互聯(lián)網(wǎng)上標(biāo)準(zhǔn)資源的地址晦雨〖懿埽互聯(lián)網(wǎng)上的每個(gè)文件都有一個(gè)唯一的URL，它包含的信息指出文件的位置以及瀏覽器應(yīng)該怎么處理它闹瞧。
4.解決方案
1）查詢IP地址
瀏覽器解析出url中的域名
查詢?yōu)g覽器的DNS緩存
瀏覽器中沒(méi)有DNS緩存绑雄，則查找本地客戶端hosts文件有無(wú)對(duì)應(yīng)的ip地址
hosts中無(wú)，則查找本地DNS服務(wù)器（運(yùn)營(yíng)商提供的DNS服務(wù)器）有無(wú)對(duì)應(yīng)的DNS緩存
若本地DNS沒(méi)有DNS緩存奥邮，則向根服務(wù)器查詢万牺，進(jìn)行遞歸查找
遞歸查找從頂級(jí)域名開(kāi)始（如.com）,一步步縮小范圍，最終客戶端取得ip地址
2）TCP連接與HTTP連接
http協(xié)議建立在tcp協(xié)議之上洽腺，http請(qǐng)求前脚粟，需先進(jìn)行tcp連接，形成客戶端到服務(wù)器的穩(wěn)定的通道蘸朋。俗稱TCP的三次握手
tcp連接完成后核无，http請(qǐng)求開(kāi)始，請(qǐng)求有多種方式度液，常見(jiàn)的有g(shù)et厕宗，post等
http請(qǐng)求包含請(qǐng)求頭画舌，也可能包含請(qǐng)求體兩部分堕担，請(qǐng)求頭中包含我們希望對(duì)請(qǐng)求文件的操作的信息，請(qǐng)求體中包含傳遞給后臺(tái)的參數(shù)曲聂。
服務(wù)器收到http請(qǐng)求后霹购，后臺(tái)開(kāi)始工作，如負(fù)載平衡朋腋，跨域等齐疙，這里就是后端的工作了。
文件處理完畢旭咽，生成響應(yīng)數(shù)據(jù)包贞奋，響應(yīng)也包含兩部分，響應(yīng)頭和相應(yīng)體穷绵，響應(yīng)體就是我們所請(qǐng)求的文件
經(jīng)過(guò)網(wǎng)絡(luò)傳輸轿塔，文件被下載到本地客戶端，客戶端開(kāi)始加載
3）HTML渲染
客戶端瀏覽器加載了html文件后仲墨，由上到下解析html為DOM樹(shù)（DOM Tree）
遇到css文件勾缭，css中的url發(fā)起http請(qǐng)求。
這是第二次http請(qǐng)求目养，由于http1.1協(xié)議增加了Connection: keep-alive聲明俩由，故tcp連接不會(huì)關(guān)閉，可以復(fù)用癌蚁。
http連接是無(wú)狀態(tài)連接幻梯，客戶端與服務(wù)器端需要重新發(fā)起請(qǐng)求--響應(yīng)
在請(qǐng)求css的過(guò)程中兜畸，解析器繼續(xù)解析html，然后到了script標(biāo)簽礼旅。
由于script可能會(huì)改變DOM結(jié)構(gòu)膳叨，故解析器停止生成DOM樹(shù)，解析器被js阻塞痘系，等待js文件發(fā)起http請(qǐng)求菲嘴，然后加載。這是第三次http請(qǐng)求汰翠。js執(zhí)行完成后解析器繼續(xù)解析龄坪。
由于css文件可能會(huì)影響js文件的執(zhí)行結(jié)果，因此需等css文件加載完成后再執(zhí)行复唤。
瀏覽器收到css文件后健田，開(kāi)始解析css文件為CSSOM樹(shù)（CSS Rule Tree）。
CSSOM樹(shù)生成后佛纫，DOM Tree與CSS Rule Tree結(jié)合生成渲染樹(shù)（Render Tree）妓局，
Render Tree會(huì)被css文件阻塞，渲染樹(shù)生成后呈宇，先布局,繪制渲染樹(shù)中節(jié)點(diǎn)的屬性(位置好爬，寬度，大小等),然后渲染甥啄，頁(yè)面就會(huì)呈現(xiàn)信息存炮。
繼續(xù)邊解析邊渲染，遇到了另一個(gè)js文件蜈漓，js文件執(zhí)行后改變了DOM樹(shù)穆桂，渲染樹(shù)從被改變的dom開(kāi)始再次渲染
繼續(xù)向下渲染，碰到一個(gè)img標(biāo)簽融虽，瀏覽器發(fā)起http請(qǐng)求享完，不會(huì)等待img加載完成，繼續(xù)向下渲染有额，之后再重新渲染此部分般又。
DOM樹(shù)遇到html結(jié)束標(biāo)簽，停止解析谆吴，進(jìn)而渲染結(jié)束
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
1)有那些網(wǎng)站優(yōu)化的方法倒源？
減少DNS查詢:將服務(wù)器域名的ip信息加入本地host文件
減少http請(qǐng)求數(shù)量，對(duì)于圖片使用雪碧圖,對(duì)于html文件和css文件句狼，js文件分別進(jìn)行合并操作笋熬。
減少下載時(shí)間：壓縮圖片，使用壓縮應(yīng)用壓縮文檔中的空格腻菇，刪除文件多余的語(yǔ)句和注釋胳螟，創(chuàng)造自己的js精簡(jiǎn)庫(kù)和精簡(jiǎn)框架,使用本地瀏覽器緩存昔馋。
提前渲染開(kāi)始時(shí)間：將css鏈接放在html頭部
減輕解析器的阻塞：將js鏈接放在body尾部
使用打包工具gulp webpack開(kāi)啟Gzip壓縮文件
提問(wèn)
1.TCP/IP協(xié)議 的3次握手
所謂三次握手（Three-Way Handshake）即建立TCP連接，就是指建立一個(gè)TCP連接時(shí)糖耸，需要客戶端和服務(wù)端總共發(fā)送3個(gè)包以確認(rèn)連接的建立秘遏。在socket編程中，這一過(guò)程由客戶端執(zhí)行connect來(lái)觸發(fā)嘉竟，整個(gè)流程如下圖所示：
（1）第一次握手：Client將標(biāo)志位SYN置為1邦危，隨機(jī)產(chǎn)生一個(gè)值seq=J，并將該數(shù)據(jù)包發(fā)送給Server舍扰，Client進(jìn)入SYN_SENT狀態(tài)倦蚪，等待Server確認(rèn)。
（2）第二次握手：Server收到數(shù)據(jù)包后由標(biāo)志位SYN=1知道Client請(qǐng)求建立連接边苹，Server將標(biāo)志位SYN和ACK都置為1陵且，ack=J+1，隨機(jī)產(chǎn)生一個(gè)值seq=K个束，并將該數(shù)據(jù)包發(fā)送給Client以確認(rèn)連接請(qǐng)求慕购，Server進(jìn)入SYN_RCVD狀態(tài)。
（3）第三次握手：Client收到確認(rèn)后茬底，檢查ack是否為J+1沪悲，ACK是否為1，如果正確則將標(biāo)志位ACK置為1桩警，ack=K+1可训，并將該數(shù)據(jù)包發(fā)送給Server昌妹，Server檢查ack是否為K+1捶枢，ACK是否為1，如果正確則連接建立成功飞崖，Client和Server進(jìn)入ESTABLISHED狀態(tài)烂叔，完成三次握手，隨后Client與Server之間可以開(kāi)始傳輸數(shù)據(jù)了固歪。
7.參考文獻(xiàn)
