重繪

重繪就是重新繪畫，重繪是一個元素外觀的改變所觸發(fā)的瀏覽器行為，當給一個元素更換顏色、更換背景，雖然不會影響頁面布局，但是顏色或背景變了，瀏覽器就會根據(jù)元素的新屬性重新繪制，這就是重繪

回流

當增加或刪除 dom 節(jié)點，或者給元素修改寬高時，會改變頁面布局，那么就會重新構造 dom 樹然后再次進行渲染，這就是回流

總結

• 重繪不會引起 dom 結構和頁面布局的變化，只是樣式的變化，有重繪不一定有回流
• 回流則是會引起 dom 結構和頁面布局的變化，有回流就一定有重繪
  不管怎么說都是會影響性能

怎么進行優(yōu)化或減少？

• 1、多個屬性盡量使用簡寫，例如：boder 可以代替 boder-width、boder-color、boder-style
• 2、創(chuàng)建多個 dom 節(jié)點時，使用 documentfragment 創(chuàng)建
• 3、避免使用 table 布局
• 4、避免設置多層內聯(lián)樣式，避免節(jié)點層級過多
• 5、避免使用 css 表達式
• 6、將頻繁重繪或回流的節(jié)點設置為圖層，圖層能夠阻止該節(jié)點的渲染行為影響到別的節(jié)點（例：will-change \ video \ iframe等標簽），瀏覽器會自動將該節(jié)點變?yōu)閳D層
• 7、脫離文檔流之后進行的任何操作，都不會造成回流了，復雜操作的地方，不妨使用 position：absolute / fixed定位