正文

render樹（render樹和dom樹）

發(fā)布時(shí)間：2023-04-05 00:55:57 稿源：創(chuàng)意嶺閱讀： 64

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于render樹的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

開始之前先推薦一個(gè)非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計(jì)劃、工作報(bào)告、論文、代碼、作文、做題和對話答疑等等

只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，越精準(zhǔn)，寫出的就越詳細(xì)，有微信小程序端、在線網(wǎng)頁版、PC客戶端

官網(wǎng)：https://ai.de1919.com，如需相關(guān)業(yè)務(wù)請撥打電話175-8598-2043，或添加微信：1454722008

本文目錄:

1、從瀏覽器輸入url到顯示內(nèi)容都發(fā)生了什么？
2、從輸入一個(gè)網(wǎng)址到瀏覽器顯示頁面經(jīng)歷的全過程筆記
3、為什么js的加載會阻塞頁面渲染
4、Flutter Widget的渲染原理

render樹（render樹和dom樹）

一、從瀏覽器輸入url到顯示內(nèi)容都發(fā)生了什么？

從URL到顯示內(nèi)容簡單來說可以分為以下6個(gè)步驟

在瀏覽器輸入網(wǎng)址之后，首先要經(jīng)過域名解析，因?yàn)闉g覽器不能直接通過域名找到相應(yīng)的服務(wù)器,而是通過IP地址。

DNS協(xié)議提供通過域名查找IP地址，或者逆向從IP地址反查域名的服務(wù)，DNS是一個(gè)網(wǎng)絡(luò)服務(wù)器，我們的域名解析簡單的來說就是在DNS上記錄一條信息記錄

瀏覽器首先會通過瀏覽器的緩存來查找，因?yàn)闉g覽器會按照一定的頻率緩存DNS記錄。如果在瀏覽器中沒有找到，則會到操作系統(tǒng)中查找，操作系統(tǒng)中沒有找到會到到路由緩存中查找，然后在是ISP的DNS服務(wù)器中查找。ISP有專門的DNS服務(wù)器對DNS查詢請求。如果在ISP的DNS服務(wù)器中沒有找到，則會向根服務(wù)器中查找

瀏覽器通過向DNS服務(wù)器發(fā)送域名，DNS服務(wù)器查詢到與域名想對應(yīng)的IP地址，然后返回給瀏覽器，瀏覽器再將IP地址打在協(xié)議上，同時(shí)請求參數(shù)也會在協(xié)議搭載，然后一并發(fā)送給對應(yīng)的服務(wù)器。

在客戶端發(fā)送數(shù)據(jù)之前，會發(fā)起TCP三次握手用以同步客戶端和服務(wù)端的序列號和確認(rèn)號，并交互TCP窗口的大小信息

三次握手是保證雙方互相明確對方能發(fā)能收的最小次數(shù)，也能夠防止失效連接請求報(bào)文段突然又傳送給服務(wù)器，因而產(chǎn)生錯(cuò)誤

TCP三次握手結(jié)束后，開始發(fā)送HTTP請求報(bào)文。請求報(bào)文由請求行、請求頭和請求體三部分組成

服務(wù)器是網(wǎng)絡(luò)環(huán)境中的高性能計(jì)算機(jī)。它監(jiān)聽網(wǎng)絡(luò)上其他計(jì)算機(jī)提交的服務(wù)請求，并提供相應(yīng)的服務(wù)。監(jiān)聽請求主要是靠web server擔(dān)任管控角色。

響應(yīng)報(bào)文由響應(yīng)行、響應(yīng)頭部和響應(yīng)主體三個(gè)部分組成

瀏覽器渲染解析簡單的來說分為以下四部，第一步把HTML解析成DOM Tree,第二步把樣式生成渲染樹(render tree),第三步組織render tree試圖。第四步UI后臺程序繪制。

具體的步驟如下

當(dāng)數(shù)據(jù)傳送完畢，需要斷開tcp連接

二、從輸入一個(gè)網(wǎng)址到瀏覽器顯示頁面經(jīng)歷的全過程筆記

瀏覽器會在用戶輸入url時(shí)查找歷史信息對其補(bǔ)全或直接顯示緩存在本地的網(wǎng)頁。

用戶發(fā)起請求后，瀏覽器會解析這個(gè)url，將其轉(zhuǎn)換為ip地址。

第一步： 查看hosts文件，如果hosts文件里面配置了url和ip的關(guān)系，則直接使用里面的ip地址。hosts文件存儲在操作系統(tǒng)的如下目錄中，打開后可手動(dòng)配置。下圖的示例中，左邊是ip地址，右邊是url。

第二步： 瀏覽器向本地DNS服務(wù)器（用網(wǎng)絡(luò)運(yùn)營商提供，如中國移動(dòng)等）發(fā)送一個(gè)DNS請求。DNS (Domain Name System)是域名系統(tǒng)，用來將域名解析成ip地址。

第三步： 本地DNS在收到請求后查詢緩存，如果沒有命中，還會向根DNS服務(wù)器發(fā)送請求。

第四步： 根DNS服務(wù)器不直接存儲解析數(shù)據(jù)，而是返回一個(gè)域服務(wù)器地址，本地DNS服務(wù)器轉(zhuǎn)而向域服務(wù)器發(fā)送查詢請求。

第五步： 本地DNS服務(wù)器繼續(xù)向域服務(wù)器（例如.com域服務(wù)器）發(fā)出請求，返回的是一個(gè)解析服務(wù)器的地址。

第六步： 本地DNS服務(wù)器向域名的解析服務(wù)器發(fā)出請求，獲得域名與ip的映射關(guān)系。在返回?cái)?shù)據(jù)時(shí)，本地DNS會進(jìn)行緩存。

瀏覽器會首先與服務(wù)器依照三次握手和四次揮手建立TCP連接（根據(jù)OSI七層協(xié)議，低層次的協(xié)議需要率先建立連接，只有建立了TCP連接才能使用HTTP協(xié)議）。

一個(gè)典型的http request header一般需要包括請求的方法，例如GET或者POST等，不常用的還有PUT和DELETE、HEAD、OPTION以及TRACE方法，一般的瀏覽器只能發(fā)起GET或者POST請求。

HTTP的請求信息主要包含三部分內(nèi)容：

一個(gè)完整的HTTP請求如下所示：

以Chrome瀏覽器為例，按F12打開控制臺，選擇標(biāo)簽頁中的Network，然后選擇一個(gè)請求。下圖展示的就是一個(gè)Http Request Header和他發(fā)送給服務(wù)器的參數(shù)。

服務(wù)器給瀏覽器響應(yīng)一個(gè)301永久重定向響應(yīng)，這樣瀏覽器就會訪問“ http://www.google.com/ ” 而非“ http://google.com/ ”。

重定向原因：

此時(shí)如果不進(jìn)行重定向的話，用戶會得到一個(gè)404報(bào)錯(cuò)信息。之后，瀏覽器根據(jù)服務(wù)器返回的重定向地址繼續(xù)請求網(wǎng)站信息。

和HTTP請求一樣，HTTP響應(yīng)信息也主要包含三個(gè)部分：

網(wǎng)頁是根據(jù)服務(wù)器返回的html文件顯示的，顯示過程中需要進(jìn)行渲染。以webkit為例，渲染的過程包括：解析html以構(gòu)建dom樹 -> 構(gòu)建render樹 -> 布局render樹 -> 繪制render樹。

渲染完成后，瀏覽器會發(fā)送請求獲取嵌入在HTML中的資源（如圖片、音頻、視頻、CSS、JS等），這個(gè)過程和上面發(fā)送請求的過程是一樣的。

是否關(guān)閉TCP連接可以通過參數(shù)配置（connection:keep-alive）。新版本的協(xié)議也會通過默認(rèn)持久連接來節(jié)省帶寬。TCP連接關(guān)閉后，一次瀏覽器顯示頁面的交互就結(jié)束了。

三、為什么js的加載會阻塞頁面渲染

因?yàn)轫撁娴匿秩臼菑纳系较碌模热缦旅鍴TML結(jié)構(gòu)

<head>
<script src="..."></script>
</head>
<body>
</body>

頁面從上到下渲染，當(dāng)運(yùn)行到script這個(gè)標(biāo)簽時(shí)，會把script內(nèi)的代碼進(jìn)行解讀，在沒有解讀完成之前，渲染不會繼續(xù)向下進(jìn)行，這時(shí)候head后的內(nèi)容就無法解讀，導(dǎo)致阻塞，所以我們有時(shí)會把script標(biāo)簽放到</body>標(biāo)簽前，讓body以前的基本結(jié)構(gòu)都渲染完成，再進(jìn)行解讀js。

四、Flutter Widget的渲染原理

抽象類Element 有mount方法

抽象類Widget 有createElement方法

RenderObjectWidget有createElement方法和 createRenderObject方法

每一個(gè)Widget, 都有createElement方法，通過createElement方法創(chuàng)建一個(gè)Element對象，

Element加入Element樹中，它會創(chuàng)建三種Element ，每個(gè)Element 有個(gè)mount方法

第一種：RenderObjectElement（RenderObjectWidget的createElement方法）

mount方法中調(diào)用

widget.createRenderObject(this) ，創(chuàng)建RenderObject對象，RenderObject對象加入Render樹中

第二種：StatefulElement繼承ComponentElement

第三種：StatelessElement繼承ComponentElement

并不是所有的Widget都會被獨(dú)立渲染！只有繼承RenderObjectWidget的才會創(chuàng)建RenderObject對象！