輸入一個URL後的詳細過程

目錄

1.DNS解析

2. TCP連接

3.瀏覽器發送HTTP請求

4.服務器處理請求

5、釋放連接 TCP 連接

6、客戶端瀏覽器解析 HTML 內容

6.瀏覽器解析渲染頁面

8.DNS的遞歸查詢和迭代查詢

 一、主機向本地域名服務器的查詢一般都是採用遞歸查詢。

二、本地域名服務器向根域名服務器的查詢的迭代查詢。


1.DNS解析

輸入一個網址並按回車之後瀏覽器會根據輸入的URL查找對應的IP,具體過程如下:
(1)查找瀏覽器緩存,瀏覽器會保存一段時間內訪問過的一些網址的DNS信息。
(2)如果沒有找到對應的IP,瀏覽器就調用操作系統緩存來繼續查找這個網址的DNS信息。
(3)如果還是沒找到對應的IP,就發送一個請求到路由器上,路由器在路由器緩存上查找記錄的DNS信息。
(4)如果還是沒有找到對應的IP,這個請求就會被髮送到本地DNS服務器,本地DNS上緩存了一張域名與之IP地址對應的表格,有就直接返回域名對應的IP地址
(5)如果還是沒有找到對應的IP, ISP的DNS服務器(本地DNS服務器)會將請求發向根域名服務器,然後到頂級域名DNS再到權威DNS,權威DNS是域名解析結果的原出處,它查詢到對應的IP地址後告訴本地DNS。
(6)如果到了這裏還是找不到域名的對應信息,那就域名錯誤了。找到的話,本地DNS服務器就能收到一個域名和IP地址對應關係,本地DNS服務器不僅要把IP地址返回給用戶電腦,還要把這個對應關係保存在緩存中,以備下次別的用戶查詢時,可以直接返回結果,加快網絡訪問。

         DNS根據域名查詢IP地址的過程爲:瀏覽器緩存 --> 操作系統緩存 --> 路由器緩存–>本地DNS緩存 --> 根DNS–>頂級DNS–>權威DNS。DNS

2. TCP連接

瀏覽器得到IP後,向服務器發送TCP連接。TCP三次握手目前HTTP協議大多都是1.1,在1.1的協議裏,默認開啓了keep-alive,這樣建立的TCP連接,可以在多次請求中複用,不需要重新連接。

拿到域名對應的IP地址之後,瀏覽器會以一個隨機端口(1024<端口<65535)向服務器的WEB程序(常用的有httpd,nginx等)80端口發起TCP的連接請求這個連接請求到達服務器端後(這中間通過各種路由設備,局域網內除外),進入到網卡,然後是進入到內核的TCP/IP協議棧(用於識別該連接請求,解封包,一層一層的剝開),還有可能要經過Netfilter防火牆(屬於內核的模塊)的過濾,最終到達WEB程序,最終建立了TCP/IP的連接。

3.瀏覽器發送HTTP請求

瀏覽器和服務器建立連接以後,瀏覽器就給這個IP地址的服務器發送一個http請求,就是去服務器獲取一些資源,對於訪問頁面來說,要獲取的頁資源往往是一個頁面。

其本質是在建立起的TCP連接中,按照HTTP協議標準發送一個索要網頁的請求。通過 TCP 套接字,客戶端向 Web 服務器發送一個文本的請求報文,一個請求報文由請求行、請求頭部、空行和請求數據 4 部分組成。

發送完請求接下來就是等待迴應了。

4.服務器處理請求

服務器收到瀏覽器的請求以後,會解析這個請求(讀請求頭),然後生成一個響應頭和具體響應內容。接着服務器會傳回來一個響應頭和一個響應,響應頭告訴了瀏覽器一些必要的信息,例如重要的Status Code,2開頭如200表示一切正常,3開頭表示重定向,4開頭是客戶端錯誤,如404表示請求的資源不存在,5開頭表示服務器端錯誤。響應就是瀏覽器請求的頁面內容。

Web 服務器解析請求,定位請求資源。服務器將資源複本寫到 TCP 套接字,由客戶端 讀取。一個響應由狀態行、響應頭部、空行和響應數據 4 部分組成。

5、釋放連接 TCP 連接

若 connection 模式爲 close,則服務器主動關閉 TCP 連接,客戶端被動關閉連接, 釋放 TCP 連接;connection 模式爲 keepalive,則該連接會保持一段時間,在該時間內 可以繼續接收請求;

6、客戶端瀏覽器解析 HTML 內容

客戶端瀏覽器首先解析狀態行,查看錶明請求是否成功的狀態代碼。然後解析每一個響 應頭,響應頭告知以下爲若干字節的 HTML 文檔和文檔的字符集。客戶端瀏覽器讀取響應數據 HTML,根據 HTML 的語法對其進行格式化,並在瀏覽器窗口中顯示。

 

6.瀏覽器解析渲染頁面

在瀏覽器沒有完整接受全部HTML文檔時,它就已經開始顯示這個頁面了,瀏覽器是如何把頁面呈現在屏幕上的呢?不同瀏覽器可能解析的過程不太一樣,這裏我們只介紹webkit的渲染過程,下圖對應的就是WebKit渲染的過程,這個過程包括:

解析html以構建dom樹 -> 構建render樹 -> 佈局render樹 -> 繪製render樹。

瀏覽器在解析html文件時,會」自上而下「加載,並在加載過程中進行解析渲染。在解析過程中,如果遇到請求外部資源時,如圖片、外鏈的CSS、iconfont等,請求過程是異步的,並不會影響html文檔進行加載。

  解析過程中,瀏覽器首先會解析HTML文件構建DOM樹,然後解析CSS文件構建渲染樹,等到渲染樹構建完成後,瀏覽器開始佈局渲染樹並將其繪製到屏幕上。這個過程比較複雜,涉及到兩個概念: reflow(迴流)和repain(重繪)。

  DOM節點中的各個元素都是以盒模型的形式存在,這些都需要瀏覽器去計算其位置和大小等,這個過程稱爲relow;當盒模型的位置,大小以及其他屬性,如顏色,字體,等確定下來之後,瀏覽器便開始繪製內容,這個過程稱爲repain。

  頁面在首次加載時必然會經歷reflow和repain。reflow和repain過程是非常消耗性能的,尤其是在移動設備上,它會破壞用戶體驗,有時會造成頁面卡頓。所以我們應該儘可能少的減少reflow和repain。

 當文檔加載過程中遇到js文件,html文檔會掛起渲染(加載解析渲染同步)的線程,不僅要等待文檔中js文件加載完畢,還要等待解析執行完畢,纔可以恢復html文檔的渲染線程。因爲JS有可能會修改DOM,最爲經典的document.write,這意味着,在JS執行完成前,後續所有資源的下載可能是沒有必要的,這是js阻塞後續資源下載的根本原因。所以我明平時的代碼中,js是放在html文檔末尾的。

  JS的解析是由瀏覽器中的JS解析引擎完成的,比如谷歌的是V8。JS是單線程運行,也就是說,在同一個時間內只能做一件事,所有的任務都需要排隊,前一個任務結束,後一個任務才能開始。但是又存在某些任務比較耗時,如IO讀寫等,所以需要一種機制可以先執行排在後面的任務,這就是:同步任務(synchronous)和異步任務(asynchronous)。

  JS的執行機制就可以看做是一個主線程加上一個任務隊列(task queue)。同步任務就是放在主線程上執行的任務,異步任務是放在任務隊列中的任務。所有的同步任務在主線程上執行,形成一個執行棧;異步任務有了運行結果就會在任務隊列中放置一個事件;腳本運行時先依次運行執行棧,然後會從任務隊列裏提取事件,運行任務隊列中的任務,這個過程是不斷重複的,所以又叫做事件循環(Event loop)。具體的過程可以看我這篇文章:點擊這裏

7.什麼是DNS?

  DNS(Domain Name System,域名系統),因特網上作爲域名和IP地址相互映射的一個分佈式數據庫,能夠使用戶更方便的訪問互聯網,而不用去記住能夠被機器直接讀取的IP數串。通過主機名,最終得到該主機名對應的IP地址的過程叫做域名解析(或主機名解析)。

  通俗的講,我們更習慣於記住一個網站的名字,比如www.baidu.com,而不是記住它的ip地址,比如:167.23.10.2。而計算機更擅長記住網站的ip地址,而不是像www.baidu.com等鏈接。因爲,DNS就相當於一個電話本,比如你要找www.baidu.com這個域名,那我翻一翻我的電話本,我就知道,哦,它的電話(ip)是167.23.10.2。

8.DNS的遞歸查詢和迭代查詢

 一、主機向本地域名服務器的查詢一般都是採用遞歸查詢。

        所謂遞歸查詢就是:如果主機所詢問的本地域名服務器不知道被查詢的域名的IP地址,那麼本地域名服務器就以DNS客戶的身份,

        向其它根域名服務器繼續發出查詢請求報文(即替主機繼續查詢),而不是讓主機自己進行下一步查詢。

        因此,遞歸查詢返回的查詢結果或者是所要查詢的IP地址,或者是報錯,表示無法查詢到所需的IP地址。

二、本地域名服務器向根域名服務器的查詢的迭代查詢。

       迭代查詢的特點:當根域名服務器收到本地域名服務器發出的迭代查詢請求報文時,要麼給出所要查詢的IP地址,要麼告訴本地服務器:「你下一步應當向哪一個域名服務器進行查詢」。

        然後讓本地服務器進行後續的查詢。根域名服務器通常是把自己知道的頂級域名服務器的IP地址告訴本地域名服務器,讓本地域名服務器再向頂級域名服務器查詢。

        頂級域名服務器在收到本地域名服務器的查詢請求後,要麼給出所要查詢的IP地址,要麼告訴本地服務器下一步應當向哪一個權限域名服務器進行查詢。

        最後,知道了所要解析的IP地址或報錯,然後把這個結果返回給發起查詢的主機