原文地址：http://www.cnblogs.com/shenqi0920/p/3545820.html#undefined
最近在看文檔的時候 又看到 一篇關(guān)于前端優(yōu)化的文章鲫骗，說到 為了減少頁面“回流”應(yīng)該盡量少用“reflow”,然后就一臉懵逼。不知道說的是什么颂碧。還有與之對應(yīng)的 另外一個“repaint--重繪”；為了花嘶，讓自己深刻的理解喧兄，故 做一下備份。
前言：
頁面設(shè)計(jì)中圾另，不可避免的需要瀏覽器進(jìn)行repaint和reflow偎血。那到底什么是repaint和reflow呢诸衔。下面談?wù)勛约簩epaint和reflow的理解，以及結(jié)合其他技術(shù)牛的講解颇玷，談?wù)勅绾蝺?yōu)化repaint和reflow笨农。
初步介紹：
開發(fā)一個頁面時，不可避免的需要進(jìn)行repaint和reflow帖渠。也就只有古來的靜態(tài)頁面才會不存在repaint和reflow谒亦。repaint主要是針對某一個DOM元素進(jìn)行的重繪，reflow則是回流，針對整個頁面的重排份招。字面意思來說：repaint就是重繪切揭，reflow就是回流。repaint和reflow的目的是：展示一個新的頁面樣貌锁摔。
嚴(yán)重性：
在性能優(yōu)先的前提下伴箩，性能消耗 reflow大于repaint。
體現(xiàn)：
repaint是某個DOM元素進(jìn)行重繪鄙漏；reflow是整個頁面進(jìn)行重排，也就是頁面所有DOM元素渲染棺蛛。
如何觸發(fā)：
style變動造成repaint和reflow怔蚌。
不涉及任何DOM元素的排版問題的變動為repaint，例如元素的color/text-align/text-decoration等等屬性的變動旁赊。
除上面所提到的DOM元素style的修改基本為reflow桦踊。例如元素的任何涉及長、寬终畅、行高籍胯、邊框、display等style的修改离福。
常見觸發(fā)場景：
觸發(fā)repaint：color的修改杖狼，如color=#ddd；
text-align的修改妖爷，如text-align=center蝶涩；
a:hover也會造成重繪。
:hover引起的顏色等不導(dǎo)致頁面回流的style變動絮识。
等等太多绿聘，一時間寫出來也太難想了。
觸發(fā)reflow：
width/height/border/margin/padding的修改次舌，如width=778px熄攘；
動畫，:hover等偽類引起的元素表現(xiàn)改動彼念，display=none等造成頁面回流挪圾；
appendChild等DOM元素操作；
font類style的修改国拇；
background的修改洛史，注意著字面上可能以為是重繪，但是瀏覽器確實(shí)回流了酱吝，經(jīng)過瀏覽器廠家的優(yōu)化也殖，部分background的修改只觸發(fā)repaint，當(dāng)然IE不用考慮；
scroll頁面忆嗜，這個不可避免己儒；
resize頁面，桌面版本的進(jìn)行瀏覽器大小的縮放捆毫，移動端的話闪湾，還沒玩過能拖動程序，resize程序窗口大小的多窗口操作系統(tǒng)绩卤。
讀取元素的屬性（這個無法理解途样，但是技術(shù)達(dá)人是這么說的，那就把它當(dāng)做定理吧）：讀取元素的某些屬性（offsetLeft濒憋、offsetTop何暇、offsetHeight、offsetWidth凛驮、scrollTop/Left/Width/Height裆站、clientTop/Left/Width/Height、getComputedStyle()黔夭、currentStyle(in IE))宏胯；
如何避免：
說避免那是不可能的，不然就是以前古老的靜態(tài)頁面了本姥，沒有交互肩袍，那在現(xiàn)在看來，就是一個失敗的作品婚惫。所以了牛，在我們進(jìn)行網(wǎng)頁設(shè)計(jì)的時候，就必須盡量減少頁面的repaint和reflow辰妙。repaint和reflow的目的是為了展示一個新的頁面鹰祸，那么我們在進(jìn)行頁面交互時，盡量通過各種方法減少repaint和reflow但又能展示一個新的頁面的目的密浑。所以下面將結(jié)合其他技術(shù)達(dá)人的建議蛙婴，通過自己的理解，給大家講解如何避免和優(yōu)化repaint和reflow：
下面是大神Nicole Sullivan的原話：
Change classes on the element you wish to style (as low in the dom tree as possible)
Avoid setting multiple inline styles
Apply animations to elements that are position fixed or absolute
Trade smoothness for speed
Avoid tables for layout
Avoid JavaScript expressions in the CSS (IE only)
盡可能在DOM末梢通過改變class來修改元素的style屬性：盡可能的減少受影響的DOM元素尔破。
避免設(shè)置多項(xiàng)內(nèi)聯(lián)樣式：使用常用的class的方式進(jìn)行設(shè)置樣式街图，以避免設(shè)置樣式時訪問DOM的低效率。
設(shè)置動畫元素position屬性為fixed或者absolute：由于當(dāng)前元素從DOM流中獨(dú)立出來懒构，因此受影響的只有當(dāng)前元素餐济，元素repaint。
犧牲平滑度滿足性能：動畫精度太強(qiáng)胆剧，會造成更多次的repaint/reflow絮姆，犧牲精度醉冤，能滿足性能的損耗，獲取性能和平滑度的平衡篙悯。
避免使用table進(jìn)行布局：table的每個元素的大小以及內(nèi)容的改動蚁阳，都會導(dǎo)致整個table進(jìn)行重新計(jì)算，造成大幅度的repaint或者reflow鸽照。改用div則可以進(jìn)行針對性的repaint和避免不必要的reflow螺捐。
避免在CSS中使用運(yùn)算式：學(xué)習(xí)CSS的時候就知道，這個應(yīng)該避免矮燎，不應(yīng)該加深到這一層再去了解定血，因?yàn)檫@個的后果確實(shí)非常嚴(yán)重，一旦存在動畫性的repaint/reflow诞外，那么每一幀動畫都會進(jìn)行計(jì)算糠悼，性能消耗不容小覷。
參考文獻(xiàn)：
頁面重構(gòu)應(yīng)注意的repaint和reflow
如何減少瀏覽器repaint和reflow（上）
回流與重繪：CSS性能讓JavaScript變慢浅乔？
Reflows & Repaints: CSS Performance making your JavaScript slow?
