從輸入一個網址到瀏覽器顯示頁面的全過程詳細分析

YXi發表於2019-07-12

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

  1. DNS解析
  2. TCP連線
  3. 傳送HTTP請求
  4. 伺服器處理請求並返回HTTP報文
  5. 瀏覽器解析渲染頁面
  6. 斷開連線

也可以分為如下幾個過程:

1.DNS解析,找到IP地址
2.根據IP地址,找到對應的伺服器
3.建立TCP連線(裡面有個 三次握手)
4.連線建立後,發出HTTP請求
5.伺服器根據請求作出HTTP響應
6.瀏覽器得到響應內容,進行解析與渲染,並顯示
7.斷開連線(四次揮手)

以上整個過程叫一次HTTP事務


具體過程:

DNS解析

圖片載入失敗!
DNS解析的過程就是尋找哪臺機器上有你所需要資源的過程。當你在瀏覽器中輸入一個地址時,例如www.baidu.com,其實不是百度網站真正意義上的地址。網際網路上每一臺計算機的唯一標識是它的IP地址,但是IP地址並不方便記憶。使用者更喜歡用方便記憶的網址去尋找網際網路上的其它計算機,也就是上面提到的百度的網址(域名)。所以網際網路設計者需要在使用者的方便性與可用性方面做一個權衡,這個權衡就是一個網址到IP地址的轉換,這個過程就是DNS解析。它實際上充當了一個翻譯的角色,實現了網址到IP地址的轉換。


解析過程
DNS解析是一個遞迴查詢的過程
首先在本地域名伺服器中查詢IP地址,如果沒有找到的情況下,本地域名伺服器會向根域名伺服器傳送一個請求,如果根域名伺服器也不存在該域名時,本地域名會向com頂級域名伺服器傳送一個請求,依次類推下去。直到最後本地域名伺服器得到IP地址並把它快取到本地,供下次查詢使用。


DNS優化
瞭解了DNS的過程,可以為我們帶來哪些?上文中請求到IP地址時,經歷了許多步驟,這個步驟中存在多個請求(同時存在UDP和TCP請求,為什麼有兩種請求方式,請自行查詢)。如果每次都經過這麼多步驟,是否太耗時間?如何減少該過程的步驟呢?那就是DNS快取。
DNS快取
DNS存在著多級快取,從離瀏覽器的距離排序的話,有以下幾種: 瀏覽器快取,系統快取,路由器快取,IPS伺服器快取,根域名伺服器快取,頂級域名伺服器快取,主域名伺服器快取

TCP連線

位於傳輸層的TCP協議為傳輸報文提供可靠的位元組流服務。它為了方便傳輸,將大塊的資料分割成以報文段為單位的資料包進行管理,併為它們編號,方便伺服器接收時能準確地還原報文資訊。TCP協議通過 “三次握手” (三次握手的具體內容請參考我的文章)等方法保證傳輸的安全可靠。

傳送HTTP請求

HTTP請求包括請求報頭和請求主體兩個部分,其中請求報頭包含了至關重要的資訊,包括請求的方法(GET / POST)、目標url、遵循的協議(http / https / ftp…),返回的資訊是否需要快取,以及客戶端是否傳送cookie等。

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

這部分對應的就是後端工程師眼中的HTTP。後端從在固定的埠接收到TCP報文開始,這一部分對應於程式語言中的socket。它會對TCP連線進行處理,對HTTP協議進行解析,並按照報文格式進一步封裝成HTTP Request物件,供上層使用,這一部分工作一般是由Web伺服器去進行。

HTTP響應報文是由三部分組成: 狀態碼, 響應報頭響應報文

瀏覽器解析渲染頁面

瀏覽器在收到HTML,CSS,JS檔案後,它是如何把頁面呈現到螢幕上的?下圖對應的就是WebKit渲染的過程。 瀏覽器是一個邊解析邊渲染的過程。首先瀏覽器解析HTML檔案構建DOM樹,然後解析CSS檔案構建渲染樹,等到渲染樹構建完成後,瀏覽器開始佈局渲染樹並將其繪製到螢幕上。

圖片載入失敗!
JS的解析是由瀏覽器中的JS解析引擎完成的。JS是單執行緒執行,也就是說,在同一個時間內只能做一件事,所有的任務都需要排隊,前一個任務結束,後一個任務才能開始。但是又存在某些任務比較耗時,如IO讀寫等,所以需要一種機制可以先執行排在後面的任務,這就是:同步任務(synchronous)和非同步任務(asynchronous)。JS的執行機制就可以看做是一個主執行緒加上一個任務佇列(task queue)。同步任務就是放在主執行緒上執行的任務,非同步任務是放在任務佇列中的任務。所有的同步任務在主執行緒上執行,形成一個執行棧;非同步任務有了執行結果就會在任務佇列中放置一個事件;指令碼執行時先依次執行執行棧,然後會從任務佇列裡提取事件,執行任務佇列中的任務,這個過程是不斷重複的,所以又叫做事件迴圈(Event loop)。


瀏覽器在解析過程中,如果遇到請求外部資源時,如影像,iconfont,JS等。瀏覽器將重複下載該資源。請求過程是非同步的,並不會影響HTML文件進行載入,但是當文件載入過程中遇到JS檔案,HTML文件會掛起渲染過程,不僅要等到文件中JS檔案載入完畢還要等待解析執行完畢,才會繼續HTML的渲染過程。原因是因為JS有可能修改DOM結構,這就意味著JS執行完成前,後續所有資源的下載是沒有必要的,這就是JS阻塞後續資源下載的根本原因。CSS檔案的載入不影響JS檔案的載入,但是卻影響JS檔案的執行。JS程式碼執行前瀏覽器必須保證CSS檔案已經下載並載入完畢。

斷開連線

四次揮手 (四次揮手的具體內容請參考我的文章)

以上內容因為涉及的內容比較多,所以還有好多不足之處需要補充,在此請多多見諒


^_<

相關文章