資訊專欄INFORMATION COLUMN
摘要：渲染主流程渲染引擎首先通過網(wǎng)絡(luò)獲得所請求文檔的內(nèi)容，通常以分塊的方式完成?；亓鳟?dāng)瀏覽器發(fā)現(xiàn)某個部分發(fā)生了點(diǎn)變化影響了布局，需要倒回去重新渲染，內(nèi)行稱這個回退的過程叫。有了，瀏覽器已經(jīng)能知道網(wǎng)頁中有哪些節(jié)點(diǎn)各個節(jié)點(diǎn)的定義以及他們的從屬關(guān)系。
渲染主流程
渲染引擎首先通過網(wǎng)絡(luò)獲得所請求文檔的內(nèi)容，通常以8K分塊的方式完成。下面是渲染引擎在取得內(nèi)容之后的基本流程：
解析html以構(gòu)建dom樹 -> 構(gòu)建render樹 -> 布局render樹 -> 繪制render樹
這里先解釋一下幾個概念，方便大家理解：
DOM Tree：瀏覽器將HTML解析成樹形的數(shù)據(jù)結(jié)構(gòu)。
CSS Rule Tree：瀏覽器將CSS解析成樹形的數(shù)據(jù)結(jié)構(gòu)。
Render Tree: DOM和CSSOM合并后生成Render Tree。
layout: 有了Render Tree，瀏覽器已經(jīng)能知道網(wǎng)頁中有哪些節(jié)點(diǎn)、各個節(jié)點(diǎn)的CSS定義以及他們的從屬關(guān)系，從而去計算出每個節(jié)點(diǎn)在屏幕中的位置。
painting: 按照算出來的規(guī)則，通過顯卡，把內(nèi)容畫到屏幕上。
reflow（回流）：當(dāng)瀏覽器發(fā)現(xiàn)某個部分發(fā)生了點(diǎn)變化影響了布局，需要倒回去重新渲染，內(nèi)行稱這個回退的過程叫 reflow。reflow 會從 這個 root frame 開始遞歸往下，依次計算所有的結(jié)點(diǎn)幾何尺寸和位置。reflow 幾乎是無法避免的?，F(xiàn)在界面上流行的一些效果，比如樹狀目錄的折疊、展開（實(shí)質(zhì)上是元素的顯 示與隱藏）等，都將引起瀏覽器的 reflow。鼠標(biāo)滑過、點(diǎn)擊……只要這些行為引起了頁面上某些元素的占位面積、定位方式、邊距等屬性的變化，都會引起它內(nèi)部、周圍甚至整個頁面的重新渲 染。通常我們都無法預(yù)估瀏覽器到底會 reflow 哪一部分的代碼，它們都彼此相互影響著。
repaint（重繪）：改變某個元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內(nèi)部布局的屬性時，屏幕的一部分要重畫，但是元素的幾何尺寸沒有變。
注意：
(1)display:none 的節(jié)點(diǎn)不會被加入Render Tree，而visibility: hidden 則會，所以，如果某個節(jié)點(diǎn)最開始是不顯示的，設(shè)為display:none是更優(yōu)的。
(2)display:none 會觸發(fā) reflow，而 visibility:hidden 只會觸發(fā) repaint，因?yàn)闆]有發(fā)現(xiàn)位置變化。
(3)有些情況下，比如修改了元素的樣式，瀏覽器并不會立刻reflow 或 repaint 一次，而是會把這樣的操作積攢一批，然后做一次 reflow，這又叫異步 reflow 或增量異步 reflow。但是在有些情況下，比如resize 窗口，改變了頁面默認(rèn)的字體等。對于這些操作，瀏覽器會馬上進(jìn)行 reflow。
盡管Webkit與Gecko使用略微不同的術(shù)語，這個過程還是基本相同的
瀏覽器會將HTML解析成一個DOM樹，DOM 樹的構(gòu)建過程是一個深度遍歷過程：當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)都構(gòu)建好后才會去構(gòu)建當(dāng)前節(jié)點(diǎn)的下一個兄弟節(jié)點(diǎn)。
將CSS解析成 CSS Rule Tree 。
根據(jù)DOM樹和CSSOM來構(gòu)造 Rendering Tree。注意：Rendering Tree 渲染樹并不等同于 DOM 樹，因?yàn)橐恍┫馠eader或display:none的東西就沒必要放在渲染樹中了。
有了Render Tree，瀏覽器已經(jīng)能知道網(wǎng)頁中有哪些節(jié)點(diǎn)、各個節(jié)點(diǎn)的CSS定義以及他們的從屬關(guān)系。下一步操作稱之為layout，顧名思義就是計算出每個節(jié)點(diǎn)在屏幕中的位置。
再下一步就是繪制，即遍歷render樹，并使用UI后端層繪制每個節(jié)點(diǎn)。
注意：上述這個過程是逐步完成的，為了更好的用戶體驗(yàn)，渲染引擎將會盡可能早的將內(nèi)容呈現(xiàn)到屏幕上，并不會等到所有的html都解析完成之后再去構(gòu)建和布局render樹。它是解析完一部分內(nèi)容就顯示一部分內(nèi)容，同時，可能還在通過網(wǎng)絡(luò)下載其余內(nèi)容。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/114743.html
摘要：幾乎是無法避免的例如樹狀目錄的折疊，展開，實(shí)質(zhì)上是元素的顯示與隱藏等，都將引起瀏覽器的，鼠標(biāo)劃過，點(diǎn)擊，只要這些行為引起了頁面上的某些元素的占位面積，定位方式，邊距等屬性的變化，都會引起它的內(nèi)部，周圍甚至整個頁面的重新渲染。 渲染引擎簡介 目前常用的瀏覽器：Firefox . chrome . safari 是基于兩種渲染引擎構(gòu)建的，F(xiàn)irefox使用Geoko,是Mozilla自主研...
摘要：幾乎是無法避免的例如樹狀目錄的折疊，展開，實(shí)質(zhì)上是元素的顯示與隱藏等，都將引起瀏覽器的，鼠標(biāo)劃過，點(diǎn)擊，只要這些行為引起了頁面上的某些元素的占位面積，定位方式，邊距等屬性的變化，都會引起它的內(nèi)部，周圍甚至整個頁面的重新渲染。 渲染引擎簡介 目前常用的瀏覽器：Firefox . chrome . safari 是基于兩種渲染引擎構(gòu)建的，F(xiàn)irefox使用Geoko,是Mozilla自主研...
摘要：渲染主流程渲染引擎首先通過網(wǎng)絡(luò)獲得所請求文檔的內(nèi)容，通常以分塊的方式完成?；亓鳟?dāng)瀏覽器發(fā)現(xiàn)某個部分發(fā)生了點(diǎn)變化影響了布局，需要倒回去重新渲染，內(nèi)行稱這個回退的過程叫。有了，瀏覽器已經(jīng)能知道網(wǎng)頁中有哪些節(jié)點(diǎn)各個節(jié)點(diǎn)的定義以及他們的從屬關(guān)系。 渲染主流程渲染引擎首先通過網(wǎng)絡(luò)獲得所請求文檔的內(nèi)容，通常以8K分塊的方式完成。下面是渲染引擎在取得內(nèi)容之后的基本流程： 解析html以構(gòu)建dom樹...
摘要：渲染主流程渲染引擎首先通過網(wǎng)絡(luò)獲得所請求文檔的內(nèi)容，通常以分塊的方式完成。回流當(dāng)瀏覽器發(fā)現(xiàn)某個部分發(fā)生了點(diǎn)變化影響了布局，需要倒回去重新渲染，內(nèi)行稱這個回退的過程叫。有了，瀏覽器已經(jīng)能知道網(wǎng)頁中有哪些節(jié)點(diǎn)各個節(jié)點(diǎn)的定義以及他們的從屬關(guān)系。 渲染主流程渲染引擎首先通過網(wǎng)絡(luò)獲得所請求文檔的內(nèi)容，通常以8K分塊的方式完成。下面是渲染引擎在取得內(nèi)容之后的基本流程： 解析html以構(gòu)建dom樹...
摘要：年求職面經(jīng)及總結(jié)我的求職之路差不多走到盡頭了感覺真是精疲力盡了把這大半年的經(jīng)歷和面試總結(jié)寫下來希望能給和我一樣在求職路上煎熬的人一點(diǎn)幫助先說背景微電子科學(xué)與工程專業(yè)學(xué)過兩門和相關(guān)的課程語言和單片機(jī)這個專業(yè)的唯一好處就是大部分人并不知道這個專 18年求職面經(jīng)及總結(jié) 我的求職之路差不多走到盡頭了,感覺真是精疲力盡了.把這大半年的經(jīng)歷和面試總結(jié)寫下來,希望能給和我一樣在求職路上煎熬的人一點(diǎn)幫...
閱讀 2528·2023-04-26 00:46
閱讀 671·2023-04-25 21:36
閱讀 784·2021-11-24 10:19
閱讀 2354·2021-11-23 09:51
閱讀 1103·2021-10-21 09:39
閱讀 909·2021-09-22 10:02
閱讀 1752·2021-09-03 10:29
閱讀 2827·2019-08-30 15:53
