中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

瀏覽器從輸入URL到渲染完頁面的整個過程是怎么樣的?

2022-05-29    分類: 網(wǎng)站建設


 瀏覽器的主要功能是將用戶選擇的web資源呈現(xiàn)出來,它從服務器請求資源,并將得到的資源(HTML,PDF,image等等)顯示在瀏覽器窗口。那么從用戶敲入URL到完整渲染出來,經(jīng)歷了什么過程呢?也就是說整個瀏覽器的工作流程是怎樣的呢?

整個過程大致如下:


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

     6. 瀏覽器發(fā)送請求,以獲取嵌入在HTML中的對象。在瀏覽器顯示HTML時,它會注意到需要獲取其他地址內(nèi)容的標簽。


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

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

html解析過程:01機器碼-》charter字符-》tokens令牌-》node節(jié)點-》dom樹


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

因為瀏覽器解析文檔,如果遇到請求外部資源時,如圖像,iconfont,JS等。瀏覽器將下載該資源。請求過程是異步的,并不會影響HTML文檔進行加載,當遇到 <script>標簽的時候,會立即解析腳本,停止解析文檔(因為JS可以操作DOM和CSS,可能會改動DOM和CSS,所以繼續(xù)解析會造成浪費)。如果腳本是外部的,會等待腳本下載完畢,再繼續(xù)解析文檔。所以常見的做法是將js放到頁腳部分。

   

構建Render Tree(呈現(xiàn)樹)


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

 布局(Layout)


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


繪制(Painting)


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

回流(Reflow)和重繪(Repaint)


如果這個時候我寫了用JS操作了DOM,將網(wǎng)頁的所有元素設置float:left,那么問題來了,上面兩步的工作白干了,推翻從新再來。如果將所有元素的顏色改變了(并沒有改變結構),比如color:red,還好還好,上面一步的工作白干,推翻重來??梢韵胂笠幌拢阈列量嗫嗉影嘁粋€月終于完成工作,產(chǎn)品經(jīng)理來了一句:“好像要改一下需求…”
頁面在首次加載時必然會經(jīng)歷reflow和repaint。reflow和repaint過程是非常消耗性能的,尤其是在移動設備上,它會破壞用戶體驗,有時會造成頁面卡頓。所以我們應該盡可能少的減少reflow和repaint。

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


總結一下:


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

當前題目:瀏覽器從輸入URL到渲染完頁面的整個過程是怎么樣的?
瀏覽地址:http://m.rwnh.cn/news20/160520.html

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

廣告

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

小程序開發(fā)
荥阳市| 孝感市| 涟源市| 邵阳市| 万源市| 康马县| 莱阳市| 安远县| 民乐县| 汉源县| 静海县| 桦甸市| 六安市| 禄丰县| 柯坪县| 张家界市| 廉江市| 太原市| 从化市| 苍溪县| 土默特右旗| 扶余县| 偃师市| 海阳市| 信宜市| 石景山区| 盘锦市| 白沙| 蒙阴县| 祁阳县| 宜君县| 丁青县| 边坝县| 德州市| 淮阳县| 昌邑市| 普宁市| 成武县| 青田县| 苗栗市| 锡林郭勒盟|