深度解析URL到頁面渲染的全過程

人生就像一列開往墳墓的列車,路途上會有很多站,很難有人至始至終陪你走完全程,當陪你的人要下車時,即便不舍,也要心存感激,然后揮手告別。---sunnyhuang

URL

URL統一資源定位符,用于互聯網上不同的資源的標識,就像不同的人有不同的身份證一樣。

URL的組成

URL的組成
  1. 協議
  2. 域名 (有時候也是ip,)
  3. 端口號(數字表示,若為HTTP的默認值“:80”可省略)
  4. 路徑(以“/”字符區別路徑中的每一個目錄名稱)
  5. 查詢(GET模式的窗體參數,以“?”字符為起點,每個參數以“&”隔開,再以“=”分開參數名稱與數據,通常以UTF8的URL編碼,避開字符沖突的問題)

在瀏覽器輸入url后的訪問

1. 域名解析

瀏覽器會把輸入的域名解析成對應的ip,解析分為幾部分進行。

  1. 查看瀏覽器內部緩存,如果查到域名對應的ip,就發送和接受參數和數據
  2. 查看本機的host文件,瀏覽器會在本機的hosts文件查看是否有對應的ip服務器地址。
  3. 查看本地路由器的DNS緩存,找到對應的ip
  4. 查看網絡服務商中DNS服務器
  5. 查詢根域名下是否存在。
    上述5步找到對應的ip地址后
  6. 詢到目標IP地址后,則開始建立 TCP 三次握手 ,與目標服務器建立連接。
  7. 通過規定的協議(http)向目標主機發送請求

2. 服務器接收到請求和返回數據

服務器:安裝了系統和web-server的主機,可以理解為一臺電腦,安裝了系統和軟件來處理數據(硬件)

  1. 服務器接收到了瀏覽器發送的請求后,根據某個協議,通過web-server把瀏覽器發送的數據進行打包(包含請求頭,ip地址,請求路徑和查詢參數等)
  2. web-server把數據打包后,發送給網站代碼(比如django、flask、node.js等后端服務)
  3. 后端服務軟件會根據路徑和查詢參數進行相應處理,返回給瀏覽器對應的數據包(包括http協議組成的代碼。里面包含頁面的布局、文字。數據也可能是圖片、腳本程序,反應頭,反應數據,請求頭等)

3. 瀏覽器的接受數據和頁面渲染

  1. 瀏覽器接收到返回的數據包,根據瀏覽器的渲染機制對相應的數據進行渲染。
  2. 渲染后的數據,進行相應的頁面呈現和腳步的交互。

上訴3大點1. 域名解析。2.服務器接受。3.瀏覽器的渲染就是用戶輸入一個域名到頁面呈現的內容。

解析服務器中網站代碼處理處理的流程

1.MOV模型

MVC模型(model-view-controller

主要是第三步到第七步解析

  1. 用戶的請求數據通過控制器交給模型來處理(圖中的2)
  2. 模型根據用戶的請求數據,在數據庫中查詢,調用相應的數據返回給控制器(圖中的345)
  3. 控制器得到數據庫返回數據后,交給視圖模板填充形成頁面的模板(頁面基本的代碼成型)
  4. 視圖模板填充好后,把數據反饋給控制器
  5. 控制器將數據反饋給瀏覽器
  6. 瀏覽器得到數據后,進行相應的渲染,呈現給用戶。
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容