從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文件,重新渲染頁面。
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容