認識瀏覽器第三步構建Render Tree

2021-10-10 21:56:51 字數 1042 閱讀 1431

在構建 dom 樹的時候,裡面只有節點的資訊沒有 css 的資訊,瀏覽器是怎麼確定節點的樣式的呢?

瀏覽器為了使效能最大化,會盡可能地並行式的處理很多事務,給 dom 樹裝飾這件事也一樣是跟生成 dom 樹並行的,並不需要等 dom 樹生成。

構建 dom 樹的時候就是乙個乙個節點的處理,瀏覽器當然可以在乙個乙個節點掛在到 dom 樹的過程中把節點對應的 css 屬性計算出來。

css 屬性的計算

css 中的規則:空格、>、+、~、||等,關於選擇器的知識在這預設都是已知的,這裡只講瀏覽器對這些規則的處理。

要注意一點,選擇器是跟著它對應的結點一起出現的,所以能使瀏覽器在 dom 樹構建當前節點的時候已經可以判斷選擇器是否能匹配上。

css **的解析也離不開詞法分析和語法分析。

舉乙個簡單的例子:

// css

div .b

// html

description

description

與 dom 樹的構建類似,css 的**也會被瀏覽器解析成一顆 css 樹,把 css 選擇器按照類名和符號拆成一段一段的,上述的 css **會被解析成類似下面的一棵 css

樹\color

css樹

[

, ]]},

]。

在構建 dom 樹的時候,發現 class 屬性時,根據對應的規則解析 class 屬性,再拿著解析出來的屬性匹配 css 樹,當滿足一段就往 dom 樹的下一層匹配。上面例子的匹配流程:當匹配到標籤 div 以後就會向下匹配 b,當然也不能一直向下匹配,還得回退,當遇到第乙個 css 規則的結束標籤的時候就得回退,否則後面的 p 元素也會被選中。

瀏覽器會根據設定好解析復合解構的規則,去解析 dom 樹里的 class 屬性,並使 dom 樹里的節點帶上 css 屬性生成一顆新的樹稱為 ren

der樹

\color

render

樹。end…我是個有底線的傢伙…end

lucene第三步 建立索引

對所有文件分析得出的語彙單元進行索引,索引的目的是為了搜尋,最終要實現只搜尋被索引的語彙單元從而找到document 文件 注意 建立索引是對語彙單元索引,通過詞語找文件,這種索引的結構叫倒排索引結構。傳統方法是根據檔案找到該檔案的內容,在檔案內容中匹配搜尋關鍵字,這種方法是順序掃瞄方法,資料量大 ...

第三步 移動sprite小精靈

開啟第二步的專案,給遊戲新增敵人enemies 自定義addtarget 函式來完成這項工作 使敵人從螢幕左邊出生,以乙個隨機random的速度向左移動 在helloworldscene.h標頭檔案加入void addtarget 宣告 在helloworldscene.cpp檔案中實現該函式 並新...

新人產品分析 第三步(5)

決定分析報告的細節有很多分別為 文字格式 格式 水印 大小 清晰度 排列 標點符號 合理的分段 正確的使用各種大綱級別,合理使用隔頁 各種符號輔助,這才是乙個專業的產品分析報告。水印 不要在上保留各種水印。但是一些必要的水印需要保留 有版權申明的 資料 機構的原始水印。大小 最小不要低於300畫素 ...