圖片.png
JavaScript：一般來說塔沃，我們會使用 JavaScript 來實現(xiàn)一些視覺變化的效果。比如做一個動畫或者往頁面里添加一些 DOM 元素等阳谍。
Style：計算樣式蛀柴，這個過程是根據(jù) CSS 選擇器，對每個 DOM 元素匹配對應的 CSS 樣式矫夯。這一步結束之后鸽疾，就確定了每個 DOM 元素上該應用什么 CSS 樣式規(guī)則。
Layout：布局训貌，上一步確定了每個 DOM 元素的樣式規(guī)則制肮，這一步就是具體計算每個 DOM 元素最終在屏幕上顯示的大小和位置。web 頁面中元素的布局是相對的递沪，因此一個元素的布局發(fā)生變化豺鼻，會聯(lián)動地引發(fā)其他元素的布局發(fā)生變化。比如区拳，<body> 元素的寬度的變化會影響其子元素的寬度拘领，其子元素寬度的變化也會繼續(xù)對其孫子元素產(chǎn)生影響意乓。因此對于瀏覽器來說樱调，布局過程是經(jīng)常發(fā)生的。
Paint：繪制届良，本質(zhì)上就是填充像素的過程笆凌。包括繪制文字、顏色士葫、圖像乞而、邊框和陰影等，也就是一個 DOM 元素所有的可視效果慢显。一般來說爪模，這個繪制過程是在多個層上完成的欠啤。
Composite：渲染層合并，由上一步可知屋灌，對頁面中 DOM 元素的繪制是在多個層上進行的洁段。在每個層上完成繪制過程之后，瀏覽器會將所有層按照合理的順序合并成一個圖層共郭，然后顯示在屏幕上祠丝。對于有位置重疊的元素的頁面，這個過程尤其重要除嘹，因為一旦圖層的合并順序出錯写半，將會導致元素顯示異常。
