從 URL 輸入到頁面展現(xiàn)發(fā)生了什么

  • URL:Uniform Resource Locator 統(tǒng)一資源定位符是對可以從互聯(lián)網(wǎng)上得到的資源的位置和訪問方法的一種簡潔的表示,是互聯(lián)網(wǎng)上標(biāo)準(zhǔn)資源的地址。互聯(lián)網(wǎng)上的每個文件都有一個唯一的URL,它包含的信息指出文件的位置以及瀏覽器應(yīng)該怎么處理它。
  • 協(xié)議:HTTP、HTTPS、FTP、FILE
  • 127.0.0.1表示本機IP
  • 8.8.8.8是一個是Google提供的免費IP地址,114.114.114 是電信的DNS服務(wù)器地址
  • DNS:域名系統(tǒng)
  • IP地址:IP地址是指互聯(lián)網(wǎng)協(xié)議地址(Internet Protocol Address,又譯為網(wǎng)際協(xié)議地址),是IP Address的縮寫,每個處于互聯(lián)網(wǎng)中的設(shè)備都有IP。

域名解析的流程

1、在瀏覽器里輸入URL

2、域名解析

把域名解析成IP。域名存在的作用就是方便記憶。
域名解析的流程:
(1)在瀏覽器里找緩存:瀏覽器會緩存DNS一段時間
(2)在系統(tǒng)緩存里查找:從 Host文件查找是否有該域名對應(yīng)的IP
(3)在路由器緩存里查找:一般的路由器也會緩存域名
(4)在ISPDNS緩存里查找
(5)在根域名服務(wù)器查找域名對應(yīng)的IP

3、服務(wù)器處理

web server接受用戶的請求,并返回代碼
web server 擔(dān)任管控的角色,對于不同用戶發(fā)送的請求,會結(jié)合配置文件,把不同請求委托給服務(wù)器上處理對應(yīng)請求的程序進(jìn)行處理(例如CGI腳本,JSP腳本,servlets,ASP腳本,服務(wù)器端JavaScript,或者一些其它的服務(wù)器端技術(shù)等),然后返回后臺程序處理產(chǎn)生的結(jié)果作為響應(yīng)。

4、網(wǎng)站處理流程

網(wǎng)站處理,就是實際后臺處理的工作。后臺開發(fā)現(xiàn)在有很多框架,但大部分都還是按照MVC設(shè)計模式進(jìn)行搭建的。
MVC是一個設(shè)計模式,將應(yīng)用程序分成三個核心部件:模型(model)-- 視圖(view)--控制器(controller),它們各自處理自己的任務(wù),實現(xiàn)輸入、處理和輸出的分離。

(1)、視圖(view)

視圖是用戶看到并與之交互的界面。這是前端工作的主力部分。

(2)、模型(model)

模型是將實際開發(fā)中的業(yè)務(wù)規(guī)則和所涉及的數(shù)據(jù)格式模型化,應(yīng)用于模型的代碼只需寫一次就可以被多個視圖重用。在MVC的三個部件中,模型擁有最多的處理任務(wù)。一個模型能為多個視圖提供數(shù)據(jù)。

(3)、控制器(controller)

控制器接受用戶的輸入并調(diào)用模型和視圖去完成用戶的需求。Controller處于管理角色,從視圖接收請求并決定調(diào)用哪個模型構(gòu)件去處理請求,然后再確定用哪個視圖來顯示模型處理返回的數(shù)據(jù)。

Paste_Image.png

5、瀏覽器處理

通過后臺處理返回的html字符串結(jié)果會被瀏覽器讀取解析,對應(yīng)就是html頁面加載、解析、渲染的工作。
(1)、加載
瀏覽器對一個html頁面的加載順序是從上而下的,并在加載過程并行進(jìn)行解析渲染處理。在這個過程中遇到link標(biāo)簽、image標(biāo)簽、script標(biāo)簽時,瀏覽器會再次向服務(wù)器發(fā)送請求獲取css文件、圖片資源、js文件,并執(zhí)行js代碼,同步進(jìn)行加載解析。
(2)、解析、渲染
解析的過程,其實就是生成解析樹,即dom樹。dom樹是由dom元素及屬性節(jié)點組成,加上css解析的樣式對象和js解析后的動作實現(xiàn)。而渲染,就是將DOM樹進(jìn)行可視化表示。下一步就來到了繪制網(wǎng)頁的工作階段。

6、繪制網(wǎng)頁

瀏覽器通過上面步驟計算得到渲染樹,是DOM樹的可視化表示,構(gòu)建渲染樹使頁面以正確的順序繪制出來,遵循一定的渲染規(guī)則,經(jīng)過一系列的渲染工作,實現(xiàn)網(wǎng)站頁面的繪制,由此最終完成了頁面展示。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容