作為一道經典的前端面試題，從URL輸入到頁面展現具體發生了什么，有哪些步驟,是一個合格的前端攻城獅必須掌握透徹的一個點。我自己也google了很多文章，下面從一個純小白的角度去談談自己的理解。

大體分為以下幾個步驟：

1. 在瀏覽器中輸入URL
2. DNS解析
3. 服務器處理
4. 瀏覽器處理
5. 繪制網頁

1. 在瀏覽器中輸入URL

• 什么是URL

URL：統一資源定位符，互聯網上的每個文件都有一個唯一的URL，它包含的信息指出文件的位置以及瀏覽器應該怎么處理它。

• URL的組成

URL結構

protocol

訪問協議：它告訴瀏覽器如何處理將要打開的文件。web站點中最常用的模式是超文本傳輸協議http，其次為https協議。在URL中（http://xxx.xx/xx）協議的分隔符為//，匹配值包含 :。

hostname

域名一般由英文字母和阿拉伯數字以及橫"－"組成，最長可達67個字符（包括后綴），并且字母的大小寫沒有區別，每個層次最長不能超過22個字母。這些符號構成了域名的前綴，主體和后綴等幾個部分，組合在一起構成一個完整的域名。當然，IP也可以充當domain的作用。

port

端口對應的是服務器當前應用正在監聽的網絡接口，瀏覽器默認值為80。分隔符為hostname后的:。

pathname

路徑名部分，用于指明資源位于服務器的位置（相對的）。類似于分層級的文件系統。

search

查詢，通過提供參數縮小數據庫的檢索范圍，在url中search以?開始，每對參數以&分割，參數的鍵值分隔符為=，如?act=del&id=21。

hash

hash作為錨點，用來標記文檔內的位置，此段標記僅體現在瀏覽器上，http請求會忽略此段內容，修改hash不會觸發頁面的跳轉刷新。也由于其特性，目前越來越多的用在單頁組件中。

更多細節請參考原文。

• 用戶輸入URL

當用戶想訪問某一個頁面,例如百度,就會在瀏覽器中輸入URL（網址） www.baidu.com。實際上瀏覽器并不知道這個網址是什么，這時就需要查找網址所在服務器的ip地址，找到所對應的資源文件。這個過程就是 DNS解析(域名解析)。

2. DNS解析

• 什么是DNS

DNS:Domain Name System，域名系統。是互聯網上的一種服務。它作為將域名和IP地址相互映射的分布式數據庫，能夠使人更方便的訪問互聯網。

• DNS解析

人們習慣記憶域名，但機器間互相只認IP地址，域名與IP地址之間是多對一的關系，一個ip地址不一定只對應一個域名，且一個域名只可以對應一個ip地址，它們之間的轉換工作稱為域名解析，域名解析需要由專門的域名解析服務器來完成，整個過程是自動進行的。

• DNS解析流程

1. 瀏覽器緩存 :瀏覽器會緩存DNS記錄一段時間.
2. 系統緩存:從本地hosts文件查找是否有該域名和對應IP.
3. 路由器緩存:一般路由器也會緩存域名信息
4. IPS DNS緩存:例如在電信的服務器上查找緩存.

如果都沒有找到,則向根域名服務器查找對應IP,根域名服務器把請求發到下一級.直到找到IP.具體流程如下

DNS解析流程

關于DNS的幾個基本概念以及解析流程參考鏈接.

3. 服務器處理

• Web服務器
  Web服務器一般指網站服務器，是指駐留因特網上某種類型計算機的程序，可以向瀏覽器等Web客戶端提供文檔，也可以放置網站文件，讓全世界瀏覽；可以放置數據文件，讓全世界下載。

常見的Web服務器有:Apache 、Nginx、IIS等。

• Web服務器接受用戶請求
  大概來講就是接受用戶請求，查找對應資源，比如一個html文件。或者反向代理到其他Web服務器。具體過程請參考鏈接：Web處理請求。

4. 瀏覽器處理

• HTML字符串被瀏覽器接收后一句句讀取解析。
• 解析到<link>標簽重新發送請求獲取CSS。
• 解析到<script>標簽發送請求獲取js.并執行代碼。
• 解析到<img>標簽后發送請求獲取圖片資源。

5. 繪制網頁

瀏覽器根據HTML和CSS計算得到渲染樹，繪制并執行js。

小結

在寫文章的同時自己的思路也越來越清晰。發現了自己很多知識盲區。以后還會不定期更新本文，查漏補缺，希望自己能做一個優秀的前段攻城獅！