長沙Web前端培訓(xùn)班分享:瀏覽器訪問網(wǎng)頁過程原理解析
從在瀏覽器中輸入網(wǎng)址,到最終屏幕上顯示出網(wǎng)頁的內(nèi)容,在這個(gè)幾秒不到的過程中到底是經(jīng)歷了那些步驟呢?下面長沙Web前端培訓(xùn)班分享:瀏覽器訪問網(wǎng)頁過程原理解析。
其實(shí)訪問一個(gè)網(wǎng)頁就好比打電話這個(gè)過程。首先先得知道對方的手機(jī)號碼,然后撥號、接聽、掛斷等操作。客戶端與服務(wù)端:想要理解瀏覽器訪問網(wǎng)頁的過程首先需要先理解客戶端與服務(wù)端的概念。作為一名標(biāo)準(zhǔn)三好學(xué)生,我們從來不缺時(shí)間,缺的只是大洋。為了這事只有跟老爸老媽們斗智斗勇。
在這個(gè)例子中我們計(jì)算機(jī)中的瀏覽器就好比客戶端。需要大洋但是自己卻沒有,需要向父母索取。父母就好比服務(wù)端,時(shí)刻待機(jī)等待著子女的需求。服務(wù)端本質(zhì)也是一臺(tái)計(jì)算機(jī),只是一直在等待各種客戶端的需求。一旦客戶端的需求到達(dá)服務(wù)端,服務(wù)端就會(huì)立馬處理。
了解了客戶端與服務(wù)端的概念后,就可以具體來看看瀏覽器訪問的過程了。瀏覽器地址解析:對于瀏覽器屬一種多功能客戶端軟件。一旦用戶輸入地址后,瀏覽器會(huì)從輸入的地址中提取出協(xié)議、域名、端口等信息供后期使用。
DNS解析
地址中存有服務(wù)端域名信息。由于計(jì)算機(jī)的識(shí)別是采用的IP地址方式進(jìn)行識(shí)別的所以需要通過DNS解析獲取到服務(wù)端的IP地址。好比我要跟老爸打電話請求支援,找遍通訊錄發(fā)現(xiàn)沒有,只能先跟老媽打個(gè)電話問問。在DNS解析中首先是先經(jīng)歷本地DNS解析,如果本地DNS解析不到就通過互聯(lián)網(wǎng)的DNS服務(wù)器解析。
1、在本地中都存在一個(gè)hosts文件(window系統(tǒng)C:\Windows\System32\drivers\etc\hosts文件),記錄了域名與IP地址的對應(yīng)。本地DNS就是通過該文件的讀取操作得到域名與IP地址的對應(yīng)。
2、在本地DNS解析得不到IP地址的并且聯(lián)網(wǎng)了的情況下,瀏覽器會(huì)調(diào)度Socket庫的功能去找最近的 DNS 服務(wù)器,去查詢域名對應(yīng)的服務(wù)端的IP地址。
TCP/IP建立連接
在DNS解析完成之得到IP地址之后就會(huì)使用TCP/IP協(xié)議的方式進(jìn)行連接(具體如何找到服務(wù)端這個(gè)涉及的可就很多。連接這個(gè)過程好比通話過程中的具體撥號到正式開始說話的過程。
1、客戶端計(jì)算機(jī)通過各種路由等設(shè)備根據(jù)IP地址找到服務(wù)端的計(jì)算機(jī)。
2、客戶端與服務(wù)端三次收發(fā)消息完成連接建立確。
三次收發(fā)信息的過程也叫做三次握手,三次握手本質(zhì)是收發(fā)了三次標(biāo)志位確保連接正常??梢岳斫鉃椋?/p>
a):喂,可以聽到嗎?
b):可以聽到!
c):目前正??梢蚤_始說話了~
發(fā)送http請求
當(dāng)連接建立好后直奔主題,明確告訴老爸目前需要大洋的志愿。如果我說其他語言對可能老爸完全聽不懂。但是如果使用中文表達(dá)他肯定聽得懂。所以當(dāng)完成了連接建立接下來具體溝通就得都使用同一門語言才可以相互交流。瀏覽器客戶端與服務(wù)端商量好統(tǒng)一使用http協(xié)議的格式來收發(fā)數(shù)據(jù)。
瀏覽器會(huì)按照http協(xié)議的格式組裝數(shù)據(jù),最終將數(shù)據(jù)按照TCP/IP協(xié)議的方式發(fā)送到服務(wù)端。發(fā)送的http協(xié)議格式的數(shù)據(jù)如下,每一塊每一行都具備固定的含義,就好比聊天所用的每個(gè)詞都有含義,屬于本身已經(jīng)約定的。
接受http響應(yīng)
當(dāng)老爸知道這一通電話的目的后,考慮良久后,最終打開手機(jī)銀行,默默將自己存了好久的私房錢轉(zhuǎn)出來。最后告知錢已經(jīng)轉(zhuǎn)了。這個(gè)過程就是一種響應(yīng)。服務(wù)端通過使用TCP/IP協(xié)議將http協(xié)議格式的數(shù)據(jù)傳輸給客戶端瀏覽器。
渲染頁面
瀏覽器當(dāng)?shù)玫巾憫?yīng)的內(nèi)容后就要顯示內(nèi)容。
1、檢查 Content-Encoding響應(yīng)體的壓縮問題
如果消息中存放的內(nèi)容是通過壓縮或編碼技術(shù)對原始數(shù)據(jù)進(jìn)行轉(zhuǎn)換得到的,那么 Content-Encoding 的值就表示具體的轉(zhuǎn)換方式,通過這個(gè)字段的值,可以知道如何將消息中經(jīng)過轉(zhuǎn)換的數(shù)據(jù)還原成原始數(shù)據(jù)。
2、判斷響應(yīng)消息中的數(shù)據(jù)屬于哪種類型
Web 可以處理的數(shù)據(jù)包括文字、圖像、聲音、視頻等多種類型,每種數(shù)據(jù)的顯示方法都不同,所以根據(jù)響應(yīng)消頭的 Content-Type 頭部字段的值來進(jìn)行判斷。
3、根據(jù)Content-Type的類型進(jìn)而使用不同的方式渲染結(jié)果到瀏覽器頁面上。

猜你喜歡LIKE
最新文章NEW
相關(guān)推薦HOT
更多>>熱門推薦
零基礎(chǔ)必看的前端HTML+CSS教程
沸Java培訓(xùn)新手實(shí)戰(zhàn)必備!單機(jī)版坦克大戰(zhàn)分步實(shí)現(xiàn)項(xiàng)目源碼
熱3種Javascript圖片預(yù)加載的方法詳解
熱長沙前端培訓(xùn):一招教你用vue3+canvas實(shí)現(xiàn)坦克大戰(zhàn)
新互聯(lián)網(wǎng)涼了?參加長沙Java培訓(xùn)能找到工作嗎?
長沙Java培訓(xùn)實(shí)戰(zhàn)項(xiàng)目,出游咨詢訂票系統(tǒng)開發(fā)流程
不參加長沙Java培訓(xùn)能學(xué)會(huì)Java嗎?2022Java技能學(xué)習(xí)路線圖
千鋒長沙Java培訓(xùn)分享之怎么學(xué)習(xí)Java集合?
千鋒長沙前端培訓(xùn)分享之JavaScript面向?qū)ο缶幊趟枷朐斀?/p>
千鋒長沙前端培訓(xùn)分享之web前端的回流和重繪
千鋒長沙前端培訓(xùn)分享之3種Javascript圖片預(yù)加載的方法詳解
千鋒長沙前端培訓(xùn)分享之利用Jest測試React組件
千鋒長沙前端培訓(xùn)分享之JavaScript中Slice的用例
千鋒長沙java培訓(xùn)分享之Socket編程
技術(shù)干貨







快速通道 更多>>
-
課程介紹
點(diǎn)擊獲取大綱 -
就業(yè)前景
查看就業(yè)薪資 -
學(xué)習(xí)費(fèi)用
了解課程價(jià)格 -
優(yōu)惠活動(dòng)
領(lǐng)取優(yōu)惠券 -
學(xué)習(xí)資源
領(lǐng)3000G教程 -
師資團(tuán)隊(duì)
了解師資團(tuán)隊(duì) -
實(shí)戰(zhàn)項(xiàng)目
獲取項(xiàng)目源碼 -
開班地區(qū)
查看來校路線