前端面試題：從url到頁面展現，這之中發生了什么？

wdzgege 發布于2019-08-06 13:21 / 852人閱讀

摘要：比如對于的，瀏覽器實際上不知道到底是什么東西，需要查找網站所在服務器的地址，才能找到目標，這就是下文要說的域名解析。二域名解析當用戶在瀏覽器中輸入后你使用的電腦會發出一個請求到本地服務器。

這里markdown格式跟簡書不太一樣，排版可能不是很好，可以轉到我的簡書上看

我們平常在地址欄里輸入一些網址時，頁面很快就會出現，但在這之中到底發生了什么事情呢？

大概是這樣的流程：

在瀏覽器的地址欄中敲入了url

域名解析

服務器處理請求

瀏覽器處理

繪制網頁

一、在瀏覽器的地址欄中敲入了url

首先，我們要知道url是什么？

URL（Uniform Resource Locator），統一資源定位符，用于定位互聯網上的資源，實際上就是網站網址。url的格式一般為：

協議類型://<主機名>:<端口>/<路徑>/文件名

其中協議類型可以是http（超文本傳輸協議）、https、ftp（文件傳輸協議）、telnet（遠程登錄協議）、file等等。而http是最常見的網絡傳輸協議，https則是進行加密的網絡傳輸。

例如，我的簡書url為http://www.jianshu.com/u/b473784d730c，其中，“http”表示與web服務器通訊采用http協議，簡書web服務器域名為www.jianshu.com，u/b473784d730c表示所訪問的文件存在于web服務器上的路徑。

url格式中主機名冒號后面的數字是端口編號，因為一臺計算機常常會同時作為Web，FTP等服務器，端口編號用來告訴web服務器所在的主機要將請求交給哪個服務。默認情況下http服務的端口為80，不需要在url中輸入，如果web服務器采用的不是這一個默認端口，就需要寫明服務所用的端口。常見的協議默認端口如下：

協議類型	默認端口
http	80
ftp	21
https	443
telnet	23

IP是什么

IP是因特網中的每臺連接到網絡的計算機為實現相互通信而遵循的規則協議。每個處于互聯網中的設備都有IP 地址，形如 192.168.0.1，而127.0.0.1代表本機的 IP。IP又分為局域網IP和公網IP。而局域網 IP 和公網 IP 是有差別的。每個網站就是靠IP來定位的。

為了便于記憶或辨識，人們使用域名來登錄網站，每個域名背后有對應的IP地址。

比如對于 http://www.jianshu.com的URL，瀏覽器實際上不知道 www.jianshu.com到底是什么東西，需要查找www.jianshu.com網站所在服務器的IP地址，才能找到目標，這就是下文要說的域名解析。

二、域名解析

當用戶在瀏覽器中輸入url后,你使用的電腦會發出一個DNS請求到本地DNS服務器。本地DNS服務器一般都是你的網絡接入服務器商提供，比如中國電信，中國移動,DNS請求到達本地DNS服務器之后會有以下幾個步驟：

查找瀏覽器緩存

瀏覽器會檢查緩存中有沒有這個域名對應的解析過的IP地址，如果緩存中有，這個解析過程就將結束。Chrome瀏覽器看本身的DNS緩存時間比較方便，在地址欄輸入chrome://net-internals/#dns，就可以看到了

查找操作系統緩存

如果用戶的瀏覽器緩存中沒有，瀏覽器會從hosts文件查找是否有存儲DNS信息，查找是否有目標域名和對應的IP地址

查找路由器緩存

如果系統緩存中也找不到，那么查詢請求就會發向路由器，路由器一般會有自己的DNS緩存。

查找ISP(Internet Service Provider) DNS 緩存

如果路由器緩存中也找不到，那么就查詢ISP DNS 緩存服務器了。

我們都知道在我們的網絡配置中都會有"DNS服務器地址"這一項，操作系統會把這個域名發送給這里設置的DNS，比如114.114.114.114,也就是本地區的域名服務器，通常是提供給你接入互聯網的應用提供商。而114.114.114.114是國內移動、電信和聯通通用的DNS。

迭代查詢

如果前面都找不到DNS緩存的話，會有以下幾個步驟：

本地 DNS服務器將該請求轉發到互聯網上的根域（根域沒有名字，在DNS系統中就用一個空字符串來表示。例如www.baidu.com.現在的DNS系統都不會要求域名以.來結束，即www.baidu.com就可以解析了，但是現在很多DNS解析服務商還是會要求在填寫DNS記錄的時候以.來結尾域名。）

根域將所要查詢域名中的頂級域（比如要查詢www.baidu,com，該域名的頂級域就是com）的服務器IP地址返回到本地DNS。

本地DNS根據返回的IP地址，再向頂級域（就是com域）發送請求， com域服務器再將域名中的二級域（即www.baidu.com中的baidu.com）的IP地址返回給本地DNS。

本地DNS再向二級域發送請求進行查詢。

之后不斷重復這樣的過程，直到本地DNS服務器得到最終的查詢結果，并返回到主機。這時候主機才能通過域名訪問該網站。
下圖能很好的說明這個迭代查詢:

當查找到對應的IP地址之后，通過IP地址查找到對應的服務器，瀏覽器將用戶發起的http請求發送給服務器。例如：GET http://www.baidu.com/ HTTP/1.1

三、服務器處理請求

每臺服務器上都會安裝處理請求的應用——Web server。常見的web server產品有apache、nginx、IIS、Lighttpd等。

當web server接收到一個HTTP請求(request)，會返回一個HTTP響應(response)，例如送回一個HTML頁面。對于不同用戶發送的請求，會結合配置文件，把不同請求委托給服務器上處理對應請求的程序進行處理（例如CGI腳本，JSP腳本，servlets，ASP腳本，服務器端JavaScript，或者一些其它的服務器端技術等）。

無論它們(腳本)的目的如何，這些服務器端(server-side)的程序通常產生一個HTML的響應(response)來讓瀏覽器可以瀏覽。

那么如何處理請求？實際上就是后臺處理的工作。后臺開發現在有很多框架，但大部分都還是按照MVC設計模式進行搭建的。

處理的過程如下圖：

MVC的處理過程是這樣的：對于每一個用戶輸入的請求，首先被控制器接收，控制器決定用哪個模型來進行處理，然后模型用業務邏輯來處理用戶的請求并返回數據，最后控制器確定用哪個視圖模型，用相應的視圖格式化模型返回html字符串給瀏覽器，并通過顯示頁面呈現給用戶。

四、瀏覽器處理

接下來就是瀏覽器進行處理，通過后臺處理返回的HTML字符串被瀏覽器接受后被一句句讀取解析，html頁面經歷加載、解析、渲染。

加載

瀏覽器對一個html頁面的加載順序是從上而下的。如果加載過程中遇到外部css文件，瀏覽器另外發出一個請求，來獲取css文件。遇到圖片資源，瀏覽器也會另外發出一個請求，來獲取圖片資源。但是當文檔加載過程中遇到js文件，html文檔會掛起渲染（加載解析渲染同步）的線程，不僅要等待文檔中js文件加載完畢，還要等待解析執行完畢，才可以恢復html文檔的渲染線程。

解析

解析文檔是指將文檔轉化成為有意義的結構，也就是可讓代碼理解和使用的結構。解析得到的結果通常是代表了文檔結構的節點樹，它稱作解析樹或者語法樹，也就是DOM樹。如下圖：

css解析將css文件解析為樣式表對象。如下圖：

js解析文件在加載的同時也進行解析
如果想深入如何解析的話可以看瀏覽器的工作原理：新式網絡瀏覽器幕后揭秘這篇文章

渲染

即為構建渲染樹的過程，就是將DOM樹進行可視化表示。構建這棵樹是為了以正確的順序繪制文檔內容。

五、繪制網頁

瀏覽器根據 HTML 和 CSS 計算得到渲染樹，最終繪制到屏幕上

參考的文章：
前端經典面試題: 從輸入URL到頁面加載發生了什么？
What really happens when you navigate to a URL
從URL輸入到頁面展現
?MVC模型結構是什么
域名詳解
瀏覽器~加載，解析，渲染

由于本人的能力有限，如果哪里寫的不對的話，請指出！感謝您的觀看?

GPU云服務器云服務器前端從入門到精通前端頁面是什么面試題棧面試題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/61849.html

徹底理解從輸入URL與頁面展現

摘要：五瀏覽器繪制網頁繪制過程主要是結構與樣式的結合，以及行為動態效果的展現。之后會寫系列文章，歡迎圍觀主要參考文章基礎進階詳解與編碼前端面試題從到頁面展現，這之中發生了什么圖解流程概述：地址欄輸入URL ——> 域名解析 ——> 服務器處理請求 ——> 瀏覽器處理響應 ——> 瀏覽器繪制網頁一.地址欄輸入URL 認識URL showImg(https://segmentfault....

abson 2019-08-21 11:41 評論0 收藏0
前端面試題2017（篇幅長，附答案）

摘要：元素的位置通過以及屬性進行規定。表明請求被正常處理了。服務器返回的響應報文包括協議版本狀態碼解釋狀態碼的原因短語響應首部字段實體主體。瀏覽器接受響應，檢查里的狀態碼，并做出不同的處理方式。關于返回的狀態碼的具體說明看上個問題。說明：簡答題沒有固定答案，以下給出的答案是從別處摘錄或自己總結，有錯之處歡迎指出。 html 篇標簽上title和alt屬性的區別是什么？ alt是htm...

Cobub 2019-08-01 17:17 評論0 收藏0
前端面試題2017（篇幅長，附答案）

摘要：元素的位置通過以及屬性進行規定。表明請求被正常處理了。服務器返回的響應報文包括協議版本狀態碼解釋狀態碼的原因短語響應首部字段實體主體。瀏覽器接受響應，檢查里的狀態碼，并做出不同的處理方式。關于返回的狀態碼的具體說明看上個問題。說明：簡答題沒有固定答案，以下給出的答案是從別處摘錄或自己總結，有錯之處歡迎指出。 html 篇標簽上title和alt屬性的區別是什么？ alt是htm...

CODING 2019-08-20 18:21 評論0 收藏0
前端面試題2017（篇幅長，附答案）

摘要：元素的位置通過以及屬性進行規定。表明請求被正常處理了。服務器返回的響應報文包括協議版本狀態碼解釋狀態碼的原因短語響應首部字段實體主體。瀏覽器接受響應，檢查里的狀態碼，并做出不同的處理方式。關于返回的狀態碼的具體說明看上個問題。說明：簡答題沒有固定答案，以下給出的答案是從別處摘錄或自己總結，有錯之處歡迎指出。 html 篇標簽上title和alt屬性的區別是什么？ alt是htm...

eternalshallow 2019-08-29 13:00 評論0 收藏0