從在瀏覽器中輸入網址,到最終屏幕上顯示出網頁的內容,在這個幾秒不到的過程中到底是經歷了那些步驟呢?
其實訪問一個網頁就好比打電話這個過程。首先先得知道對方的手機號碼,然后撥號、接聽、掛斷等操作。
客戶端與服務端
想要理解瀏覽器訪問網頁的過程首先需要先理解客戶端與服務端的概念。
作為一名標準三好學生,我們從來不缺時間,缺的只是大洋。為了這事只有跟老爸老媽們斗智斗勇。
在這個例子中我們計算機中的瀏覽器就好比客戶端。需要大洋但是自己卻沒有,需要向父母索取。父母就好比服務端,時刻待機等待著子女的需求。服務端本質也是一臺計算機,只是一直在等待各種客戶端的需求。一旦客戶端的需求到達服務端,服務端就會立馬處理。
了解了客戶端與服務端的概念后,就可以具體來看看瀏覽器訪問的過程了。
瀏覽器地址解析
對于瀏覽器屬一種多功能客戶端軟件。一旦用戶輸入地址后,瀏覽器會從輸入的地址中提取出協議、域名、端口等信息供后期使用
DNS解析
地址中存有服務端域名信息。由于計算機的識別是采用的IP地址方式進行識別的所以需要通過DNS解析獲取到服務端的IP地址。好比我要跟老爸打電話請求支援,找遍通訊錄發現沒有,只能先跟老媽打個電話問問。
在DNS解析中首先是先經歷本地DNS解析,如果本地DNS解析不到就通過互聯網的DNS服務器解析。
1、在本地中都存在一個hosts文件(window系統C:\Windows\System32\drivers\etc\hosts文件),記錄了域名與IP地址的對應。本地DNS就是通過該文件的讀取操作得到域名與IP地址的對應。
2、在本地DNS解析得不到IP地址的并且聯網了的情況下,瀏覽器會調度Socket庫的功能去找最近的 DNS 服務器,去查詢域名對應的服務端的IP地址。
TCP/IP建立連接
在DNS解析完成之得到IP地址之后就會使用TCP/IP協議的方式進行連接(具體如何找到服務端這個涉及的可就很多。連接這個過程好比通話過程中的具體撥號到正式開始說話的過程。
1、客戶端計算機通過各種路由等設備根據IP地址找到服務端的計算機。
2、客戶端與服務端三次收發消息完成連接建立確。
三次收發信息的過程也叫做三次握手,三次握手本質是收發了三次標志位確保連接正常??梢岳斫鉃椋?/div>
a):喂,可以聽到嗎?
b):可以聽到!
c):目前正??梢蚤_始說話了——
發送http請求
當連接建立好后直奔主題,明確告訴老爸目前需要大洋的志愿。如果我說其他語言對可能老爸完全聽不懂。但是如果使用中文表達他肯定聽得懂。所以當完成了連接建立接下來具體溝通就得都使用同一門語言才可以相互交流。瀏覽器客戶端與服務端商量好統一使用http協議的格式來收發數據。
瀏覽器會按照http協議的格式組裝數據,最終將數據按照TCP/IP協議的方式發送到服務端
發送的http協議格式的數據如下,每一塊每一行都具備固定的含義,就好比聊天所用的每個詞都有含義,屬于本身已經約定的。
接受http響應
當老爸知道這一通電話的目的后,考慮良久后,最終打開手機銀行,默默將自己存了好久的私房錢轉出來。最后告知錢已經轉了。這個過程就是一種響應。
服務端通過使用TCP/IP協議將http協議格式的數據傳輸給客戶端瀏覽器
渲染頁面
瀏覽器當得到響應的內容后就要顯示內容。
1、檢查 Content-Encoding響應體的壓縮問題
如果消息中存放的內容是通過壓縮或編碼技術對原始數據進行轉換得到的,那么 Content-Encoding 的值就表示具體的轉換方式,通過這個字段的值,可以知道如何將消息中經過轉換的數據還原成原始數據。
2、判斷響應消息中的數據屬于哪種類型
Web 可以處理的數據包括文字、圖像、聲音、視頻等多種類型,每種數據的顯示方法都不同,所以根據響應消頭的 Content-Type 頭部字段的值來進行判斷。
3、根據Content-Type的類型進而使用不同的方式渲染結果到瀏覽器頁面上
如需轉載,請注明文章出處和來源網址:http://www.rs2pl.com/html/h62936.shtml
- 上一篇:16個網頁設計趨勢,你都有知道嗎?
- 下一篇:關于vertical-align那些事
必備CSS教程Essential CSS Tutorials
- css height
- css line-height
- css width
- css min-width
- css max-width
- css min-height
- css max-height
- css border
- css background
- css float
- css clear
- css display
- css font
- css text-transform
- css英文首字母大寫
- css font-variant
- css font-weight
- css font-style
- css text-decoration
- css 刪除線
- div css 虛線
- css 注釋
- html 注釋
- css padding
- css margin
- css 文本
- css font-size
- css font-family
- css color
- css text-align
- css text-indent
- css 超鏈接(css a)
- css 優化壓縮
- css id(css #)
- css class(css .)
- css ul li列表
- css 圓角圓邊
- css 父級子級
- css 指針概念
- css cursor
- css overflow
- html px em pt網頁單位
- CSS important
- CSS position
- css z-index
- css white-space
- css img圖片
- css class id
- css link與@import區別
- css 選擇器
- css引入html
必備HTML基礎教程Essential HTML Tutorials
- html img圖片標簽
- html em標簽(EM強調標簽)
- html strong加粗(strong標簽)
- html B加粗(b加粗標簽)
- strong與B加粗區別
- h1 h2 h3 h4標簽(html標題標簽)
- html A超鏈接錨文本
- html注釋
- html head頭部標簽
- html title標題標簽
- html meta標簽
- html link標簽
- html i斜體標簽
- html u下劃線標簽
- html s刪除線標簽
- html換行br標簽
- html p段落標簽
- p標簽與br標簽區別
- html div標簽元素
- html span標簽
- html font標簽
- html script標簽
- html px em pt網頁單位
- html ul li列表
- ol li列表
- dl dt dd標簽組
- table tr td表格
- table tr th表格
- html form表單
- html form input
- html form textarea文本區域
- html select下拉與跳轉(Html select)
- html iframe框架
- html網頁結構
- htm html shtml區別用法
- 網頁編碼charset
- UTF-8 GBK UTF8 GB2312區別聯系
- 先寫html還是先寫CSS
- 顯示擴展名
- html標簽大全集合
- html常用標簽
- 網頁源代碼是什么