20170809-從URL輸入到頁面展示

從URL輸入到頁面展示

1.輸入URL

• URL:統一資源定位符，是對能夠從互聯網上獲得的資源的位置和訪問方法的一種簡潔的表示。

• URL包含如下幾部分：協議、服務器名稱(或IP地址)、路徑、參數和查詢。

• 舉例說明：

• 經常使用協議：

協議	中文名稱	默認端口號
http	超文本傳輸協議	80
https	用安全套接字層傳送的超文本傳輸協議	443
ftp	文件傳輸協議	21
TELNET	遠程終端協議	23

若是地址不包含端口號，根據協議的默認端口號肯定一個。

2.根據URL，在本地DNS緩存中查找域名對應的IP地址

瀏覽器和操做系統在獲取網站域名的實際IP地址後會對其IP進行緩存，在短期內重複訪問同一域名時，會直接在DNS緩存中讀取域名對應的IP地址，以減小網絡請求的損耗（先在瀏覽器DNS緩存中查找，若是沒有找到，則會在操做系統DNS緩存中查找）。瀏覽器和操做系統都有一個固定的DNS緩存時間，其中Chrome的過時時間是1分鐘，在這個期限內不會從新請求DNS。Chrome瀏覽器看自己的DNS緩存時間比較方便，在地址欄輸入:

chrome://net-internals/#dns

就能夠查看本地DNS緩存：

3.查詢hosts文件

• 若是在本地DNS緩存中沒有找到域名對應的IP地址，則會查詢hosts文件，看其中是否已經有與當前域名對應的 IP 地址，若是有就會直接採用，若是沒有，那麼就得由DNS服務器進行域名解析完成域名與IP的轉換工做。

4.域名解析

• 域名系統DNS(Domain Name System)：用來把人們使用的域名轉換爲IP地址的系統。它是一個聯機分佈式數據庫系統，採用客戶服務器方式。

• 域名到IP地址的解析：當瀏覽器須要把域名解析爲IP地址時，會調用解析程序，併成爲DNS的一個客戶，把帶解析的域名放在DNS請求報文中，以UDP用戶數據報方式發送給本地域名服務器能夠是路由器或者是運營商服務器）。本地域名服務器在查找域名後，把對應的IP地址放在回答報文中返回。瀏覽器在獲取相應的IP地址後便可進行下一步的通訊。

• 若本地域名服務器查找不到對應的IP，則此域名服務器就暫時成爲DNS中的另外一個客戶，並向其餘域名服務器發出查詢請求。這種過程直至找到可以回答該請求的域名服務器爲止。

5.瀏覽器與服務器創建鏈接，併發送請求給服務器

• 當瀏覽器獲得域名對應的IP地址後，則會使用TCP協議，和服務器創建鏈接（三次握手）。

• 和服務器創建鏈接後，瀏覽器則會使用相關協議(http或https)，向服務器發送請求。

• HTTP協議請求方法主要有：get、post、put、delete等幾種方式。

6.服務器收到請求並處理，最後返回結果

• 服務器是一臺安裝系統的機器，常見的系統如Linux、windows server 2012，系統中安裝的處理請求的應用叫Web server。常見的Web服務器有 Apache、Nginx、IIS、Lighttpd，Web服務器接收用戶的請求，或者接受請求反向代理到其餘Web服務器。

• (以MVC框架爲例)當服務器收到來自用戶的請求後，首先Controller(控制器)根據用戶的請求調用相應的Model(模型)去處理用戶請求相關的業務邏輯(包括對數據庫的增刪改查)，而後將處理結果傳遞給對應的View(視圖)，構造顯示頁面(HTML文件)。最後服務器使用HTTP響應返回相應的資源(HTML文件)。

7.瀏覽器處理響應

• 瀏覽器收到來自服務器的響應後，會將響應中的HTML字符串一句句讀取解析，解析到link標籤後從新發送請求下載css文件，解析到script標籤後從新發送請求下載js文件，並執行代碼，解析到img標籤後從新發送請求獲取圖片資源。

• 瀏覽器根據html、css計算獲得渲染樹，結合相關js的執行結果，最終將網頁繪製到屏幕上，。

• 在查找資料的過程當中，看到一篇簡單易懂還挺有趣的文章：

HTML頁面加載和解析流程

1. 用戶輸入網址（假設是個html頁面，而且是第一次訪問），瀏覽器向服務器發出請求，服務器返回html文件；

2. 瀏覽器開始載入html代碼，發現＜head＞標籤內有一個＜link＞標籤引用外部CSS文件；

3. 瀏覽器又發出CSS文件的請求，服務器返回這個CSS文件；

4. 瀏覽器繼續載入html中＜body＞部分的代碼，而且CSS文件已經拿到手了，能夠開始渲染頁面了；

5. 瀏覽器在代碼中發現一個＜img＞標籤引用了一張圖片，向服務器發出請求。此時瀏覽器不會等到圖片下載完，而是繼續渲染後面的代碼；

6. 服務器返回圖片文件，因爲圖片佔用了必定面積，影響了後面段落的排布，所以瀏覽器須要回過頭來從新渲染這部分代碼；

7. 瀏覽器發現了一個包含一行Javascript代碼的＜script＞標籤，趕快運行它；

8. Javascript腳本執行了這條語句，它命令瀏覽器隱藏掉代碼中的某個＜div＞ （style.display=」none」）。忽然少了這麼一個元素，瀏覽器不得不從新渲染這部分代碼；

9. 終於等到了＜/html＞的到來，瀏覽器淚流滿面……

10. 等等，還沒完，用戶點了一下界面中的「換膚」按鈕，Javascript讓瀏覽器換了一下＜link＞標籤的CSS路徑；

11. 瀏覽器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞們，「大夥兒收拾收拾行李，咱得從新來過……」，瀏覽器向服務器請求了新的CSS文件，從新渲染頁面。

• 其餘相關資料：《how browsers work》