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