-
讓品牌有溫度、有情感
專注品牌策劃15年
-
當前位置：首頁 > 創(chuàng)意學院 > 景觀設計 > 專題列表 > 正文
render樹（render樹和dom樹）
發(fā)布時間：2023-04-05 00:55:57
稿源：
創(chuàng)意嶺 閱讀：
64
大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關于render樹的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。
開始之前先推薦一個非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計劃、工作報告、論文、代碼、作文、做題和對話答疑等等
只需要輸入關鍵詞，就能返回你想要的內容，越精準，寫出的就越詳細，有微信小程序端、在線網頁版、PC客戶端
官網：https://ai.de1919.com，如需相關業(yè)務請撥打電話175-8598-2043，或添加微信：1454722008
本文目錄:
一、從瀏覽器輸入url到顯示內容都發(fā)生了什么？
從URL到顯示內容簡單來說可以分為以下6個步驟
在瀏覽器輸入網址之后，首先要經過域名解析，因為瀏覽器不能直接通過域名找到相應的服務器,而是通過IP地址。
DNS協(xié)議提供通過域名查找IP地址，或者逆向從IP地址反查域名的服務，DNS是一個網絡服務器，我們的域名解析簡單的來說就是在DNS上記錄一條信息記錄
瀏覽器首先會通過瀏覽器的緩存來查找，因為瀏覽器會按照一定的頻率緩存DNS記錄。如果在瀏覽器中沒有找到，則會到操作系統(tǒng)中查找，操作系統(tǒng)中沒有找到會到到路由緩存中查找，然后在是ISP的DNS服務器中查找。ISP有專門的DNS服務器對DNS查詢請求。如果在ISP的DNS服務器中沒有找到，則會向根服務器中查找
瀏覽器通過向DNS服務器發(fā)送域名，DNS服務器查詢到與域名想對應的IP地址，然后返回給瀏覽器，瀏覽器再將IP地址打在協(xié)議上，同時請求參數也會在協(xié)議搭載，然后一并發(fā)送給對應的服務器。
在客戶端發(fā)送數據之前，會發(fā)起TCP三次握手用以同步客戶端和服務端的序列號和確認號，并交互TCP窗口的大小信息
三次握手是保證雙方互相明確對方能發(fā)能收的最小次數，也能夠防止失效連接請求報文段突然又傳送給服務器，因而產生錯誤
TCP三次握手結束后，開始發(fā)送HTTP請求報文。請求報文由請求行、請求頭和請求體三部分組成
服務器是網絡環(huán)境中的高性能計算機。它監(jiān)聽網絡上其他計算機提交的服務請求，并提供相應的服務。監(jiān)聽請求主要是靠web server擔任管控角色。
響應報文由響應行、響應頭部和響應主體三個部分組成
瀏覽器渲染解析簡單的來說分為以下四部，第一步把HTML解析成DOM Tree,第二步把樣式生成渲染樹(render tree),第三步組織render tree試圖。第四步UI后臺程序繪制。
具體的步驟如下
當數據傳送完畢，需要斷開tcp連接
二、從輸入一個網址到瀏覽器顯示頁面經歷的全過程筆記
瀏覽器會在用戶輸入url時查找歷史信息對其補全或直接顯示緩存在本地的網頁。
用戶發(fā)起請求后，瀏覽器會解析這個url，將其轉換為ip地址。
第一步： 查看hosts文件，如果hosts文件里面配置了url和ip的關系，則直接使用里面的ip地址。hosts文件存儲在操作系統(tǒng)的如下目錄中，打開后可手動配置。下圖的示例中，左邊是ip地址，右邊是url。
第二步： 瀏覽器向本地DNS服務器（用網絡運營商提供，如中國移動等）發(fā)送一個DNS請求。DNS (Domain Name System)是域名系統(tǒng)，用來將域名解析成ip地址。
第三步： 本地DNS在收到請求后查詢緩存，如果沒有命中，還會向根DNS服務器發(fā)送請求。
第四步： 根DNS服務器不直接存儲解析數據，而是返回一個域服務器地址，本地DNS服務器轉而向域服務器發(fā)送查詢請求。
第五步： 本地DNS服務器繼續(xù)向域服務器（例如.com域服務器）發(fā)出請求，返回的是一個解析服務器的地址。
第六步： 本地DNS服務器向域名的解析服務器發(fā)出請求，獲得域名與ip的映射關系。在返回數據時，本地DNS會進行緩存。
瀏覽器會首先與服務器依照三次握手和四次揮手建立TCP連接（根據OSI七層協(xié)議，低層次的協(xié)議需要率先建立連接，只有建立了TCP連接才能使用HTTP協(xié)議）。
一個典型的http request header一般需要包括請求的方法，例如GET或者POST等，不常用的還有PUT和DELETE、HEAD、OPTION以及TRACE方法，一般的瀏覽器只能發(fā)起GET或者POST請求。
HTTP的請求信息主要包含三部分內容：
一個完整的HTTP請求如下所示：
以Chrome瀏覽器為例，按F12打開控制臺，選擇標簽頁中的Network，然后選擇一個請求。下圖展示的就是一個Http Request Header和他發(fā)送給服務器的參數。
服務器給瀏覽器響應一個301永久重定向響應，這樣瀏覽器就會訪問“ http://www.google.com/ ” 而非“ http://google.com/ ”。
重定向原因：
此時如果不進行重定向的話，用戶會得到一個404報錯信息。之后，瀏覽器根據服務器返回的重定向地址繼續(xù)請求網站信息。
和HTTP請求一樣，HTTP響應信息也主要包含三個部分：
網頁是根據服務器返回的html文件顯示的，顯示過程中需要進行渲染。以webkit為例，渲染的過程包括：解析html以構建dom樹 -> 構建render樹 -> 布局render樹 -> 繪制render樹。
渲染完成后，瀏覽器會發(fā)送請求獲取嵌入在HTML中的資源（如圖片、音頻、視頻、CSS、JS等），這個過程和上面發(fā)送請求的過程是一樣的。
是否關閉TCP連接可以通過參數配置（connection:keep-alive）。新版本的協(xié)議也會通過默認持久連接來節(jié)省帶寬。TCP連接關閉后，一次瀏覽器顯示頁面的交互就結束了。
三、為什么js的加載會阻塞頁面渲染
因為頁面的渲染是從上到下的，比如下面HTML結構
<head><script src="..."></script>
</head>
<body>
</body>
頁面從上到下渲染，當運行到script這個標簽時，會把script內的代碼進行解讀，在沒有解讀完成之前，渲染不會繼續(xù)向下進行，這時候head后的內容就無法解讀，導致阻塞，所以我們有時會把script標簽放到</body>標簽前，讓body以前的基本結構都渲染完成，再進行解讀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方法中 調用
widget.createRenderObject(this) ，創(chuàng)建RenderObject對象，RenderObject對象加入Render樹中
第二種：StatefulElement繼承ComponentElement
第三種：StatelessElement繼承ComponentElement
并不是所有的Widget都會被獨立渲染！只有繼承RenderObjectWidget的才會創(chuàng)建RenderObject對象！
以上就是關于render樹相關問題的回答。希望能幫到你，如有更多相關問題，您也可以聯(lián)系我們的客服進行咨詢，客服也會為您講解更多精彩的知識和內容。
推薦閱讀：
華為retailplatform最新（華為retail platform）
googletrends數據分析（google trends數據分析）
電子商務畢業(yè)后干什么（電子商務畢業(yè)后干什么的）
贛公網安備 50019002502384號
