摘要:動態(tài)映射利用來進(jìn)行域名解析,在專門的服務(wù)器上配置主機(jī)到地址的映射。前兩者都無效的情況下,向路由器發(fā)送查詢的請求,或者直接向用戶定義的服務(wù)地址發(fā)送域名解析的請求。
【前端芝士樹】從瀏覽器搜索框輸入網(wǎng)址到網(wǎng)頁呈現(xiàn)發(fā)生了什么?
這個(gè)也是在前端面試中問得比較多的一個(gè)問題了,文章篇幅有限盡可能關(guān)注一些前端開發(fā)中不太會遇到的知識點(diǎn),如果想擴(kuò)展的話請點(diǎn)擊引用文章吧,也歡迎評論,后續(xù)會繼續(xù)補(bǔ)充。0. 大致流程
看圖的話更容易記一些,
下面將會基于這幾個(gè)過程進(jìn)行描述。
首先需要搞明白的是,域名和ip地址是不同的,域名是為了更方便記憶ip所產(chǎn)生的,ip才是服務(wù)器在網(wǎng)絡(luò)上的真實(shí)地址。
IP地址是用來唯一標(biāo)識互聯(lián)網(wǎng)上計(jì)算機(jī)的邏輯地址,讓電腦之間可以相互通信,每臺連網(wǎng)計(jì)算機(jī)都依靠IP地址來互相區(qū)分,相互聯(lián)系。IP地址通常指的是網(wǎng)絡(luò)中的主機(jī),而域名則通常表示一個(gè)網(wǎng)站,一個(gè)域名可以綁定到多個(gè)ip上,多個(gè)域名也可以綁定到一個(gè)ip上。
為了讓域名和地址能夠相互轉(zhuǎn)換,就需要對其進(jìn)行映射,有兩種方式:
靜態(tài)映射 在瀏覽器端存儲一份域名到ip地址的映射表,只供本設(shè)備使用。
動態(tài)映射 利用DNS來進(jìn)行域名解析,在專門的DNS服務(wù)器上配置主機(jī)到IP地址的映射。
DNS(Domain Name System,域名系統(tǒng)),萬維網(wǎng)上作為域名和IP地址相互映射的一個(gè)分布式數(shù)據(jù)庫,能夠使用戶更方便的訪問互聯(lián)網(wǎng),而不用去記住能夠被機(jī)器直接讀取的IP數(shù)串。DNS協(xié)議運(yùn)行在UDP協(xié)議之上,使用端口號53。DNS可供所有網(wǎng)絡(luò)上的節(jié)點(diǎn)使用。1.1 域名解析 && 瀏覽器查詢ip的過程
瀏覽器從緩存的映射表中尋找域名對應(yīng)的記錄,如果存在則直接返回IP
緩存中如果沒有記錄命中,則進(jìn)行系統(tǒng)調(diào)用查詢hosts,查找用戶定義的IP映射。
前兩者都無效的情況下, 向路由器發(fā)送DNS查詢的請求,或者直接向用戶定義的DNS服務(wù)地址發(fā)送域名解析的請求。
DNS服務(wù)器會從根域名服務(wù)器開始遞歸搜索,從.com頂級域名服務(wù)器,到baidu的域名服務(wù)器。2. 建立TCP連接
TCP/IP協(xié)議 / 四層模型 / 三次握手
在 TCP/IP協(xié)議組 中包含一系列用于處理數(shù)據(jù)通信的協(xié)議:
TCP (傳輸控制協(xié)議) - 應(yīng)用程序之間通信
UDP (用戶數(shù)據(jù)包協(xié)議) - 應(yīng)用程序之間的簡單通信
IP (網(wǎng)際協(xié)議) - 計(jì)算機(jī)之間的通信
ICMP (因特網(wǎng)消息控制協(xié)議) - 針對錯誤和狀態(tài)
DHCP (動態(tài)主機(jī)配置協(xié)議) - 針對動態(tài)尋址
...
如圖所示
TCP / IP 協(xié)議組
TCP/IP 意味著 TCP 和 IP 在一起協(xié)同工作。
TCP 負(fù)責(zé)應(yīng)用軟件(比如你的瀏覽器)和網(wǎng)絡(luò)軟件之間的通信。
IP 負(fù)責(zé)計(jì)算機(jī)之間的通信。
TCP 負(fù)責(zé)將數(shù)據(jù)分割并裝入 IP 包,然后在它們到達(dá)的時(shí)候重新組合它們。
IP 負(fù)責(zé)將包發(fā)送至接受者。
在這其中需要著重了解一下的就是數(shù)據(jù)是如何進(jìn)行處理的、TCP、IP以及TCP和UDP的區(qū)別。
數(shù)據(jù)處理流程 TCP三次握手 TCP與UDP的區(qū)別TCP 是面向連接的、可靠的流協(xié)議。流就是指不間斷的數(shù)據(jù)結(jié)構(gòu),當(dāng)應(yīng)用程序采用 TCP 發(fā)送消息時(shí),雖然可以保證發(fā)送的順序,但還是猶如沒有任何間隔的數(shù)據(jù)流發(fā)送給接收端。TCP 為提供可靠性傳輸,實(shí)行“順序控制”或“重發(fā)控制”機(jī)制。此外還具備“流控制(流量控制)”、“擁塞控制”、提高網(wǎng)絡(luò)利用率等眾多功能。
UDP 是不具有可靠性的數(shù)據(jù)報(bào)協(xié)議。細(xì)微的處理它會交給上層的應(yīng)用去完成。在 UDP 的情況下,雖然可以確保發(fā)送消息的大小,卻不能保證消息一定會到達(dá)。因此,應(yīng)用有時(shí)會根據(jù)自己的需要進(jìn)行重發(fā)處理。
TCP 和 UDP 的優(yōu)缺點(diǎn)無法簡單地、絕對地去做比較:TCP 用于在傳輸層有必要實(shí)現(xiàn)可靠傳輸?shù)那闆r;而在一方面,UDP 主要用于那些對高速傳輸和實(shí)時(shí)性有較高要求的通信或廣播通信。TCP 和 UDP 應(yīng)該根據(jù)應(yīng)用的目的按需使用。
瀏覽器利用IP直接與網(wǎng)站主機(jī)通信。瀏覽器發(fā)出TCP(SYN標(biāo)志位為1)連接請求,主機(jī)返回TCP(SYN,ACK標(biāo)志位均為1)應(yīng)答報(bào)文,瀏覽器收到應(yīng)答報(bào)文發(fā)現(xiàn)ACK標(biāo)志位為1,表示連接請求確認(rèn)。瀏覽器返回TCP()確認(rèn)報(bào)文,主機(jī)收到確認(rèn)報(bào)文,三次握手,TCP連接建立完成。
3. 服務(wù)器響應(yīng)請求在TCP連接建立完成后,瀏覽器向主機(jī)發(fā)起一個(gè)HTTP-GET方法報(bào)文請求。請求中包含訪問的URL,也就是http://www.baidu.com/ ,還有User-Agent用戶瀏覽器操作系統(tǒng)信息,編碼等。
3.1 常見的服務(wù)器狀態(tài)碼 1** 請求狀態(tài)100 Continue 繼續(xù),一般在發(fā)送post請求時(shí),已發(fā)送了http、header之后服務(wù)端將返回此信息,表示確認(rèn),之后發(fā)送具體參數(shù)信息
2** 響應(yīng)狀態(tài)200 OK 正常返回信息
201 Created 請求成功并且服務(wù)器創(chuàng)建了新的資源
3** 資源狀態(tài)301 Moved Permanently 永久重定向,請求的網(wǎng)頁已永久移動到新位置。
4** 網(wǎng)頁狀態(tài)400 Bad Request 服務(wù)器無法理解請求的格式,客戶端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請求。
404 Not Found 找不到如何與 URI 相匹配的資源。
5** 服務(wù)器狀態(tài)500 Internal Server Error 最常見的服務(wù)器端錯誤。
3.2 重定向的作用重定向是為了負(fù)載均衡或者導(dǎo)入流量,提高SEO排名。利用一個(gè)前端服務(wù)器接受請求,然后負(fù)載到不同的主機(jī)上,可以大大提高站點(diǎn)的業(yè)務(wù)并發(fā)處理能力;重定向也可將多個(gè)域名的訪問,集中到一個(gè)站點(diǎn);由于baidu.com,www.baidu.com會被搜索引擎認(rèn)為是兩個(gè)網(wǎng)站,照成每個(gè)的鏈接數(shù)都會減少從而降低排名,永久重定向會將兩個(gè)地址關(guān)聯(lián)起來,搜索引擎會認(rèn)為是同一個(gè)網(wǎng)站,從而提高排名。
4. 瀏覽器渲染呈現(xiàn)瀏覽器拿到響應(yīng)的頁面代碼,將其解析呈現(xiàn)在用戶面前。
中間會涉及到瀏覽器的渲染步驟、JS引擎、渲染引擎、事件響應(yīng)等知識點(diǎn)。
后續(xù)會繼續(xù)補(bǔ)充,歡迎收藏和點(diǎn)贊。
參考文章
W3School - TCP/IP 簡介
一篇文章帶你熟悉 TCP/IP 協(xié)議(網(wǎng)絡(luò)協(xié)議篇二)
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/53042.html
摘要:這是一次失敗的面經(jīng)但是吃一塹才能長一智不是嗎字節(jié)跳動校招面經(jīng)前端開發(fā)崗一介紹以及項(xiàng)目經(jīng)歷吧啦吧啦此處省略字面試官會從項(xiàng)目經(jīng)歷入手,考察項(xiàng)目中遇到的難題,以及解決方法,強(qiáng)調(diào)個(gè)人的努力以及在解決過程中扮演的角色是主導(dǎo)還是參與。 這是一次失敗的面經(jīng)……但是吃一塹才能長一智不是嗎? 字節(jié)跳動2019校招面經(jīng) - 前端開發(fā)崗(一) 1. 介紹以及項(xiàng)目經(jīng)歷 吧啦吧啦……此處省略10000字 面試官...
摘要:定義文檔資源的名稱二域名解析在瀏覽器輸入網(wǎng)址后,首先要經(jīng)過域名解析,因?yàn)闉g覽器并不能直接通過域名找到對應(yīng)的服務(wù)器,而是要通過地址。什么是域名解析協(xié)議提供通過域名查找地址,或逆向從地址反查域名的服務(wù)。 前言 打開瀏覽器從輸入網(wǎng)址到網(wǎng)頁呈現(xiàn)在大家面前,背后到底發(fā)生了什么?經(jīng)歷怎么樣的一個(gè)過程?先給大家來張總體流程圖,具體步驟請看下文分解!本文首發(fā)地址為GitHub博客,寫文章不易,請多多支...
摘要:定義文檔資源的名稱二域名解析在瀏覽器輸入網(wǎng)址后,首先要經(jīng)過域名解析,因?yàn)闉g覽器并不能直接通過域名找到對應(yīng)的服務(wù)器,而是要通過地址。什么是域名解析協(xié)議提供通過域名查找地址,或逆向從地址反查域名的服務(wù)。 前言 打開瀏覽器從輸入網(wǎng)址到網(wǎng)頁呈現(xiàn)在大家面前,背后到底發(fā)生了什么?經(jīng)歷怎么樣的一個(gè)過程?先給大家來張總體流程圖,具體步驟請看下文分解!本文首發(fā)地址為GitHub博客,寫文章不易,請多多支...
摘要:瀏覽器顯示及交互背后的原理引子因?yàn)楣P者愛編程的光頭強(qiáng)近期在寫一本關(guān)于小程序入門的書籍。不基于瀏覽器背后的運(yùn)行原理,是很難說清楚虛擬被引入的真正原因和最大好處的。它是瀏覽器的核心部分。 瀏覽器顯示及交互背后的原理 引子 因?yàn)楣P者(愛編程的光頭強(qiáng))近期在寫一本關(guān)于小程序入門的書籍。其中有一章是介紹虛擬DOM的,它是位于Javascript和真正DOM之間的一層緩存層。為什么引入它,為什么它...
摘要:瀏覽器顯示及交互背后的原理引子因?yàn)楣P者愛編程的光頭強(qiáng)近期在寫一本關(guān)于小程序入門的書籍。不基于瀏覽器背后的運(yùn)行原理,是很難說清楚虛擬被引入的真正原因和最大好處的。它是瀏覽器的核心部分。 瀏覽器顯示及交互背后的原理 引子 因?yàn)楣P者(愛編程的光頭強(qiáng))近期在寫一本關(guān)于小程序入門的書籍。其中有一章是介紹虛擬DOM的,它是位于Javascript和真正DOM之間的一層緩存層。為什么引入它,為什么它...
閱讀 3662·2021-11-15 11:37
閱讀 2990·2021-11-12 10:36
閱讀 4449·2021-09-22 15:51
閱讀 2393·2021-08-27 16:18
閱讀 898·2019-08-30 15:44
閱讀 2176·2019-08-30 10:58
閱讀 1790·2019-08-29 17:18
閱讀 3288·2019-08-28 18:25