著名前端面試題：
一個頁面從輸入 URL 到頁面加載顯示完成，這個過程中都發(fā)生了什么？
主要包括以下幾個基本步驟：
- 瀏覽器的地址欄輸入URL并按下回車好乐。
- 瀏覽器查找當(dāng)前URL是否存在緩存，并比較緩存是否過期。
- DNS解析URL對應(yīng)的IP掺炭。
- 根據(jù)IP建立TCP連接（三次握手）。
- HTTP發(fā)起請求凭戴。
- 服務(wù)器處理請求涧狮，瀏覽器接收HTTP響應(yīng)。
- 渲染頁面，構(gòu)建DOM樹者冤。
- 關(guān)閉TCP連接（四次揮手）肤视。
接下來對其中幾個步驟展開說一下
1. URL
輸入URL后，會進(jìn)行解析（URL的本質(zhì)就是統(tǒng)一資源定位符）
URL一般包括幾大部分：
- protocol涉枫，協(xié)議頭邢滑，譬如有http，加密的https愿汰，ftp等
- host困后，主機域名或IP地址
- port，端口號（通常端口號不常見是因為大部分的都是使用默認(rèn)的端口所以隱藏衬廷，如HTTP默認(rèn)端口80操灿，HTTPS默認(rèn)端口443。）
- path泵督，目錄路徑
- query趾盐，即查詢參數(shù)
- fragment，即#后的hash值小腊，一般用來定位到某個位置
其他面試官可能問的知識點：同源策略救鲤，跨域的問題（待補充）
2.緩存
根據(jù)下圖的邏輯，判斷是直接使用緩存內(nèi)容還是重新向服務(wù)器請求資源
3.DNS域名解析
我們知道在地址欄輸入的域名并不是最后資源所在的真實位置秩冈，域名只是與IP地址的一個映射本缠。網(wǎng)絡(luò)服務(wù)器的IP地址那么多，我們不可能去記一串串的數(shù)字入问，因此域名就產(chǎn)生了丹锹，域名解析的過程實際是將域名還原為IP地址的過程。
首先瀏覽器先檢查本地hosts文件是否有這個網(wǎng)址映射關(guān)系芬失，如果有就調(diào)用這個IP地址映射楣黍，完成域名解析。
如果沒找到則會查找本地DNS解析器緩存棱烂，如果查找到則返回租漂。
如果還是沒有找到則會查找本地DNS服務(wù)器，如果查找到則返回颊糜。
最后迭代查詢哩治，按根域服務(wù)器 ->頂級域,.com->第二層域，baidu.com ->子域衬鱼，www.baidu.com的順序找到IP地址业筏。
4.TCP連接
在通過第一步的DNS域名解析后，獲取到了服務(wù)器的IP地址鸟赫，在獲取到IP地址后蒜胖，便會開始建立一次連接消别，這是由TCP協(xié)議完成的，主要通過三次握手進(jìn)行連接翠勉。
- 第一次握手： 建立連接時妖啥，客戶端發(fā)送syn包（seq=x）到服務(wù)器霉颠，并進(jìn)入SYN_SENT狀態(tài)对碌，等待服務(wù)器確認(rèn)；
- 第二次握手： 服務(wù)器收到syn包蒿偎，必須確認(rèn)客戶的SYN（ack=x+1）朽们，同時自己也發(fā)送一個SYN包（seq=y），即SYN+ACK包诉位，此時服務(wù)器進(jìn)入SYN_RECV狀態(tài)骑脱；
- 第三次握手： 客戶端收到服務(wù)器的SYN+ACK包，向服務(wù)器發(fā)送確認(rèn)包ACK(ack=y+1）苍糠，此包發(fā)送完畢叁丧，客戶端和服務(wù)器進(jìn)入ESTABLISHED（TCP連接成功）狀態(tài)，完成三次握手岳瞭。
完成三次握手拥娄，客戶端與服務(wù)器開始傳送數(shù)據(jù)。
5. 瀏覽器向服務(wù)器發(fā)送HTTP請求
完整的HTTP請求包含請求起始行瞳筏、請求頭部稚瘾、請求主體三部分。
常用的請求頭部（部分）
Accept: 接收類型姚炕，表示瀏覽器支持的MIME類型
（對標(biāo)服務(wù)端返回的Content-Type）
Accept-Encoding：瀏覽器支持的壓縮類型,如gzip等,超出類型不能接收
Content-Type：客戶端發(fā)送出去實體內(nèi)容的類型
Cache-Control: 指定請求和響應(yīng)遵循的緩存機制摊欠，如no-cache
If-Modified-Since：對應(yīng)服務(wù)端的Last-Modified，用來匹配看文件是否變動柱宦，只能精確到1s之內(nèi)，http1.0中
Expires：緩存控制掸刊，在這個時間內(nèi)不會請求摊沉，直接使用緩存，http1.0痒给，而且是服務(wù)端時間
Max-age：代表資源在本地緩存多少秒说墨，有效時間內(nèi)不會請求，而是使用緩存苍柏，http1.1中
If-None-Match：對應(yīng)服務(wù)端的ETag尼斧，用來匹配文件內(nèi)容是否改變（非常精確），http1.1中
Cookie: 有cookie并且同域訪問時會自動帶上
Connection: 當(dāng)瀏覽器與服務(wù)器通信時對于長連接如何進(jìn)行處理,如keep-alive
Host：請求的服務(wù)器URL
Origin：最初的請求是從哪里發(fā)起的（只會精確到端口）,Origin比Referer更尊重隱私
Referer：該頁面的來源URL(適用于所有類型的請求试吁，會精確到詳細(xì)頁面地址棺棵，csrf攔截常用到這個字段)
User-Agent：用戶客戶端的一些必要信息楼咳，如UA頭部等
6. 瀏覽器接收服務(wù)器的響
服務(wù)器在收到瀏覽器發(fā)送的HTTP請求之后，會將收到的HTTP報文封裝成HTTP的Request對象烛恤，并通過不同的Web服務(wù)器進(jìn)行處理母怜，處理完的結(jié)果以HTTP的Response對象返回，主要包括狀態(tài)碼缚柏，響應(yīng)頭苹熏，響應(yīng)報文三個部分。
狀態(tài)碼主要包括以下部分
- 1xx：指示信息–表示請求已接收币喧，繼續(xù)處理轨域。
- 2xx：成功–表示請求已被成功接收、理解杀餐、接受干发。
- 3xx：重定向–要完成請求必須進(jìn)行更進(jìn)一步的操作。
- 4xx：客戶端錯誤–請求有語法錯誤或請求無法實現(xiàn)史翘。
- 5xx：服務(wù)器端錯誤–服務(wù)器未能實現(xiàn)合法的請求枉长。
響應(yīng)頭主要由Cache-Control、 Connection琼讽、Date必峰、Pragma等組成。
響應(yīng)體為服務(wù)器返回給瀏覽器的信息跨琳，主要由HTML自点，css，js脉让，圖片文件組成桂敛。
常用的響應(yīng)頭部（部分）：
Access-Control-Allow-Headers: 服務(wù)器端允許的請求Headers
Access-Control-Allow-Methods: 服務(wù)器端允許的請求方法
Access-Control-Allow-Origin: 服務(wù)器端允許的請求Origin頭部（譬如為*）
Content-Type：服務(wù)端返回的實體內(nèi)容的類型
Date：數(shù)據(jù)從服務(wù)器發(fā)送的時間
Cache-Control：告訴瀏覽器或其他客戶，什么環(huán)境可以安全的緩存文檔
Last-Modified：請求資源的最后修改時間
Expires：應(yīng)該在什么時候認(rèn)為文檔已經(jīng)過期,從而不再緩存它
Max-age：客戶端的本地資源應(yīng)該緩存多少秒溅潜，開啟了Cache-Control后有效
ETag：請求變量的實體標(biāo)簽的當(dāng)前值
Set-Cookie：設(shè)置和頁面關(guān)聯(lián)的cookie术唬，服務(wù)器通過這個頭部把cookie傳給客戶端
Keep-Alive：如果客戶端有keep-alive，服務(wù)端也會有響應(yīng)（如timeout=38）
Server：服務(wù)器的一些相關(guān)信息
如下圖是對某請求的http報文結(jié)構(gòu)的簡要分析
7. 頁面渲染
前面有提到http交互滚澜，那么接下來就是瀏覽器獲取到html粗仓，然后解析，渲染
- 解析HTML设捐，構(gòu)建DOM樹
- 解析CSS借浊，生成CSS規(guī)則樹
- 合并DOM樹和CSS規(guī)則，生成render樹
- 布局render樹（Layout/reflow）萝招，負(fù)責(zé)各元素尺寸蚂斤、位置的計算
- 繪制render樹（paint），繪制頁面像素信息
-
瀏覽器會將各層的信息發(fā)送給GPU槐沼，GPU會將各層合成（composite）曙蒸，顯示在屏幕上
如下圖：
頁面渲染.png
DOM樹.png
CSSOM樹.png
- 在瀏覽器還沒接收到完整的 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日熬。
8. 關(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表示同意，也就是第四次揮手东跪。
