浏览器输入网址到浏览器渲染页面的过程
1)?在客戶端瀏覽器中輸入網址URL。
2)?發(fā)送到DNS(域名服務器)獲得域名對應的WEB服務器的IP地址。
3)?客戶端瀏覽器與WEB服務器建立TCP(傳輸控制協議)連接。
4)?客戶端瀏覽器向對應IP地址的WEB服務器發(fā)送相應的HTTP或HTTPS請求。
5)?WEB服務器響應請求，返回指定的URL數據或錯誤信息；如果設定重定向，則重定向到新的URL地址。
6)?客戶端瀏覽器下載數據，解析HTML源文件，解析的過程中實現對頁面的排版，解析完成后，在瀏覽器中顯示基礎的頁面。
7)?分析頁面中的超鏈接，顯示在當前頁面，重復以上過程直至沒有超鏈接需要發(fā)送，完成頁面的全部顯示。
1、輸入地址
當我們開始在瀏覽器中輸入網址的時候，瀏覽器其實就已經在智能的匹配可能得?url 了，他會從歷史記錄，書簽等地方，找到已經輸入的字符串可能對應的 url，然后給出智能提示，讓你可以補全url地址。對于 google的chrome 的瀏覽器，他甚至會直接從緩存中把網頁展示出來，就是說，你還沒有按下 enter，頁面就出來了。
?
2、瀏覽器查找域名的?IP?地址
1)?請求一旦發(fā)起，瀏覽器首先要做的事情就是解析這個域名，一般來說，瀏覽器會首先查看本地硬盤的?hosts 文件，看看其中有沒有和這個域名對應的規(guī)則，如果有的話就直接使用 hosts 文件里面的 ip 地址。
2)?如果在本地的?hosts 文件沒有能夠找到對應的 ip 地址，瀏覽器會發(fā)出一個 DNS請求到本地DNS服務器 。本地DNS服務器一般都是你的網絡接入服務器商提供，比如中國電信，中國移動。
3)?查詢你輸入的網址的DNS請求到達本地DNS服務器之后，本地DNS服務器會首先查詢它的緩存記錄，如果緩存中有此條記錄，就可以直接返回結果，此過程是遞歸的方式進行查詢。如果沒有，本地DNS服務器還要向DNS根服務器進行查詢。
4)?根DNS服務器沒有記錄具體的域名和IP地址的對應關系，而是告訴本地DNS服務器，你可以到域服務器上去繼續(xù)查詢，并給出域服務器的地址。這種過程是迭代的過程。
5)?本地DNS服務器繼續(xù)向域服務器發(fā)出請求，在這個例子中，請求的對象是.com域服務器。.com域服務器收到請求之后，也不會直接返回域名和IP地址的對應關系，而是告訴本地DNS服務器，你的域名的解析服務器的地址。
6)?最后，本地DNS服務器向域名的解析服務器發(fā)出請求，這時就能收到一個域名和IP地址對應關系，本地DNS服務器不僅要把IP地址返回給用戶電腦，還要把這個對應關系保存在緩存中，以備下次別的用戶查詢時，可以直接返回結果，加快網絡訪問。
知識擴展：
1)什么是DNS？
DNS（Domain Name System，域名系統），因特網上作為域名和IP地址相互映射的一個分布式數據庫，能夠使用戶更方便的訪問互聯網，而不用去記住能夠被機器直接讀取的IP數串。通過主機名，最終得到該主機名對應的IP地址的過程叫做域名解析（或主機名解析）。
通俗的講，我們更習慣于記住一個網站的名字，比如www.baidu.com,而不是記住它的ip地址，比如：167.23.10.2。而計算機更擅長記住網站的ip地址，而不是像www.baidu.com等鏈接。因為，DNS就相當于一個電話本，比如你要找www.baidu.com這個域名，那我翻一翻我的電話本，我就知道，哦，它的電話（ip）是167.23.10.2。
2)DNS查詢的兩種方式：遞歸查詢和迭代查詢
1、遞歸解析
?當局部DNS服務器自己不能回答客戶機的DNS查詢時，它就需要向其他DNS服務器進行查詢。此時有兩種方式，如圖所示的是遞歸方式。局部DNS服務器自己負責向其他DNS服務器進行查詢，一般是先向該域名的根域服務器查詢，再由根域名服務器一級級向下查詢。最后得到的查詢結果返回給局部DNS服務器，再由局部DNS服務器返回給客戶端。
2、迭代解析
當局部DNS服務器自己不能回答客戶機的DNS查詢時，也可以通過迭代查詢的方式進行解析，如圖所示。局部DNS服務器不是自己向其他DNS服務器進行查詢，而是把能解析該域名的其他DNS服務器的IP地址返回給客戶端DNS程序，客戶端DNS程序再繼續(xù)向這些DNS服務器進行查詢，直到得到查詢結果為止。也就是說，迭代解析只是幫你找到相關的服務器而已，而不會幫你去查。比如說：baidu.com的服務器ip地址在192.168.4.5這里，你自己去查吧，本人比較忙，只能幫你到這里了。
?
3、瀏覽器向 web 服務器發(fā)送一個 HTTP 請求
拿到域名對應的IP地址之后，瀏覽器會以一個隨機端口（1024<端口<65535）向服務器的WEB程序（常用的有httpd,nginx等）80端口發(fā)起TCP的連接請求。這個連接請求到達服務器端后（這中間通過各種路由設備，局域網內除外），進入到網卡，然后是進入到內核的TCP/IP協議棧（用于識別該連接請求，解封包，一層一層的剝開），還有可能要經過Netfilter防火墻（屬于內核的模塊）的過濾，最終到達WEB程序，最終建立了TCP/IP的連接。
建立了TCP連接之后，發(fā)起一個http請求。一個典型的 http request header 一般需要包括請求的方法，例如 GET 或者 POST 等，不常用的還有 PUT 和 DELETE 、HEAD、OPTION以及 TRACE 方法，一般的瀏覽器只能發(fā)起 GET 或者 POST 請求。
?
客戶端向服務器發(fā)起http請求的時候，會有一些請求信息，請求信息包含三個部分：
| 請求方法URI協議/版本
| 請求頭(Request Header)
| 請求正文：
?
下面是一個完整的HTTP請求例子：
GET/sample.jsp
HTTP/1.1 ??Accept:image/gif.image/jpeg,*/* ??
Accept-Language:zh-cn ??
Connection:Keep-Alive ??
Host:localhost ??
User-Agent:Mozila/4.0(compatible;MSIE5.01;Window NT5.0) ??
Accept-Encoding:gzip,deflate ??
?
username=jinqiao&password=1234
?注意：最后一個請求頭之后是一個空行，發(fā)送回車符和換行符，通知服務器以下不再有請求頭。
（1）請求的第一行是“方法URL議/版本”：GET/sample.jsp HTTP/1.1
（2）請求頭(Request Header)
請求頭包含許多有關的客戶端環(huán)境和請求正文的有用信息。例如，請求頭可以聲明瀏覽器所用的語言，請求正文的長度等。
Accept:image/gif.image/jpeg.*/* ??
Accept-Language:zh-cn ??
Connection:Keep-Alive ??
Host:localhost ??
User-Agent:Mozila/4.0(compatible:MSIE5.01:Windows NT5.0) ??
Accept-Encoding:gzip,deflate.
（3）請求正文
請求頭和請求正文之間是一個空行，這個行非常重要，它表示請求頭已經結束，接下來的是請求正文。請求正文中可以包含客戶提交的查詢字符串信息：
username=jinqiao&password=1234
知識擴展：
1）TCP三次握手
?
第一次握手：客戶端A將標志位SYN置為1,隨機產生一個值為seq=J（J的取值范圍為=1234567）的數據包到服務器，客戶端A進入SYN_SENT狀態(tài)，等待服務端B確認；
?
第二次握手：服務端B收到數據包后由標志位SYN=1知道客戶端A請求建立連接，服務端B將標志位SYN和ACK都置為1，ack=J+1，隨機產生一個值seq=K，并將該數據包發(fā)送給客戶端A以確認連接請求，服務端B進入SYN_RCVD狀態(tài)。
?
第三次握手：客戶端A收到確認后，檢查ack是否為J+1，ACK是否為1，如果正確則將標志位ACK置為1，ack=K+1，并將該數據包發(fā)送給服務端B，服務端B檢查ack是否為K+1，ACK是否為1，如果正確則連接建立成功，客戶端A和服務端B進入ESTABLISHED狀態(tài)，完成三次握手，隨后客戶端A與服務端B之間可以開始傳輸數據了。
?
2）TCP四次揮手
?
第一次揮手：Client發(fā)送一個FIN，用來關閉Client到Server的數據傳送，Client進入FIN_WAIT_1狀態(tài)。
?
第二次揮手：Server收到FIN后，發(fā)送一個ACK給Client，確認序號為收到序號+1（與SYN相同，一個FIN占用一個序號），Server進入CLOSE_WAIT狀態(tài)。
?
第三次揮手：Server發(fā)送一個FIN，用來關閉Server到Client的數據傳送，Server進入LAST_ACK狀態(tài)。
?
第四次揮手：Client收到FIN后，Client進入TIME_WAIT狀態(tài)，接著發(fā)送一個ACK給Server，確認序號為收到序號+1，Server進入CLOSED狀態(tài)，完成四次揮手。
?
3）為什么建立連接是三次握手，而關閉連接卻是四次揮手呢？
?
這是因為服務端在LISTEN狀態(tài)下，收到建立連接請求的SYN報文后，把ACK和SYN放在一個報文里發(fā)送給客戶端。而關閉連接時，當收到對方的FIN報文時，僅僅表示對方不再發(fā)送數據了但是還能接收數據，己方也未必全部數據都發(fā)送給對方了，所以己方可以立即close，也可以發(fā)送一些數據給對方后，再發(fā)送FIN報文給對方來表示同意現在關閉連接，因此，己方ACK和FIN一般都會分開發(fā)送。
?
4、服務器的永久重定向響應
服務器給瀏覽器響應一個301永久重定向響應，這樣瀏覽器就會訪問“http://www.google.com/” 而非“http://google.com/”。
?
為什么服務器一定要重定向而不是直接發(fā)送用戶想看的網頁內容呢？其中一個原因跟搜索引擎排名有關。如果一個頁面有兩個地址，就像http://www.yy.com/和http://yy.com/，搜索引擎會認為它們是兩個網站，結果造成每個搜索鏈接都減少從而降低排名。而搜索引擎知道301永久重定向是什么意思，這樣就會把訪問帶www的和不帶www的地址歸到同一個網站排名下。還有就是用不同的地址會造成緩存友好性變差，當一個頁面有好幾個名字時，它可能會在緩存里出現好幾次。
?
擴展知識
?
1）301和302的區(qū)別。
301和302狀態(tài)碼都表示重定向，就是說瀏覽器在拿到服務器返回的這個狀態(tài)碼后會自動跳轉到一個新的URL地址，這個地址可以從響應的Location首部中獲取（用戶看到的效果就是他輸入的地址A瞬間變成了另一個地址B）——這是它們的共同點。
?
301表示舊地址A的資源已經被永久地移除了（這個資源不可訪問了），搜索引擎在抓取新內容的同時也將舊的網址交換為重定向之后的網址；
?
302表示舊地址A的資源還在（仍然可以訪問），這個重定向只是臨時地從舊地址A跳轉到地址B，搜索引擎會抓取新的內容而保存舊的網址。 SEO302好于301
?
2）重定向原因：
（1）網站調整（如改變網頁目錄結構）；
（2）網頁被移到一個新地址；
（3）網頁擴展名改變(如應用需要把.php改成.Html或.shtml)。
這種情況下，如果不做重定向，則用戶收藏夾或搜索引擎數據庫中舊地址只能讓訪問客戶得到一個404頁面錯誤信息，訪問流量白白喪失；再者某些注冊了多個域名的網站，也需要通過重定向讓訪問這些域名的用戶自動跳轉到主站點等。
?
3）什么時候進行301或者302跳轉呢？
?當一個網站或者網頁24—48小時內臨時移動到一個新的位置，這時候就要進行302跳轉，而使用301跳轉的場景就是之前的網站因為某種原因需要移除掉，然后要到新的地址訪問，是永久性的。
清晰明確而言：使用301跳轉的大概場景如下：
1、域名到期不想續(xù)費（或者發(fā)現了更適合網站的域名），想換個域名。
2、在搜索引擎的搜索結果中出現了不帶www的域名，而帶www的域名卻沒有收錄，這個時候可以用301重定向來告訴搜索引擎我們目標的域名是哪一個。
3、空間服務器不穩(wěn)定，換空間的時候。
5、瀏覽器跟蹤重定向地址
?現在瀏覽器知道了?"http://www.google.com/"才是要訪問的正確地址，所以它會發(fā)送另一個http請求。這里沒有啥好說的
?
6、服務器處理請求
經過前面的重重步驟，我們終于將我們的http請求發(fā)送到了服務器這里，其實前面的重定向已經是到達服務器了，那么，服務器是如何處理我們的請求的呢？
?
后端從在固定的端口接收到TCP報文開始，它會對TCP連接進行處理，對HTTP協議進行解析，并按照報文格式進一步封裝成HTTP Request對象，供上層使用。
?
一些大一點的網站會將你的請求到反向代理服務器中，因為當網站訪問量非常大，網站越來越慢，一臺服務器已經不夠用了。于是將同一個應用部署在多臺服務器上，將大量用戶的請求分配給多臺機器處理。此時，客戶端不是直接通過HTTP協議訪問某網站應用服務器，而是先請求到Nginx，Nginx再請求應用服務器，然后將結果返回給客戶端，這里Nginx的作用是反向代理服務器。同時也帶來了一個好處，其中一臺服務器萬一掛了，只要還有其他服務器正常運行，就不會影響用戶使用。
通過Nginx的反向代理，我們到達了web服務器，服務端腳本處理我們的請求，訪問我們的數據庫，獲取需要獲取的內容等等，當然，這個過程涉及很多后端腳本的復雜操作。由于對這一塊不熟，所以這一塊只能介紹這么多了。
?
擴展閱讀：
1）什么是反向代理？
客戶端本來可以直接通過HTTP協議訪問某網站應用服務器，網站管理員可以在中間加上一個Nginx，客戶端請求Nginx，Nginx請求應用服務器，然后將結果返回給客戶端，此時Nginx就是反向代理服務器。
?
7、服務器返回一個 HTTP 響應
經過前面的6個步驟，服務器收到了我們的請求，也處理我們的請求，到這一步，它會把它的處理結果返回，也就是返回一個HTPP響應。
?
HTTP響應與HTTP請求相似，HTTP響應也由3個部分構成，分別是：
l 狀態(tài)行
l 響應頭(Response Header)
l 響應正文
?
HTTP/1.1 200 OK ??
Date: Sat, 31 Dec 2005 23:59:59 GMT ??
Content-Type: text/html;charset=ISO-8859-1 ??Content-Length: 122 ??
＜html＞ ??
＜head＞ ??
＜title＞http＜/title＞ ??
＜/head＞ ??
＜body＞ ??
＜!-- body goes here --＞ ??
＜/body＞ ??
＜/html＞
?
狀態(tài)行由協議版本、數字形式的狀態(tài)代碼、及相應的狀態(tài)描述，各元素之間以空格分隔。
格式: ???HTTP-Version Status-Code Reason-Phrase CRLF
例如: ???HTTP/1.1 200 OK \r\n
-- 協議版本：是用http1.0還是其他版本
-- 狀態(tài)描述：狀態(tài)描述給出了關于狀態(tài)代碼的簡短的文字描述。比如狀態(tài)代碼為200時的描述為 ok
-- 狀態(tài)代碼：狀態(tài)代碼由三位數字組成，第一個數字定義了響應的類別，且有五種可能取值。如下
?
1xx：信息性狀態(tài)碼，表示服務器已接收了客戶端請求，客戶端可繼續(xù)發(fā)送請求。
?
100 Continue
?
101 Switching Protocols
?
2xx：成功狀態(tài)碼，表示服務器已成功接收到請求并進行處理。200 OK 表示客戶端請求成功
?
204 No Content 成功，但不返回任何實體的主體部分
?
206 Partial Content 成功執(zhí)行了一個范圍（Range）請求
?
3xx：重定向狀態(tài)碼，表示服務器要求客戶端重定向。
?
301 Moved Permanently 永久性重定向，響應報文的Location首部應該有該資源的新URL
?
302 Found 臨時性重定向，響應報文的Location首部給出的URL用來臨時定位資源
?
303 See Other 請求的資源存在著另一個URI，客戶端應使用GET方法定向獲取請求的資源
?
304 Not Modified 服務器內容沒有更新，可以直接讀取瀏覽器緩存
?
307 Temporary Redirect 臨時重定向。與302 Found含義一樣。302禁止POST變換為GET，但實際使用時并不一定，307則更多瀏覽器可能會遵循這一標準，但也依賴于瀏覽器具體實現
?
4xx：客戶端錯誤狀態(tài)碼，表示客戶端的請求有非法內容。
?
400 Bad Request 表示客戶端請求有語法錯誤，不能被服務器所理解
?
401 Unauthonzed 表示請求未經授權，該狀態(tài)代碼必須與 WWW-Authenticate 報頭域一起使用
?
403 Forbidden 表示服務器收到請求，但是拒絕提供服務，通常會在響應正文中給出不提供服務的原因
?
404 Not Found 請求的資源不存在，例如，輸入了錯誤的URL
?
5xx：服務器錯誤狀態(tài)碼，表示服務器未能正常處理客戶端的請求而出現意外錯誤。
?
500 Internel Server Error 表示服務器發(fā)生不可預期的錯誤，導致無法完成客戶端的請求
?
503 Service Unavailable 表示服務器當前不能夠處理客戶端的請求，在一段時間之后，服務器可能會恢復正常
?
8、瀏覽器顯示 HTML
在瀏覽器沒有完整接受全部HTML文檔時，它就已經開始顯示這個頁面了，瀏覽器是如何把頁面呈現在屏幕上的呢？不同瀏覽器可能解析的過程不太一樣，這里我們只介紹webkit的渲染過程，下圖對應的就是WebKit渲染的過程，這個過程包括：
?
解析html以構建dom樹 -> 構建render樹 -> 布局render樹 -> 繪制render樹
?
瀏覽器在解析html文件時，會”自上而下“加載，并在加載過程中進行解析渲染。在解析過程中，如果遇到請求外部資源時，如圖片、外鏈的CSS、iconfont等，請求過程是異步的，并不會影響html文檔進行加載。
?
解析過程中，瀏覽器首先會解析HTML文件構建DOM樹，然后解析CSS文件構建渲染樹，等到渲染樹構建完成后，瀏覽器開始布局渲染樹并將其繪制到屏幕上。這個過程比較復雜，涉及到兩個概念: reflow(回流)和repain(重繪)。
?
DOM節(jié)點中的各個元素都是以盒模型的形式存在，這些都需要瀏覽器去計算其位置和大小等，這個過程稱為reflow;當盒模型的位置,大小以及其他屬性，如顏色,字體,等確定下來之后，瀏覽器便開始繪制內容，這個過程稱為repain。
?
頁面在首次加載時必然會經歷reflow和repain。reflow和repain過程是非常消耗性能的，尤其是在移動設備上，它會破壞用戶體驗，有時會造成頁面卡頓。所以我們應該盡可能少的減少reflow和repain。
?
當文檔加載過程中遇到js文件，html文檔會掛起渲染（加載解析渲染同步）的線程，不僅要等待文檔中js文件加載完畢，還要等待解析執(zhí)行完畢，才可以恢復html文檔的渲染線程。因為JS有可能會修改DOM，最為經典的document.write，這意味著，在JS執(zhí)行完成前，后續(xù)所有資源的下載可能是沒有必要的，這是js阻塞后續(xù)資源下載的根本原因。所以我明平時的代碼中，js是放在html文檔末尾的。
?
JS的解析是由瀏覽器中的JS解析引擎完成的，比如谷歌的是V8。JS是單線程運行，也就是說，在同一個時間內只能做一件事，所有的任務都需要排隊，前一個任務結束，后一個任務才能開始。但是又存在某些任務比較耗時，如IO讀寫等，所以需要一種機制可以先執(zhí)行排在后面的任務，這就是：同步任務(synchronous)和異步任務(asynchronous)。
?
JS的執(zhí)行機制就可以看做是一個主線程加上一個任務隊列(task queue)。同步任務就是放在主線程上執(zhí)行的任務，異步任務是放在任務隊列中的任務。所有的同步任務在主線程上執(zhí)行，形成一個執(zhí)行棧;異步任務有了運行結果就會在任務隊列中放置一個事件；腳本運行時先依次運行執(zhí)行棧，然后會從任務隊列里提取事件，運行任務隊列中的任務，這個過程是不斷重復的，所以又叫做事件循環(huán)(Event loop)。
?
9、瀏覽器發(fā)送請求獲取嵌入在 HTML 中的資源（如圖片、音頻、視頻、CSS、JS等等）
其實這個步驟可以并列在步驟8中，在瀏覽器顯示HTML時，它會注意到需要獲取其他地址內容的標簽。這時，瀏覽器會發(fā)送一個獲取請求來重新獲得這些文件。比如我要獲取外圖片，CSS，JS文件等，類似于下面的鏈接：
?
圖片：http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif
?
CSS式樣表：http://static.ak.fbcdn.net/rsrc.php/z448Z/hash/2plh8s4n.css
?
JavaScript 文件：http://static.ak.fbcdn.net/rsrc.php/zEMOA/hash/c8yzb6ub.js
?
這些地址都要經歷一個和HTML讀取類似的過程。所以瀏覽器會在DNS中查找這些域名，發(fā)送請求，重定向等等...
不像動態(tài)頁面，靜態(tài)文件會允許瀏覽器對其進行緩存。有的文件可能會不需要與服務器通訊，而從緩存中直接讀取，或者可以放到CDN中。
?
?
?
轉載：https://blog.csdn.net/qq_31965515/article/details/81295151
轉載于:https://www.cnblogs.com/wzp-monkey/p/10446354.html
總結
以上是生活随笔為你收集整理的浏览器输入网址到浏览器渲染页面的过程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HDU4631Sad Love Stor
- 下一篇： win10只有edge浏览器能上网的解决