淺議從URL輸入到頁面展示

淺議從URL輸入到頁面展示

什麼是URL url是統一 資源定位符，對能夠從 互聯網上獲得的資源的位置和訪問方法的一種簡潔的表示，是互聯網上標準資源的地址。互聯網上的每一個文件都有一個惟一的URL，它包含的信息指出文件的位置以及瀏覽器應該怎麼處理它。  ^[1]

它最初是由蒂姆·伯納斯·李發明用來做爲萬維網的地址。如今它已經被萬維網聯盟編制爲互聯網標準RFC1738了。

1、在瀏覽器的地址欄中敲入了url

結構（一） 基本URL包含模式（或稱協議）、服務器名稱（或IP地址）、路徑和文件名，如「協議://受權/路徑?查詢」。完整的、帶有受權部分的普通統一資源標誌符語法看上去以下：協議://用戶名:密碼@子域名.域名.頂級域名:端口號/目錄/文件名.文件後綴?參數=值#標誌。

簡單能夠理解爲：協議類型://<主機名IP>:<端口>/<路徑>/文件名 協議類型（scheme）最經常使用的有超文本傳輸協議（Hypertext Transfer Protocol，縮寫爲HTTP）也就是咱們所說的HTTP協議，協議以下：

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

以上四個比較常見 其它的還有 -mailto——電子郵件地址 -ldap——輕型目錄訪問協議搜索 -file——當地電腦或網上分享的文件 -news——Usenet新聞組 -gopher——Gopher協議

結構（二） IP是因特網中的每臺鏈接到網絡的計算機爲實現相互通訊而遵循的規則協議。每一個處於互聯網中的設備都有IP 地址，形如 192.168.0.1，而127.0.0.1表明本機的 IP。IP又分爲局域網IP和公網IP。而局域網 IP 和公網 IP 是有差異的。每一個網站就是靠IP來定位的。 爲了便於記憶或辨識，人們使用域名來登陸網站，每一個域名背後有對應的IP地址。 好比對於 www.jianshu.com的URL，瀏覽器實際上不知道 www.jianshu.com究竟是什麼東西，須要查找www.jianshu.com網站所在服務器的IP地址，才能找到目標，這就是下文要說的域名解析。

2、域名解析

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

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

chrome://net-internals/#dns

2-查找操做系統緩存(查詢hosts文件)

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

3-查找路由器緩存

若是系統緩存中也找不到，那麼查詢請求就會發向路由器，路由器通常會有本身的DNS緩存。

4-查找ISP(Internet Service Provider) DNS 緩存

若是路由器緩存中也找不到，那麼就查詢ISP DNS 緩存服務器了。 咱們都知道在咱們的網絡配置中都會有"DNS服務器地址"這一項，操做系統會把這個域名發送給這裏設置的DNS，好比114.114.114.114,也就是本地區的域名服務器，一般是提供給你接入互聯網的應用提供商。而114.114.114.114是國內移動、電信和聯統統用的DNS。

5-迭代查詢

若是前面都找不到DNS緩存的話，會有如下幾個步驟：

-本地 DNS服務器將該請求轉發到互聯網上的根域（根域沒有名字，在DNS系統中就用一個空字符串來表示。例如www.baidu.com.如今的DNS系統都不會要求域名以.來結束，即www.baidu.com就能夠解析了，可是如今不少DNS解析服務商仍是會要求在填寫DNS記錄的時候以.來結尾域名。）

-根域將所要查詢域名中的頂級域（好比要查詢www.baidu,com，該域名的頂級域就是com）的服務器IP地址返回到本地DNS。

-本地DNS根據返回的IP地址，再向頂級域（就是com域）發送請求， com域服務器再將域名中的二級域（即www.baidu.com中的baidu.com）的IP地址返回給本地DNS。

-本地DNS再向二級域發送請求進行查詢。 以後不斷重複這樣的過程，直到本地DNS服務器獲得最終的查詢結果，並返回到主機。這時候主機才能經過域名訪問該網站。 下圖能很好的說明這個迭代查詢:

當查找到對應的IP地址以後，經過IP地址查找到對應的服務器，瀏覽器將用戶發起的http請求發送給服務器。例如：GET www.baidu.com/ HTTP/1.1

3、服務器處理請求

瀏覽器與服務器創建鏈接，併發送請求給服務器 每臺服務器上都會安裝處理請求的應用——Web server。常見的web server產品有apache、nginx、IIS、Lighttpd等。

當web server接收到一個HTTP請求(request)，會返回一個HTTP響應(response)，例如送回一個HTML頁面。對於不一樣用戶發送的請求，會結合配置文件，把不一樣請求委託給服務器上處理對應請求的程序進行處理（例如CGI腳本，JSP腳本，servlets，ASP腳本，服務器端JavaScript，或者一些其它的服務器端技術等）。

不管它們(腳本)的目的如何，這些服務器端(server-side)的程序一般產生一個HTML的響應(response)來讓瀏覽器能夠瀏覽。

那麼如何處理請求？實際上就是後臺處理的工做。後臺開發如今有不少框架，但大部分都仍是按照MVC設計模式進行搭建的。

處理過程圖：

MVC的處理過程是這樣的：對於每個用戶輸入的請求，首先被控制器接收，控制器決定用哪一個模型來進行處理，而後模型用業務邏輯來處理用戶的請求並返回數據，最後控制器肯定用哪一個視圖模型，用相應的視圖格式化模型返回html字符串給瀏覽器，並經過顯示頁面呈現給用戶。

4、瀏覽器處理

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

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

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

-解析 解析文檔是指將文檔轉化成爲有意義的結構，也就是可以讓代碼理解和使用的結構。解析獲得的結果一般是表明了文檔結構的節點樹，它稱做解析樹或者語法樹，也就是DOM樹。以下圖：

css解析將css文件解析爲樣式表對象。以下圖：

js解析文件在加載的同時也進行解析 瀏覽器的工做原理：新式網絡瀏覽器幕後揭祕 -渲染 即爲構建渲染樹的過程，就是將DOM樹進行可視化表示。構建這棵樹是爲了以正確的順序繪製文檔內容。

5、繪製網頁

即爲構建渲染樹的過程，就是將DOM樹進行可視化表示。構建這棵樹是爲了以正確的順序繪製文檔內容。瀏覽器根據html、css計算獲得渲染樹，結合相關js的執行結果，最終將網頁繪製到屏幕上。