瀏覽器從輸入U(xiǎn)RL到渲染完頁(yè)面的整個(gè)過(guò)程是怎么樣的？

 瀏覽器的主要功能是將用戶選擇的web資源呈現(xiàn)出來(lái)，它從服務(wù)器請(qǐng)求資源，并將得到的資源（HTML，PDF，image等等）顯示在瀏覽器窗口。那么從用戶敲入U(xiǎn)RL到完整渲染出來(lái)，經(jīng)歷了什么過(guò)程呢？也就是說(shuō)整個(gè)瀏覽器的工作流程是怎樣的呢？

整個(gè)過(guò)程大致如下：

       1. 輸入U(xiǎn)RL，瀏覽器根據(jù)域名尋找IP地址
 2. 瀏覽器發(fā)送一個(gè)HTTP請(qǐng)求給服務(wù)器，如果服務(wù)器返回以301之類的重定向，瀏覽器根據(jù)相應(yīng)頭中的location再次發(fā)送請(qǐng)求
 3. 服務(wù)器接受請(qǐng)求，處理請(qǐng)求生成html代碼，返回給瀏覽器，這時(shí)的html頁(yè)面代碼可能是經(jīng)過(guò)壓縮的
 4. 瀏覽器接收服務(wù)器響應(yīng)結(jié)果，如果有壓縮則首先進(jìn)行解壓處理
 5. 瀏覽器開(kāi)始顯示HTML

     6. 瀏覽器發(fā)送請(qǐng)求，以獲取嵌入在HTML中的對(duì)象。在瀏覽器顯示HTML時(shí)，它會(huì)注意到需要獲取其他地址內(nèi)容的標(biāo)簽。

這時(shí)，瀏覽器會(huì)發(fā)送一個(gè)獲取請(qǐng)求來(lái)重新獲得這些文件——包括CSS/JS/圖片等資源，這些資源的地址都要經(jīng)歷一個(gè)和HTML讀取類似的過(guò)程。所以瀏覽器會(huì)在DNS中查找這些域名，發(fā)送請(qǐng)求，重定向等等…

 那么，一個(gè)頁(yè)面，究竟是如何從我們輸入一個(gè)網(wǎng)址到最后完整的呈現(xiàn)在我們面前的呢？還需要了解一下瀏覽器是如何渲染的。
首先是用戶輸入url，瀏覽器通過(guò)DNS查詢要訪問(wèn)頁(yè)面的IP，查詢到后，瀏覽器會(huì)替用戶去向這個(gè)IP地址發(fā)送請(qǐng)求拉取html文件，瀏覽器會(huì)派GUI線程去解析加載回來(lái)的html文件

html解析過(guò)程：01機(jī)器碼-》charter字符-》tokens令牌-》node節(jié)點(diǎn)-》dom樹(shù)

解析CSS，構(gòu)建CSSOM
有了骨骼以后，接下來(lái)就是確定長(zhǎng)相了，這是CSS要做的事情。和解析HTML類似，CSS解析各種樣式信息，生成網(wǎng)頁(yè)的“外觀”。但是有個(gè)問(wèn)題，CSSA（class選擇器）說(shuō)，我喜歡藍(lán)色，我家網(wǎng)頁(yè)的所有文字都要是藍(lán)色。CSSB（id選擇器）就不樂(lè)意了，憑啥啊，我喜歡紅色，我家的標(biāo)題必須是紅色。由于id選擇器是親生的，那就標(biāo)題是紅色的吧，于是不同選擇器就有了不同的權(quán)重。最后生成CSSOM

因?yàn)闉g覽器解析文檔，如果遇到請(qǐng)求外部資源時(shí)，如圖像,iconfont,JS等。瀏覽器將下載該資源。請(qǐng)求過(guò)程是異步的，并不會(huì)影響HTML文檔進(jìn)行加載，當(dāng)遇到 <script>標(biāo)簽的時(shí)候，會(huì)立即解析腳本，停止解析文檔（因?yàn)镴S可以操作DOM和CSS，可能會(huì)改動(dòng)DOM和CSS，所以繼續(xù)解析會(huì)造成浪費(fèi)）。如果腳本是外部的，會(huì)等待腳本下載完畢，再繼續(xù)解析文檔。所以常見(jiàn)的做法是將js放到頁(yè)腳部分。

   

構(gòu)建Render Tree（呈現(xiàn)樹(shù)）

骨骼和長(zhǎng)相都有了，那就組合到一起唄，DOM和CSSOM根據(jù)一定的規(guī)則組合起來(lái)生成了Render Tree。

 布局（Layout）

創(chuàng)建渲染樹(shù)后，接下來(lái)正式開(kāi)工，確定各個(gè)元素的位置，包括元素在視圖中的位置以及自身的大小，將其安置在瀏覽器的正確位置。

繪制（Painting）

這個(gè)階段，瀏覽器會(huì)遍歷呈現(xiàn)樹(shù)，并調(diào)用呈現(xiàn)器的“paint”方法，將前期所有的工作結(jié)合到一起，將網(wǎng)頁(yè)的內(nèi)容呈現(xiàn)出來(lái)。如果網(wǎng)頁(yè)只是HTML+CSS，那么可能就到此結(jié)束了，but還有神奇的JS呢，請(qǐng)看回流和重繪。

回流（Reflow）和重繪（Repaint）

如果這個(gè)時(shí)候我寫了用JS操作了DOM，將網(wǎng)頁(yè)的所有元素設(shè)置float:left，那么問(wèn)題來(lái)了，上面兩步的工作白干了，推翻從新再來(lái)。如果將所有元素的顏色改變了（并沒(méi)有改變結(jié)構(gòu)），比如color:red，還好還好，上面一步的工作白干，推翻重來(lái)。可以想象一下，你辛辛苦苦加班一個(gè)月終于完成工作，產(chǎn)品經(jīng)理來(lái)了一句：“好像要改一下需求…”
頁(yè)面在首次加載時(shí)必然會(huì)經(jīng)歷reflow和repaint。reflow和repaint過(guò)程是非常消耗性能的，尤其是在移動(dòng)設(shè)備上，它會(huì)破壞用戶體驗(yàn)，有時(shí)會(huì)造成頁(yè)面卡頓。所以我們應(yīng)該盡可能少的減少reflow和repaint。

所以，盡可能少操作DOM，提升網(wǎng)頁(yè)的性能。

總結(jié)一下:

       1. 解析HTML
 2. 構(gòu)建DOM樹(shù)
 3. DOM樹(shù)與CSS樣式進(jìn)行附著構(gòu)造呈現(xiàn)樹(shù)（render樹(shù)）
 4. 布局
 5. 繪制
上述這個(gè)過(guò)程是逐步完成的，為了更好的用戶體驗(yàn)，渲染引擎將會(huì)盡可能早的將內(nèi)容呈現(xiàn)到屏幕上，并不會(huì)等到所有的html都解析完成之后再去構(gòu)建和布局render樹(shù)。它是解析完一部分內(nèi)容就顯示一部分內(nèi)容，同時(shí)，可能還在通過(guò)網(wǎng)絡(luò)下載其余內(nèi)容。

當(dāng)前題目：瀏覽器從輸入U(xiǎn)RL到渲染完頁(yè)面的整個(gè)過(guò)程是怎么樣的？
瀏覽地址：http://www.bm7419.com/news20/160520.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、網(wǎng)站建設(shè)、Google、標(biāo)簽優(yōu)化、域名注冊(cè)、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)