一 ： 為什么要了解瀏覽器渲染頁(yè)面的機(jī)制，主要還是性能的優(yōu)化拧廊。
- 了解瀏覽器如何進(jìn)行加載，我們可以在引用外部樣式文件晋修，外部JS時(shí)吧碾，將它們放到合適的位置，是瀏覽器以最快的速度墓卦，將文件加載完畢倦春。
- 了解瀏覽器如何進(jìn)行解析，我們可以在構(gòu)建DOM結(jié)構(gòu)，組織CSS選擇器的時(shí)候睁本，選擇最優(yōu)的寫法尿庐，提高瀏覽器的解析速率。
- 了解瀏覽器如何進(jìn)行渲染呢堰，明白渲染的過(guò)程抄瑟，我們?cè)谠O(shè)置元素屬性，編寫JS文件時(shí)枉疼，可以減少“重繪”皮假，“重新布局”的消耗。
二 ： 要了解清楚渲染機(jī)制骂维，要先弄明白幾個(gè)基本概念：
- DOM：Document Object Model惹资，瀏覽器將HTML解析成樹形的數(shù)據(jù)結(jié)構(gòu)，簡(jiǎn)稱DOM航闺。
- CSSOM：CSS Object Model褪测，瀏覽器將CSS解析成樹形的數(shù)據(jù)結(jié)構(gòu)，簡(jiǎn)稱CSSOM潦刃。
-
Render Tree: DOM和CSSOM合并后生成Render Tree汰扭，如下圖：
image.png - Layout: 計(jì)算出Render Tree每個(gè)節(jié)點(diǎn)的具體位置。
- Painting：通過(guò)顯卡福铅，將Layout后的節(jié)點(diǎn)內(nèi)容分別呈現(xiàn)到屏幕上萝毛。
三 ： 需要注意的是：
- 當(dāng)我們?yōu)g覽器獲得HTML文件后，會(huì)自上而下的加載滑黔，并在加載過(guò)程中進(jìn)行解析和渲染笆包。
- 加載說(shuō)的就是獲取資源文件的過(guò)程，如果在加載過(guò)程中遇到外部CSS文件和圖片略荡，瀏覽器會(huì)另外發(fā)送一個(gè)請(qǐng)求庵佣，去獲取CSS文件和相應(yīng)的圖片，這個(gè)請(qǐng)求是異步的汛兜，并不會(huì)影響HTML文件的加載巴粪。
- 但是如果遇到Javascript文件，HTML文件會(huì)掛起渲染的進(jìn)程粥谬，等待JavaScript文件加載完畢后肛根，再繼續(xù)進(jìn)行渲染。
為什么HTML需要等待JavaScript呢漏策？因?yàn)镴avaScript可能會(huì)修改DOM派哲，導(dǎo)致后續(xù)HTML資源白白加載，所以HTML必須等待JavaScript文件加載完畢后掺喻，再繼續(xù)渲染芭届，這也就是為什么JavaScript文件在寫在底部body標(biāo)簽前的原因储矩。
四 ： 瀏覽器渲染的整個(gè)流程
瀏覽器整個(gè)流程如上圖所示：
- 當(dāng)用戶輸入一個(gè)URL時(shí)，瀏覽器就會(huì)向服務(wù)器發(fā)出一個(gè)請(qǐng)求褂乍，請(qǐng)求URL對(duì)應(yīng)的資源
- 接受到服務(wù)器的響應(yīng)內(nèi)容后持隧，瀏覽器的HTML解析器，會(huì)將HTML文件解析成一棵DOM樹逃片，DOM樹的構(gòu)建是一個(gè)深度遍歷的過(guò)程舆蝴，當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)都構(gòu)建完成以后，才會(huì)去構(gòu)建當(dāng)前節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)题诵。
- 將CSS解析成CSSOM樹（CSS Rule Tree）
- 根據(jù)DOM樹和CSSOM樹，來(lái)構(gòu)建Render Tree（渲染樹）,注意渲染樹层皱，并不等于DOM樹性锭，因?yàn)橐恍┫駂ead或display:none的東西，就沒(méi)有必要放在渲染樹中了叫胖。
- 有了Render Tree草冈，瀏覽器已經(jīng)能知道網(wǎng)頁(yè)中有哪些節(jié)點(diǎn)，各個(gè)節(jié)點(diǎn)的CSS定義瓮增，以及它們的從屬關(guān)系怎棱，下一步操作就是Layout,顧名思義，就是計(jì)算出每個(gè)節(jié)點(diǎn)在屏幕中的位置绷跑。
- Layout后拳恋，瀏覽器已經(jīng)知道哪些節(jié)點(diǎn)要顯示，每個(gè)節(jié)點(diǎn)的CSS屬性是什么砸捏，每個(gè)節(jié)點(diǎn)在屏幕中的位置是哪里谬运，就進(jìn)入了最后一步painting,按照算出來(lái)的規(guī)則，通過(guò)顯卡垦藏，把內(nèi)容畫到屏幕上梆暖。
這里還要說(shuō)兩個(gè)概念，一個(gè)是Reflow掂骏，另一個(gè)是Repaint轰驳。這兩個(gè)不是一回事。
- Repaint ——改變某個(gè)元素的背景色弟灼、文字顏色级解、邊框顏色等等不影響它周圍或內(nèi)部布局的屬性時(shí)，屏幕的一部分要重畫田绑，但是元素的幾何尺寸沒(méi)有變蠕趁。
- Reflow ——元件的幾何尺寸變了，我們需要重新驗(yàn)證并計(jì)算Render Tree辛馆。是Render Tree的一部分或全部發(fā)生了變化俺陋。
- reflow 幾乎是無(wú)法避免的』硌樱現(xiàn)在界面上流行的一些效果，比如樹狀目錄的折疊腊状、展開（實(shí)質(zhì)上是元素的顯 示與隱藏）等诱咏，都將引起瀏覽器的 reflow。鼠標(biāo)滑過(guò)缴挖、點(diǎn)擊……只要這些行為引起了頁(yè)面上某些元素的占位面積袋狞、定位方式、邊距等屬性的變化映屋，都會(huì)引起它內(nèi)部苟鸯、周圍甚至整個(gè)頁(yè)面的重新渲 染。通常我們都無(wú)法預(yù)估瀏覽器到底會(huì) reflow 哪一部分的代碼棚点，它們都彼此相互影響著早处。
注：display:none會(huì)觸發(fā)reflow，而visibility:hidden只會(huì)觸發(fā)repaint瘫析，因?yàn)闆](méi)有發(fā)現(xiàn)位置變化砌梆。
五 : DOM和CSSOM的具體構(gòu)建流程：
DOM 和 CSSOM 都是以" Bytes → characters → tokens → nodes → object model. " 這樣的方式生成最終的數(shù)據(jù)。如下圖所示：
具體到DOM樹的構(gòu)建贬循，如下圖：
1咸包、 當(dāng)服務(wù)器返回一個(gè)HTML文件給瀏覽器的時(shí)候，瀏覽器接受到的是一些字節(jié)數(shù)據(jù)杖虾。
2烂瘫、 然后瀏覽器根據(jù)HTTP響應(yīng)中的編碼方式（通過(guò)是UTF8），解析字節(jié)數(shù)據(jù)奇适，得到一些字符忱反。如果這個(gè)時(shí)候編碼方式跟文件的字節(jié)編碼不一致，便會(huì)出現(xiàn)亂碼滤愕。所以我們通過(guò)使用<meta http-equiv="content-type"content="text/html;charset=utf-8">來(lái)告訴瀏覽器我們頁(yè)面使用的是什么編碼温算。
3、 這個(gè)時(shí)候间影，瀏覽器再根據(jù)DTD中的對(duì)元素（標(biāo)簽）的定義注竿，對(duì)這些接受到的字符進(jìn)行語(yǔ)義化(token)。我們經(jīng)常在html文件的第一行魂贬，定義<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">巩割，這個(gè)DTD就是告訴瀏覽器，那些字符是有意義的付燥，那些字符是無(wú)意義的宣谈。DTD常見(jiàn)的有嚴(yán)格、過(guò)渡键科、框架和HTML5三種闻丑。不同的DTD中漩怎，有不同的元素定義。比如過(guò)渡的DTD中就比嚴(yán)格的DTD中多出了<center>嗦嗡、<font>等等一些元素的定義勋锤，也就是說(shuō)使用嚴(yán)格的DTD，即使你在你的HTML文件中使用了<center>侥祭，瀏覽器也會(huì)忽略掉的叁执。所以也就有了一些人使用不同的DTD或者不使用DTD的時(shí)候，布局會(huì)明顯不同的原因了矮冬。
4谈宛、 接著，瀏覽器再使用這些語(yǔ)義塊(token)創(chuàng)建對(duì)象胎署，形成一個(gè)個(gè)節(jié)點(diǎn)了吆录。
5、 然后HTML解析器就會(huì)從HTML文件的頭部到尾部硝拧，一個(gè)個(gè)地遍歷這些節(jié)點(diǎn)。當(dāng)這些節(jié)點(diǎn)是普通節(jié)點(diǎn)的話葛假，HTML解析器就會(huì)將這些節(jié)點(diǎn)加入到DOM樹中障陶。當(dāng)這些節(jié)點(diǎn)是JS代碼的話，HTML解析器就會(huì)將控制權(quán)交給JS解析器聊训。如果這些節(jié)點(diǎn)是CSS代碼的話抱究，HTML解析器就會(huì)將控制權(quán)交給CSS解析器。不過(guò)带斑，當(dāng)外聯(lián)的JS代碼和CSS代碼還沒(méi)從服務(wù)器傳到瀏覽器的時(shí)候鼓寺，這個(gè)時(shí)候如果DOM樹上有可視元素的話，瀏覽器通常會(huì)選擇在這個(gè)時(shí)候勋磕，將一些內(nèi)容提前渲染到屏幕上來(lái)妈候。
6、 當(dāng)HTML解析器讀到最后一個(gè)節(jié)點(diǎn)的時(shí)候挂滓，整個(gè)DOM樹也構(gòu)建完成了苦银，這個(gè)時(shí)候就會(huì)觸發(fā)domContentloaded事件。而很多JS庫(kù)（像JQ）通常會(huì)在這個(gè)時(shí)候有所反應(yīng)的赶站。
至此幔虏，DOM樹就全部構(gòu)建完成了。
