前端面試考官：從你輸入網址，到網頁出現，這過程到發生了什麼？

9 min readMar 6, 2018

考生：考官你好！
考官：廢話別多說，從你輸入網址，到網頁出現，這過程到發生了什麼？

一、你平日在瀏覽器輸入的網址，叫URL。

URL 是什麼？

URL 就是網址。

全稱：Uniform Resource Locator，中文稱：統一資源定位符，人話就是網址。就是訪問網絡上的資源的途徑。你在網絡上看到的網頁，影片，圖片等一切資源都是通過URL去訪問或獲取。就像現實生活一樣，你通過地址門牌去找到不同的地方。

URL 一般格式組成如下：協議://域名或IP:埠號/路徑/檔名/查詢參數/#錨點

例子： https://developer.mozilla.org/en-US/docs/Web/HTTP:443?utm_source=mdn&utm_medium=homepage#reference

以下將解釋例子中URL的各個組成部分。

協議 scheme

https:// 是與 web伺服器通訊採用https協議。

URL 協定型式主要用作不同的傳輸方式與內容類型，以下是最常見到的形式：

http 超文本傳輸協議，是網路最廣泛的協定之一，專門負責HTML網頁的發佈與接收。就像你目前觀看的本文章
https 用加密傳送的超文本傳輸協議，傳輸的網頁經過加密，現普遍採用。
ftp 檔案傳輸協議，負責檔案傳輸，可以進行檔案共享
mailto 電子郵件位址，專門負責電子郵件的傳輸，@是電子郵件必須有的

更多的協定型式可參考這裏

主機 host — 域名或IP

developer.mozilla.org/ 是域名，是指網站資源所室在的網站或伺服器名字，又稱主機 host。

域名

一個域名是由幾部分組成。定需要由右至左閱讀。

developer.mozilla.org/

.org 是頂級域名 Top-Level Domain

頂級域名最常見有例如 .com, .org, .net 。有些頂級域名只限特定國家，如 .hk, .us 或特定組織機構，如 .edu, .gov 申請。

developer.mozilla 是二級域名 Secondary Level Domain

子域名：mozilla.org 是一個完整域名，你也可以按你擁有的域名去創建另外的子域名去訪問特定網站內容，例如 developer.mozilla.org/ 。

也有些網站沒有使用域名，只有IP，如 developer.mozilla.org/ 綁定的IP是 13.226.122.94 。先了解什麼是 IP 地址：

IP

正式名稱為 Internet Protocol (簡稱：IP) ，中文稱為網際協議。每個處於互聯網中的設備都有 IP 地址，以實現相互通訊。例如127.0.0.1是代表本機的 IP。IP 又分為區域網 IP 和公網 IP。簡單而言：

區域網 IP：屬於非註冊地址，專門為組織機構內部使用，通過網際網路是不能訪問私有IP的，就如你公司中的內聯網。
公網 IP ：則是需要註冊，通過它直接訪問網際網路，在任何地方只有能連網都能訪問公網 IP。

理論上，我們知道 IP 地址，就可以訪問網絡上的網頁等資源。但恐怕你也記不了這些難辨認又沒有意思的數字吧。於是就有域名的出現。

端口 port

:443 每個協議都有特定使用的端口。一般瀏覽器已根據協定默認背後自動填上，網址一般不用填寫，有特定需要要才要填寫。例如 https 使用443端口，http 使用80端口。

路徑 path

/en-US/docs/Web/HTTP 是所訪問的文件存在於伺服器上的路徑檔名

參數 parameter

?utm_source=mdn&utm_medium=homepage 是參數，帶有兩組參數。

參數是提供給伺服器的額外訊息，參數是在路徑後方，兩者之間使用?分隔。如有多組參數則使用&連接。

錨點 anchor

#reference 是錨點

錨點是網站內部定位點，使用#加上錨點，放在網址最後，瀏覽加載頁面解析後，會自動跳到錨點所有位置。注意錨點只會在瀏覽器加載後解析，過程中錨點不會傳送訊息至伺服器，因此不要將參數錯誤放在錨點後方。

二、當你輸入網址後，發生了什麼？

先了解什麼是 IP 地址

區域網 IP 屬於非註冊地址，專門為組織機構內部使用，通過網際網路是不能訪問私有IP的，就如你公司中的內聯網。
公網 IP 則是需要註冊，通過它直接訪問網際網路，在任何地方只有能連網都能訪問公網 IP。

理論上，我們知道 IP 地址，就可以訪問網絡上的網頁等資源。但恐怕你也記不了這些難辨認又沒有意思的數字吧。於是就有域名的出現。

你輸入的網址名稱就是域名

域名就是把 IP 地址語義化，使人容易記憶及辨認。利用域名對應 IP 地址。

以 http://www.jianshu.com 為例，瀏覽器不會知道 www.jianshu.com 到底是在網絡哪個位置，它需要查找 www.jianshu.com 這個域名背後對應所在伺服器的 IP 地址，才能找到目標。這個過程叫域名解析。

##三、進行域名解析當你輸入網址後，瀏覽器會進行以下一系列流程，透過域名伺服器(Domain Name Server, DNS) ，去進行域名解析，查找域名是對應哪個 IP 地址，最後從該 IP 地址獲取網頁等網絡資源。

查找瀏覽器緩存

如果你先前在瀏覽器曾經到訪過網站。瀏覽器會緩存DNS記錄一段時間，這樣就找到對應的 IP 地址。域名解析結束。如果未曾到訪過網站就會繼續進行域名解析。

2. 查找系統緩存

從電腦系統中 Hosts 的文件查找有沒有DNS記錄，是否有相關的對應的 IP 地址。如果沒有，域名解析繼續。

3.查找路由器緩存

如果有其他設備使用的路由器曾經到訪過網站。路由器也會緩存DNS記錄，是否有相關的對應的 IP 地址。如果沒有，域名解析繼續。

4.查找 ISP DNS 緩存

以上還是沒有，就會向你的網絡供應商 (Internet Service Provider, ISP) 查找有沒有相關DNS記錄。

5.查找根域名伺服器供應商

ISP DNS 緩存還是沒有，就會向根域名伺服器供應商，查找相關對應的 IP 地址。根域名伺服器把請求轉發給下一級，直到找到對應的IP為止。

為什麼修改 DNS 為 114.114.114.114 或 8.8.8.8 可以解決電腦上不了網的問題？

8.8.8.8 是谷歌提供的DNS伺服器的 IP 地址，114.114.114.114 是國內電信網絡供應商。如果我們網頁顯示不了，就説明我們以上一系列流程都找不到相關 IP 地址，你可以嘗試直接從谷歌或電信提供的DNS伺服器中查找相關的 IP 地址

什麼是DNS挾持？

例如：以上1－5流程中，其中hosts或緩存資料遭篡改，導致域名解析到不正確的IP地址，導致訪問錯誤的 IP 地址。如將一個銀行域名指向不正確的 IP 地址，造成威脅

三、當域名解析成功，找到相關 IP 地址，接下來到Web伺服器處理請求

每台伺服器上都會安裝處理請求的應用：Web server。常見的web server 有apache、nginx、IIS、Lighttpd等。

當 web serve r接收到一個 HTTP 請求 (request)，便會進行一個網站處理流程，最後產生一個 HTML 的響應(response)給瀏覽器。

###伺服器內網站處理流程網站處理是實際後台處理的工作。後台開發現在有很多框架，但大部分都還是按照MVC設計模式進行搭建的。

MVC是一個設計模式，將應用程序分成三個核心部件：

模型（model），視圖（view），控制器（controller）

MVC的處理過程：

每一個用户輸入的請求
首先被路由接收，再交由控制器決定用哪個模型來進行處理
將用户輸入的指令數據傳給模型進行
進行業務邏輯判斷，按需要向數據庫存取
根據業務邏輯選擇視圖
控制器用業務邏輯相應的數據填入視圖模型
將處理好的視圖模版的HTML交回控制器
生成 HTML 字符串返給瀏覽器處理，並通過顯示頁面呈現給用户。

四、最後伺服器將處理好的HTML，交給瀏覽器處理，最後顯示在你的屏幕上

接下來就是瀏覽器進行處理，伺服器將處理好的HTML字符串交給瀏覽器後被一句句讀取解析。過程主要分為

載入，解析，渲染

載入由於瀏覽器對 HTML 頁面加載順序是從上而下的。如果加載過程中遇到外部 css (如下）

<html>
<head>
<script type="text/javascript" src="style.js"></script>
<script type="text/javascript" src="style1.js"></script>
<script type="text/javascript" src="style2.js"></script>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
hello, world!
</body>
</html>

瀏覽器另外發出一個請求，來獲取 CSS 文件。遇到圖片資源，瀏覽器也會另外發出一個請求，來獲取圖片資源。但必須留意當文檔加載過程中遇到 Javascript(js) 文件（如上例），HTML 文檔加載解析渲染同步，不僅要等待文檔中 js 文件加載完畢，還要等待解析執行完畢，才可以恢復 HTML 文檔的渲染線程，導致 styles.css 樣式文件和<body>標籤都無法被加載，這會影響到頁面加載的速度，帶來不良用户體驗。

解析，渲染瀏覽器是一個邊解析邊渲染的過程。首先瀏覽器解析HTML文件構建DOM樹，然後解析CSS文件構建渲染樹，等到渲染樹構建完成後，瀏覽器開始佈局渲染樹並將其繪製到屏幕上。

總結

從你輸入網址，到網頁出現這個看似簡單且短的時間過程中，原來背後是牽涉這麼多的步驟及概念，這真不簡單喔。通過寫這篇文章，對前端這條熱門面試題目，也有初步的瞭解了。

本文是小弟學習前端寫有關於從你輸入網址，到網頁出現，這過程到發生了什麼的博文，請大家多多指教。如有任何意見及交流，可在下方留言，謝謝！