什么是網(wǎng)頁(yè)
首先,我們知道網(wǎng)頁(yè)是由html+css+javascript三大部分組成的,我們可以形象的把網(wǎng)頁(yè)比喻成一個(gè)人,html就是他的樣子,根據(jù)內(nèi)容來(lái)形容他的高矮胖瘦,css就是他的外表,他的著裝是否華麗,五官是否精美,那么JavaScript的就相當(dāng)于人的行為與動(dòng)作.所以通過(guò)html稽穆、css、javascript可以組成一個(gè)完整的網(wǎng)頁(yè)只洒。
那瀏覽器流程是怎樣的呢？
我們先來(lái)看看下面這幅圖
image.png
從上面的圖可以看出锋恬，瀏覽器會(huì)解析三個(gè)東西
一個(gè)是HTML也物，解析它時(shí)會(huì)產(chǎn)生一個(gè)DOM Tree。
CSS黑低，解析CSS锤灿， 構(gòu)建 CSSOM Tree挽拔。
Javascript，腳本但校，主要是通過(guò)DOM API和CSSOM API來(lái)操作DOM Tree和CSS Rule Tree.
解析完成后螃诅，瀏覽器引擎會(huì)通過(guò)DOM Tree 和 CSS Rule Tree 來(lái)構(gòu)造 Rendering Tree。注意：
Rendering Tree 渲染樹(shù)并不等同于DOM樹(shù)状囱，因?yàn)橐恍┫馠eader或display:none的東西就沒(méi)必要放在渲染樹(shù)中了术裸。
CSS 的 Rule Tree主要是為了完成匹配并把CSS Rule附加上Rendering Tree上的每個(gè)Element。也就是DOM結(jié)點(diǎn)亭枷。也就是所謂的Frame袭艺。
然后，計(jì)算每個(gè)Frame（也就是每個(gè)Element）的位置叨粘，這又叫l(wèi)ayout和reflow過(guò)程猾编。
3）最后通過(guò)調(diào)用操作系統(tǒng)Native GUI的API繪制。
