前端知識補充說明之瀏覽器渲染頁面的過程

2021-10-24 07:41:07 字數 1100 閱讀 8562

二、總結

說明瀏覽器接收到**後進行解析,經過三大步驟:

dom構造、布局以及繪製頁面,最終展現為人人都能看懂的網頁。

瀏覽器首先將收到的html**,通過html解析器解析構建為一顆dom樹。資料結構中有許多的樹,而dom樹就像是一顆倒長著的大樹,這樣的物件模型決定了節點之間都有一定的關聯它們關係可能有父子、有兄弟,我們可以順著這顆樹做出許多操作。接著將接收到的css**,通過css解析器構建出樣式表規則將這些規則分別放到對應的dom樹節點上,得到一顆帶有樣式屬性的dom樹。

瀏覽器按從上到下,從左到右的順序,讀取dom樹的文件節點,順序存放到一條虛擬的傳送帶上。傳送帶上的盒子就是節點,而這條流動的傳送帶就是文件流。如果我們讀取到的節點是屬於另乙個節點下的子節點,那麼在放入傳送帶的時候,就應該按順序放到該節點盒子的內部。如果子節點下還有子節點,在傳送帶上的時候就繼續套到子一級的盒子內部。根據它在dom樹上的結構,可以巢狀的層級沒有限制的哦。文件流排完之後,開始獲取計算節點的座標和大小等css屬性,作為盒子的包裝說明。然後把盒子在倉庫裡一一擺放,這就將節點布局到了頁面。

布局完成之後,我們在頁面上其實是看不到任何內容的

瀏覽器只是計算出了每乙個節點物件應該被放到頁面的哪個位置上,但並沒有視覺化。

因此最後一步就是將所有內容繪製出來,完成整個頁面的渲染。

第一步: 瀏覽器通過http請求,拿到是乙個html文字資料

第二步: 瀏覽器把html文字資料解析成乙個倒樹,就是的dom構造

第三步:把dom進行組裝並把css樣式一起對應到各個樹節點上

第四布:通過樣式和節點分布,完成在介面上的布局

第五步:布局完成後,就渲染出來

前端面試之瀏覽器渲染

瀏覽器渲染的整個流程 瀏覽器的整個流程如上圖所示。1 首先當使用者輸入乙個url的時候,瀏覽器就會傳送乙個請求,請求url對應的資源。2 然後瀏覽器的html解析器會將這個檔案解析,並且構建成一棵dom樹。3 在構建dom樹的時候,遇到js和css元素,html解析器就換將控制權轉讓給js解析器或者...

前端瀏覽器渲染原理 渲染過程

瀏覽器接收到 html 檔案並轉換為 dom 樹 當我們開啟乙個網頁時,瀏覽器都會去請求對應的html檔案。雖然平時我們寫 時都會分為js css html檔案,也就是字串,但是計算機硬體是不理解這些字串的,所以在網路中傳輸的內容其實都是0和1這些位元組資料。當瀏覽器接收到這些位元組資料以後,它會將...

瀏覽器渲染相關知識

1 瀏覽器渲染原理 2 瀏覽器渲染過程 1 渲染引擎解析html生成dom樹 讀取html,將位元組轉換成字元,確定標籤,再將標籤轉換成節點,以節點構建dom 2 解析css樣式成css規則樹 讀取css檔案,將位元組轉換成字元,確定標籤,將標籤轉換成節點,構建css規則樹 3 根據dom樹和css...