大齡電力汪前端學習路 （從輸入URL到頁面呈現）

雖然在日常生活中大家可能已經無數次地用瀏覽器瀏覽過網頁，可是我們是否曾想過當我們在瀏覽器地址欄輸入地址後，計算機到底進行了那些操作才將網站頁面呈現在我們面前呢？現在就由我來給大家進行一個簡單的講解。

簡單可以理解為一下幾個步驟：

1. 輸入URL
2. 域名解析
3. 伺服器處理
4. 瀏覽器繪製頁面

輸入URL

URL的格式一般為：協議類型://<主機名>:<埠>/<路徑>/文件名

協議類型可以是http（超文本傳輸協議）、https（加密的文本傳輸協議） 、ftp（文件傳輸協議）、telnet（遠程登錄協議）、file（本地文件傳輸協議）等等。而http是最常見的網路傳輸協議，https則是進行加密的網路傳輸。

以https://www.zhihu.com/people/activities為例，https表示與web伺服器通訊採用https協議，知乎web伺服器域名為www.zhihu.com，/people/activities表示所訪問的文件存在於知乎web伺服器上的路徑。

對於 https://www.zhihu.com的URL，瀏覽器實際上並不知道www.zhihu.com到底是什麼東西，它需要查找zhihu.com網站所在伺服器的IP地址，才能找到目標伺服器。這就是下文要說的域名解析即DNS解析。

註：URL（Uniform Resource Locator），統一資源定位符，用於定位互聯網上的資源，實際上就是網站網址。IP是網際網路中的每台連接到網路的計算機為實現相互通信而遵循的規則協議，每個處於互聯網中的設備都有IP 地址，形如 192.168.0.1，而127.0.0.1代表本機的 IP。IP又分為區域網IP和公網IP。而區域網 IP 和公網 IP 是有差別的。每個網站就是靠IP來定位的。

DNS解析

DNS解析充當了一個翻譯的角色，實現了網址URL到實際IP地址的轉換，那麼它是如何進行解析的。

1. 瀏覽器緩存 – 瀏覽器會緩存DNS記錄一段時間
2. 系統緩存 - 從 系統的Hosts 文件中查找是否有該域名和對應 IP。
3. 路由器緩存 – 一般路由器也會緩存域名信息。
4. ISP(Internet Service Provider) DNS 緩存 – 網路運營商的DNS緩存，比如到電信的 DNS （114.114.114.114）上查找緩存。
5. 如果這些都沒有找到，那麼則向根域名伺服器查找域名對應 IP，根域名伺服器把請求轉發到下一級，直到找到對應 IP。

伺服器處理

目標伺服器都會安裝處理請求的應用web sever，常見的 web sever產品有 Apache、Nginx、IIS、Lighttpd等。 當web server接收到一個HTTP請求(request)，就會返回一個HTTP響應(response)，例如返回一個HTML頁面。對於不同用戶發送的請求，會結合配置文件，把不同請求委託給伺服器上處理對應請求的程序進行處理（例如CGI腳本，JSP腳本，servlets，ASP腳本，伺服器端JavaScript，或者一些其它的伺服器端技術等）。

無論它們(腳本)的目的如何，這些伺服器端(server-side)的程序通常產生一個HTML的響應(response)來讓瀏覽器可以瀏覽。

那麼如何處理請求？實際上就是後台處理的工作。後台開發現在有很多框架，但大部分都還是按照MVC設計模式進行搭建的。

處理的過程如下圖：

注:MVC模型（model）-視圖（view）-控制器（controller）

瀏覽器繪製頁面

那麼接下來就是瀏覽器進行處理， 通過後台處理返回的HTML字元串被瀏覽器接受後一句句讀取解析，html頁面經歷載入、解析、渲染。

• 載入

瀏覽器對一個html頁面的載入順序是從上而下的。如果載入過程中遇到外部css文件，瀏覽器另外發出一個請求，來獲取css文件。遇到圖片資源，瀏覽器也會另外發出一個請求，來獲取圖片資源。但是當文檔載入過程中遇到js文件，html文檔會掛起渲染（載入解析渲染同步）的線程，不僅要等待文檔中js文件載入完畢，還要等待解析執行完畢，才可以恢復html文檔的渲染過程。

• 解析

解析文檔是指將文檔轉化成為有意義的結構，也就是可讓代碼理解和使用的結構。解析得到的結果通常是代表了文檔結構的節點樹，它稱作解析樹或者語法樹，也就是DOM樹。如下圖：

css解析將css文件解析為樣式表對象。如下圖：

js解析文件在載入的同時也進行解析

• 渲染

即為構建渲染樹的過程，就是將DOM樹進行可視化表示。構建這棵樹是為了以正確的順序繪製文檔內容。

最終我們的瀏覽器就會根據 HTML 和 CSS 計算得到渲染樹，繪製到頁面上。

以上即為從用戶在瀏覽器地址欄輸入URL瀏覽器顯示網站內容的全過程，由於本人的能力有限，如果哪裡寫的不對的話，請指出！謝謝！！！