開局一張圖，下面全靠編..O Yeah!
瀏覽器渲染過(guò)程.jpg
渲染步驟：
- 瀏覽解析html针贬，生成DOM tree(深度優(yōu)先)
- 解析css击费，生成css rule tree
- DOM tree和cssOM構(gòu)造render tree
- layout(已知各個(gè)節(jié)點(diǎn)的css定義和從屬關(guān)系，計(jì)算每個(gè)節(jié)點(diǎn)出現(xiàn)在屏幕中的位置)
- 繪制
- 顯示
回流桦他、重繪
回流：頁(yè)面布局發(fā)生變化時(shí)蔫巩，DOM重新構(gòu)建，渲染樹也會(huì)重新渲染(是否觸發(fā)layout)
重繪：是否觸發(fā)painting
回流觸發(fā)
- 頁(yè)面首次渲染
- 元素刪減
- 幾何屬性變化(尺寸)
- 元素位置變更
- 獲取元素的偏移量屬性(瀏覽器為了保證值的正確也會(huì)回流獲取最新的值)
- resize事件
transform
transform是通過(guò)創(chuàng)建一個(gè)RenderLayers(渲染)合成層快压，擁有獨(dú)立的GraphicsLayers(繪圖層)圆仔，每一個(gè)GraphicsLayers都有一個(gè)Graphics content進(jìn)行繪制，輸出位圖合并展示
獨(dú)立的合成層
- 有3D或者transform的css屬性的層
- video蔫劣、canvas元素的層
- flash
