從輸入URL到頁面加載發生了什麼

大致過程

1. 瀏覽器的地址欄輸入URL並按下回車
2. 瀏覽器檢查當前URL是否存在緩存，並比較緩存是否過時
3. DNS解析URL對應的IP
4. 根據IP創建TCP鏈接（三次握手）
5. HTTP發起請求
6. 服務器處理請求，瀏覽器接收HTTP響應
7. 渲染頁面，構建DOM樹
8. 關閉TCP鏈接（4次揮手）
   

具體過程的理解

瀏覽器緩存

大致上來講，能夠分爲強緩存和協商緩存

• 強緩存
  • 強緩存主要經過http響應頭中的==Cache-Control==和==Expires==兩個字段來控制的

  Expires: Wed, 21 Oct 2015 07:28:00 GMT

  • Expires是HTTP/1.0標準下的字段，上例表示該資源會在Wed, 21 Oct 2015 07:28:00 GMT以後過時，在這個時間點以前都是直接讀取緩存不會發起請求的。這種方式有一個很大的問題就是服務器時間和本地時間可能不一致或者說是修改了本地時間也會形成緩存失敗。

  Cache-control: max-age=30

  • Cache-Control出現於HTTP/1.1，優先級高於Expires，上面這個表示該資源會在30秒以後過時，還有其餘值可選，詳情查看文檔
• 協商緩存
  • 若是緩存過時了，咱們就要用協商緩存來解決問題，也就是說協商緩存是須要請求的，若是緩存有效會返回304。協商緩存經過HTTP的Last-modified,Etag字段進行判斷
  • ==Last-Modified==是一個響應頭字段，包含的是服務器認定的資源作出修改的日期及時間。下次請求時==If-Modified-Since==這個請求頭字段會將Last-Modified發送給服務器，問服務器在該日期以後資源是否有更新，沒有更新的話返回一個不帶消息主體的304響應，有更新的話會返回新資源，而且響應頭中會的Last-Modified會帶有最新文件修改時間。
  • ==ETag==是一個響應頭字段，相似於文件指紋，==If-None-Match==會將當前的ETag發送給服務器，服務器驗證目前文件的ETag跟請求的ETag是否一致，若是一致，就返回不帶任何內容的304未修改狀態，若是不一致就返回最新資源。

DNS解析

DNS解析實際上就是將咱們熟悉的域名解析成IP地址，也就是說當你在瀏覽器地址欄輸入www.baidu.com時實際上訪問的是這個域名對應的惟一IP地址，之因此當初要這樣設計，是由於IP地址是由純數字組成的，不便於記憶，而經過幾級域名這種方式是便於咱們人類記憶的。

DNS解析是一個遞歸查詢的過程，從右到左解析的，有一個專門的DNS解析服務器，聽說要經歷8個步驟，具體過程咱們瞭解很少，就不過多解釋了。

創建TCP鏈接的三次握手

這一塊InterviewMap講的比較詳細了

瀏覽器渲染頁面的過程

1. 處理HTML並構建DOM樹
2. 處理CSS構建CSSOM樹
3. 將DOM樹和CSSOM樹合併成一個渲染樹
4. 根據渲染樹來佈局，計算每一個節點的位置（迴流）
5. 調用GPU繪製，合成圖層，顯示在屏幕上（重繪）
   

總結

既然大致知道了瀏覽器從輸入URL到頁面加載的過程，那就能夠針對這個過程一些可優化的點作優化，這也成了前端性能優化的一個重要部分，關於這部分，我會另寫一篇文章來總結。

參考文章

• 騰訊前端面試篇（二）
• InterviewMap
• 前端緩存最佳實踐
• 趣講CDN