瀏覽器渲染機制

前言

一直對瀏覽器的渲染機制都處於一種似懂非懂的狀態。看似沒什麼用的知識點但其實有很大做用。瞭解瀏覽器渲染機制能更好的解決性能問題。以及對本身的知識面也是一種提高。此次對瀏覽器渲染機制進行一次總結。

渲染過程

1.瀏覽器解析html標記後生成DOM樹

2.瀏覽器解析css標記後生成Cssom樹

3.將DOM樹與CSSOM樹合併生成渲染樹

4.瀏覽器根據生成的渲染樹進行佈局，也就是肯定每一個節點的位置及大小

5.瀏覽器對頁面進行繪製

DOM樹構建過程

1.當咱們打開網頁時，瀏覽器開始請求對應html文件。不過在計算機底層此時爲0和1的字節碼。這一步中瀏覽器將這些字節數據解析成字符串。也就是咱們寫的代碼。

2.生成字符串後，瀏覽器根據特定詞法分析，將字符串轉化爲標記。這些標記構成代碼的最小單位。 例如：<div>111</div> <div>被解析爲一個div標籤，111被解析爲標籤內文本，</div>被解析爲div結束標籤

3.標記解析完成後，瀏覽器將這些標記轉化爲節點(Node)。並根據節點間的關係生成dom樹

• 解析過程

二進制字節碼=>字符串=>標記=>節點=>Dom樹

CSSOM樹構建過程

構建過程同DOM樹

• 解析過程

二進制字節碼=>字符串=>標記=>節點=>Dom樹

生成渲染樹

• 渲染過程

生成渲染樹後根據渲染樹進行佈局。而後GPU將頁面繪製到屏幕中。

tip:display:none的節點不會繪製

爲何js操做dom耗性能

• 重排

由於dom顯示隱藏，位置變化，大小變化致使瀏覽器從新渲染的過程稱爲重排，別名迴流。

• 重繪

由於dom外觀發生變化，好比顏色，背景色致使瀏覽器從新渲染的過程稱爲重繪。

由於在執行JS代碼使用的是JS引擎，而渲染頁面用的是渲染引擎。當js對DOM進行操做時涉及到了兩個引擎的通訊。 並且若是DOM發生變化還會發生重排和重繪。當一次操做了太多dom時。兩個引擎的頻繁通訊，頁面頻繁繪製。勢必會致使頁面卡頓等其餘問題