更新了元素的幾何屬性（重排）
從上圖可以看出，如果你通過(guò) JavaScript 或者 CSS 修改元素的幾何位置屬性暮蹂，例如改變?cè)氐膶挾饶臁⒏叨鹊龋敲礊g覽器會(huì)觸發(fā)重新布局仰泻，解析之后的一系列子階段荆陆，這個(gè)過(guò)程就叫重排。無(wú)疑集侯，重排需要更新完整的渲染流水線被啼，所以開銷也是最大的。
更新元素的繪制屬性（重繪）
從圖中可以看出棠枉，如果修改了元素的背景顏色浓体，那么布局階段將不會(huì)被執(zhí)行，因?yàn)椴](méi)有引起幾何位置的變換辈讶，所以就直接進(jìn)入了繪制階段命浴，然后執(zhí)行之后的一系列子階段，這個(gè)過(guò)程就叫重繪。相較于重排操作生闲，重繪省去了布局和分層階段媳溺，所以執(zhí)行效率會(huì)比重排操作要高一些。
直接合成階段
在上圖中跪腹，我們使用了 CSS 的 transform 來(lái)實(shí)現(xiàn)動(dòng)畫效果褂删，這可以避開重排和重繪階段，直接在非主線程上執(zhí)行合成動(dòng)畫操作冲茸。這樣的效率是最高的屯阀，因?yàn)槭窃诜侵骶€程上合成，并沒(méi)有占用主線程的資源轴术，另外也避開了布局和繪制兩個(gè)子階段难衰，所以相對(duì)于重繪和重排，合成能大大提升繪制效率逗栽。
