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

總體來說可以分為以下幾個過程：

1.dns解析；

2.tcp連線；

3.傳送http請求；

4.伺服器處理請求並返回http報文；

5.瀏覽器解析渲染頁面；

6.連線結束；

具體過程分析：

dns解析

tcp連線

http協議是使用tcp作為傳輸層協議的，當tcp出現瓶頸時，http也會受到影響；使用三次握手建立連線。

tcp三次握手過程如下所示：

1.客戶端傳送syn（seq=x）報文給伺服器端，進入syn_send狀態；

2.伺服器端接受到syn報文，回應乙個syn（seq=y）ack（ack=x+1）報文，進入syn-recv狀態。

3.客戶端收到伺服器端的syn報文，回應乙個ack（ack=y+1)報文；

三次握手完成，tcp客戶端和伺服器端成功建立連線。

http請求

主要發生在客戶端，傳送http請求的過程就是構建http請求報文並通過tcp協議中傳送到伺服器指定埠，http請求報文由三部分組成：請求行、請求報頭和請求正文。

伺服器處理請求並返回http報文

後端從在固定的埠接受到tcp報文開始，這一部分對應於程式語言中的socket。它會對tcp連線進行處理，對http協議進行解析，並按照報文格式進一步封裝成http request物件，供上層使用，http響應報文也有三個部分組成：狀態碼、響應報頭、響應報文。

狀態碼：

狀態碼由三位數字組成，第乙個數字定義了響應的類別，具有五種可能取值：

1xx：指示資訊--表示請求已接受，繼續處理；

2xx：成功--表示請求已被成功接收、理解接受；

3xx：重定向--要完成請求必須要進行進一步操作；

4xx：客戶端錯誤--請求有語法錯誤或請求無法實現；

5xx：伺服器端錯誤--伺服器端未能實現合法的請求。

瀏覽器解析渲染頁面

瀏覽器在收到html\css\js檔案後，首先瀏覽器解析html檔案構建dom樹，然後解析css檔案構建渲染樹，等到渲染樹構建完成後，瀏覽器開始布局渲染樹並將其繪製在螢幕上。這個過程設計到reflow（回流）和repain（重繪）;

回流：dom節點中的各個元素都是以盒模型的形式存在，這些都需要瀏覽器計算其位置和大小等，這個過程稱為回流；

重繪：當盒模型的位置、大小以及其它屬性，如顏色、字型、等確定下來後，瀏覽器便開始繪製內容，這個過程稱為重繪；

頁面在首次載入時必然會經歷回流和重繪。

js解析是由瀏覽器中js解析引擎完成的，js是單執行緒執行，也就是說乙個時間只能做一件事，所有的任務需要排隊；js的執行機制可以看成是乙個主線程加上乙個任務佇列。同步任務就是放在主線程上的任務，非同步任務就是放在佇列中的任務。