瀏覽器渲染原理

lpjustdoit 發(fā)布于2019-08-23 12:07 / 2835人閱讀

摘要：瀏覽器會(huì)使用它來(lái)判斷文檔類型，決定使用何種協(xié)議來(lái)解析，以及切換瀏覽器模式。如果文件代碼不合法，那么瀏覽器解析時(shí)便會(huì)出一些差錯(cuò)。瀏覽器的工作流程解析，生成樹(shù)，解析生產(chǎn)根據(jù)生成的和構(gòu)建渲染樹(shù)根據(jù)渲染樹(shù)，計(jì)算每個(gè)節(jié)點(diǎn)在屏幕上的位置，尺寸等信息。

什么是DOCTYPE及作用
DTD是一系列的語(yǔ)法規(guī)則，用來(lái)定義XML或(X)HTML的文件類型。瀏覽器會(huì)使用它來(lái)判斷文檔類型，決定使用何種協(xié)議來(lái)解析，以及切換瀏覽器模式。
DOCTYPE是用來(lái)聲明文檔類型和DTD規(guī)范的，一個(gè)主要的作用是文件的合法性驗(yàn)證。如果文件代碼不合法，那么瀏覽器解析時(shí)便會(huì)出一些差錯(cuò)。
瀏覽器的工作流程

解析HTML，生成DOM樹(shù)，解析CSS生產(chǎn)CSSOM

根據(jù)生成的DOM和CSSOM構(gòu)建渲染樹(shù)Render tree

根據(jù)渲染樹(shù)，計(jì)算每個(gè)節(jié)點(diǎn)在屏幕上的位置，尺寸等信息。

將渲染樹(shù)繪制到屏幕上

注意：渲染對(duì)象和Dom元素相對(duì)應(yīng)，但這種對(duì)應(yīng)關(guān)系不是一對(duì)一的，不可見(jiàn)的Dom元素不會(huì)被插入渲染樹(shù)，例如head元素。另外，display屬性為none的元素也不會(huì)在渲染樹(shù)中出現(xiàn)（visibility屬性為hidden的元素將出現(xiàn)在渲染樹(shù)中）。
重排(reflow)和重繪(repaint)
當(dāng)頁(yè)面元素的幾何屬性發(fā)生改變時(shí)會(huì)發(fā)生重排，當(dāng)元素的屬性的該變沒(méi)有影響到幾何屬性時(shí)發(fā)生重繪。重排一定會(huì)發(fā)生重繪，但重繪不一定會(huì)引起重排。
什么時(shí)候發(fā)生重排

添加或刪除可見(jiàn)的DOM元素

元素位置發(fā)生該變

元素的尺寸發(fā)生該變（包括：外邊距，內(nèi)邊距，邊框厚度，寬度，高度等屬性）

內(nèi)容改變，例如文本內(nèi)容該變，或圖片被另外一張不同尺寸的圖片代替

頁(yè)面渲染器初始化

由于每次重排都會(huì)產(chǎn)生計(jì)算消耗，大多數(shù)瀏覽器通過(guò)隊(duì)列化修改并批量執(zhí)行來(lái)優(yōu)化重排過(guò)程，獲取布局信息的操作會(huì)導(dǎo)致隊(duì)列刷新，如下面的這些屬性和方法需要返回最新的布局信息，所以瀏覽器會(huì)刷新渲染隊(duì)列并引發(fā)重排，應(yīng)盡量避免使用。

clientWidth、clientHeight、clientTop、clientLeft

offsetWidth、offsetHeight、offsetTop、offsetLeft

scrollWidth、scrollHeight、scrollTop、scrollLeft

scrollIntoView()、scrollIntoViewIfNeeded()

getComputedStyle()

getBoundingClientRect()

scrollTo()

什么時(shí)候發(fā)生重繪
當(dāng)頁(yè)面中元素樣式的該變不影響布局時(shí)，發(fā)生重繪。比如：該變color,background,visibility等
思考下面兩段代碼：
代碼一：

var foo = document.getElementById("fooBar");
foo.style.color = "blue";
foo.style.marginTop = "30px";

代碼二：

var foo = document.getElementById("fooBar");
foo.style.color = "blue";
var margin = parseInt(foo.style.marginTop);
foo.style.marginTop = (margin + 10) + "px";

上面兩端代碼分別發(fā)生多少次重排和重繪？
代碼一：一次重排和重繪；代碼二：一次重排和一次重排和重繪
為什么會(huì)這樣呢？
當(dāng)修改一個(gè)DOM節(jié)點(diǎn)時(shí)，修改的操作會(huì)先緩存到隊(duì)列，隊(duì)列中的修改會(huì)在下次UI線程執(zhí)行時(shí)批量更新。修改過(guò)的節(jié)點(diǎn)會(huì)被標(biāo)記為‘臟’（Dirty），獲取臟節(jié)點(diǎn)的屬性會(huì)導(dǎo)致隊(duì)列中的更新操作立刻執(zhí)行。所以第二段代碼的不同之處在于var margin = parseInt(foo.style.marginTop);引發(fā)了一次重排。
如何減少重排和重繪的次數(shù)

避免對(duì)同一個(gè)DOM節(jié)點(diǎn)進(jìn)行讀和寫(xiě)操作的交叉進(jìn)行。

使用display:none臨時(shí)從文檔中移除，添加完元素后在顯示它

使用document fragment

為需要修改的節(jié)點(diǎn)創(chuàng)建一個(gè)備份，然后對(duì)副本進(jìn)行操作，修改完后用其代替舊節(jié)點(diǎn)（cloneNode）

使用position為absolute或fixed的元素創(chuàng)建動(dòng)畫(huà)

window.requestAnimation()

虛擬DOM庫(kù)

參考資料：
How browsers work
《高性能JavaScript》