這是一道經(jīng)典的面試題逼争，這道面試題不光前端面試會問到优床，后端面試也會被問到。這道題沒有一個標(biāo)準(zhǔn)的答案氮凝，它涉及很多的知識點羔巢，面試官會通過這道題了解你對哪一方面的知識比較擅長，然后繼續(xù)追問看看你的掌握程度罩阵。當(dāng)然我寫的這些也只是我的一些簡單的理解竿秆，從前端的角度出發(fā)，我覺得首先回答必須包括幾個基本的點稿壁，然后在根據(jù)你的理解深入回答幽钢。
1、瀏覽器的地址欄輸入URL并按下回車傅是。
2匪燕、瀏覽器查找當(dāng)前URL是否存在緩存，并比較緩存是否過期喧笔。
3帽驯、DNS解析URL對應(yīng)的IP。
4书闸、根據(jù)IP建立TCP連接（三次握手）尼变。
5、HTTP發(fā)起請求浆劲。
6嫌术、服務(wù)器處理請求，瀏覽器接收HTTP響應(yīng)牌借。
7度气、渲染頁面，構(gòu)建DOM樹膨报。
8磷籍、關(guān)閉TCP連接（四次揮手）。
說完整個過程的幾個關(guān)鍵點后我們再來展開的說一下现柠。
一院领、URL
我們常見的RUL是這樣的:http://www.baidu.com, 這個域名由三部分組成：協(xié)議名、域名晒旅、端口號栅盲，這里端口是默認(rèn)所以隱藏。除此之外URL還會包含一些路徑废恋、查詢和其他片段谈秫，例如：http://www.tuicool.com/search?kw=%E4%。 我們最常見的的協(xié)議是HTTP協(xié)議鱼鼓，除此之外還有加密的HTTPS協(xié)議拟烫、FTP協(xié)議、FILe協(xié)議等等迄本。URL的中間部分為域名或者是IP硕淑，之后就是端口號了。通常端口號不常見是因為大部分的都是使用默認(rèn)端口，如HTTP默認(rèn)端口80置媳，HTTPS默認(rèn)端口443于樟。說到這里可能有的面試官會問你同源策略，以及更深層次的跨域的問題拇囊，我今天就不在這里展開了迂曲。
二、緩存
說完URL我們說說瀏覽器緩存,HTTP緩存有多種規(guī)則寥袭，根據(jù)是否需要重新向服務(wù)器發(fā)起請求來分類路捧，我將其分為強制緩存，對比緩存传黄。
強制緩存判斷HTTP首部字段：cache-control杰扫，Expires。
Expires是一個絕對時間膘掰，即服務(wù)器時間笔链。瀏覽器檢查當(dāng)前時間岳枷，如果還沒到失效時間就直接使用緩存文件窃页。但是該方法存在一個問題：服務(wù)器時間與客戶端時間可能不一致徙鱼。因此該字段已經(jīng)很少使用。
cache-control中的max-age保存一個相對時間惭聂。例如Cache-Control: max-age = 484200窗声，表示瀏覽器收到文件后，緩存在484200s內(nèi)均有效辜纲。 如果同時存在cache-control和Expires笨觅，瀏覽器總是優(yōu)先使用cache-control。
對比緩存通過HTTP的last-modified耕腾，Etag字段進行判斷见剩。
last-modified是第一次請求資源時，服務(wù)器返回的字段扫俺，表示最后一次更新的時間苍苞。下一次瀏覽器請求資源時就發(fā)送if-modified-since字段。服務(wù)器用本地Last-modified時間與if-modified-since時間比較狼纬，如果不一致則認(rèn)為緩存已過期并返回新資源給瀏覽器羹呵；如果時間一致則發(fā)送304狀態(tài)碼，讓瀏覽器繼續(xù)使用緩存疗琉。
Etag：資源的實體標(biāo)識（哈希字符串）冈欢，當(dāng)資源內(nèi)容更新時，Etag會改變盈简。服務(wù)器會判斷Etag是否發(fā)生變化凑耻，如果變化則返回新資源太示，否則返回304。
三香浩、DNS域名解析
我們知道在地址欄輸入的域名并不是最后資源所在的真實位置类缤，域名只是與IP地址的一個映射。網(wǎng)絡(luò)服務(wù)器的IP地址那么多弃衍，我們不可能去記一串串的數(shù)字呀非，因此域名就產(chǎn)生了坚俗，域名解析的過程實際是將域名還原為IP地址的過程镜盯。
首先瀏覽器先檢查本地hosts文件是否有這個網(wǎng)址映射關(guān)系，如果有就調(diào)用這個IP地址映射猖败，完成域名解析速缆。
如果沒找到則會查找本地DNS解析器緩存，如果查找到則返回恩闻。
如果還是沒有找到則會查找本地DNS服務(wù)器艺糜，如果查找到則返回。
最后迭代查詢幢尚，按根域服務(wù)器 ->頂級域,.cn->第二層域破停，hb.cn ->子域，www.hb.cn的順序找到IP地址尉剩。
遞歸查詢真慢，按上一級DNS服務(wù)器->上上級->....逐級向上查詢找到IP地址。
四理茎、TCP連接
在通過第一步的DNS域名解析后黑界，獲取到了服務(wù)器的IP地址，在獲取到IP地址后皂林，便會開始建立一次連接朗鸠，這是由TCP協(xié)議完成的，主要通過三次握手進行連接础倍。
第一次握手： 建立連接時烛占，客戶端發(fā)送syn包（syn=j）到服務(wù)器，并進入SYN_SENT狀態(tài)沟启，等待服務(wù)器確認(rèn)忆家；
第二次握手： 服務(wù)器收到syn包，必須確認(rèn)客戶的SYN（ack=j+1）美浦，同時自己也發(fā)送一個SYN包（syn=k）弦赖，即SYN+ACK包，此時服務(wù)器進入SYN_RECV狀態(tài)浦辨；
第三次握手： 客戶端收到服務(wù)器的SYN+ACK包蹬竖，向服務(wù)器發(fā)送確認(rèn)包ACK(ack=k+1）沼沈，此包發(fā)送完畢，客戶端和服務(wù)器進入ESTABLISHED（TCP連接成功）狀態(tài)币厕，完成三次握手列另。
完成三次握手，客戶端與服務(wù)器開始傳送數(shù)據(jù)旦装。
五页衙、瀏覽器向服務(wù)器發(fā)送HTTP請求
完整的HTTP請求包含請求起始行、請求頭部阴绢、請求主體三部分店乐。
六、瀏覽器接收響應(yīng)
服務(wù)器在收到瀏覽器發(fā)送的HTTP請求之后呻袭，會將收到的HTTP報文封裝成HTTP的Request對象眨八，并通過不同的Web服務(wù)器進行處理，處理完的結(jié)果以HTTP的Response對象返回左电，主要包括狀態(tài)碼廉侧，響應(yīng)頭，響應(yīng)報文三個部分篓足。
狀態(tài)碼主要包括以下部分
1xx：指示信息–表示請求已接收段誊，繼續(xù)處理。
2xx：成功–表示請求已被成功接收栈拖、理解连舍、接受。
3xx：重定向–要完成請求必須進行更進一步的操作辱魁。
4xx：客戶端錯誤–請求有語法錯誤或請求無法實現(xiàn)烟瞧。
5xx：服務(wù)器端錯誤–服務(wù)器未能實現(xiàn)合法的請求。
響應(yīng)頭主要由Cache-Control染簇、 Connection参滴、Date、Pragma等組成锻弓。
響應(yīng)體為服務(wù)器返回給瀏覽器的信息砾赔，主要由HTML，css青灼，js暴心，圖片文件組成。
七杂拨、頁面渲染
如果說響應(yīng)的內(nèi)容是HTML文檔的話专普，就需要瀏覽器進行解析渲染呈現(xiàn)給用戶。整個過程涉及兩個方面：解析和渲染弹沽。在渲染頁面之前檀夹，需要構(gòu)建DOM樹和CSSOM樹筋粗。
在瀏覽器還沒接收到完整的 HTML 文件時，它就開始渲染頁面了炸渡，在遇到外部鏈入的腳本標(biāo)簽或樣式標(biāo)簽或圖片時娜亿，會再次發(fā)送 HTTP 請求重復(fù)上述的步驟。在收到 CSS 文件后會對已經(jīng)渲染的頁面重新渲染蚌堵，加入它們應(yīng)有的樣式买决，圖片文件加載完立刻顯示在相應(yīng)位置。在這一過程中可能會觸發(fā)頁面的重繪或重排吼畏。這里就涉及了兩個重要概念：Reflow和Repaint督赤。
Reflow，也稱作Layout宫仗，中文叫回流够挂，一般意味著元素的內(nèi)容、結(jié)構(gòu)藕夫、位置或尺寸發(fā)生了變化，需要重新計算樣式和渲染樹枯冈，這個過程稱為Reflow毅贮。
Repaint，中文重繪尘奏，意味著元素發(fā)生的改變只是影響了元素的一些外觀之類的時候（例如滩褥，背景色，邊框顏色炫加，文字顏色等）瑰煎，此時只需要應(yīng)用新樣式繪制這個元素就OK了，這個過程稱為Repaint俗孝。
所以說Reflow的成本比Repaint的成本高得多的多酒甸。DOM樹里的每個結(jié)點都會有reflow方法，一個結(jié)點的reflow很有可能導(dǎo)致子結(jié)點赋铝，甚至父點以及同級結(jié)點的reflow插勤。
下面這些動作有很大可能會是成本比較高的：
1、增加革骨、刪除农尖、修改DOM結(jié)點時，會導(dǎo)致Reflow或Repaint良哲。
2盛卡、移動DOM的位置，或是搞個動畫的時候筑凫。
3滑沧、內(nèi)容發(fā)生變化喇颁。
4、修改CSS樣式的時候嚎货。
5橘霎、Resize窗口的時候（移動端沒有這個問題），或是滾動的時候殖属。
6姐叁、修改網(wǎng)頁的默認(rèn)字體時。
基本上來說洗显，reflow有如下的幾個原因：
1外潜、Initial，網(wǎng)頁初始化的時候挠唆。
2处窥、Incremental，一些js在操作DOM樹時玄组。
3滔驾、Resize，其些元件的尺寸變了俄讹。
4哆致、StyleChange，如果CSS的屬性發(fā)生變化了患膛。
八摊阀、關(guān)閉TCP連接或繼續(xù)保持連接
通過四次揮手關(guān)閉連接(FIN ACK, ACK, FIN ACK, ACK)。
第一次揮手是瀏覽器發(fā)完數(shù)據(jù)后踪蹬，發(fā)送FIN請求斷開連接胞此。
第二次揮手是服務(wù)器發(fā)送ACK表示同意，如果在這一次服務(wù)器也發(fā)送FIN請求斷開連接似乎也沒有不妥跃捣，但考慮到服務(wù)器可能還有數(shù)據(jù)要發(fā)送漱牵，所以服務(wù)器發(fā)送FIN應(yīng)該放在第三次揮手中。
這樣瀏覽器需要返回ACK表示同意枝缔，也就是第四次揮手布疙。
至此從瀏覽器地址欄輸入URL到頁面呈現(xiàn)到你面前的整個過程就分析完了，上面內(nèi)容如有錯誤歡迎留言交流愿卸。
