正文

render樹（render樹和dom樹）

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

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

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

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

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

本文目錄:

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

render樹（render樹和dom樹）

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

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

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

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

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

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

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

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

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

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

響應報文由響應行、響應頭部和響應主體三個部分組成

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

具體的步驟如下

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

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

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

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

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

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

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

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

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

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

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

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

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

一個完整的HTTP請求如下所示：

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

服務器給瀏覽器響應一個301永久重定向響應，這樣瀏覽器就會訪問“ http://www.google.com/ ” 而非“ http://google.com/ ”。

重定向原因：

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

和HTTP請求一樣，HTTP響應信息也主要包含三個部分：

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

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

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

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

因為頁面的渲染是從上到下的，比如下面HTML結(jié)構(gòu)

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

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

四、Flutter Widget的渲染原理

抽象類Element 有mount方法

抽象類Widget 有createElement方法

RenderObjectWidget有createElement方法和 createRenderObject方法

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

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

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

mount方法中調(diào)用

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

第二種：StatefulElement繼承ComponentElement

第三種：StatelessElement繼承ComponentElement

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