重繪：當(dāng)頁(yè)面元素樣式的改變不影響布局時(shí)，瀏覽器重新對(duì)元素進(jìn)行更新的過(guò)程叫做重繪。

重排：當(dāng)頁(yè)面元素的尺寸、結(jié)構(gòu)、或某些屬性發(fā)生改變時(shí)，瀏覽器重新渲染部分或全部文檔的過(guò)程叫做重排也叫做回流。

一個(gè)頁(yè)面由兩部分組成：

DOM：描述該頁(yè)面的結(jié)構(gòu)

render：描述 DOM 節(jié)點(diǎn) (nodes) 在頁(yè)面上如何呈現(xiàn)

當(dāng) DOM 元素的屬性發(fā)生變化 (如 color) 時(shí), 瀏覽器會(huì)通知 render 重新描繪相應(yīng)的元素, 此過(guò)程稱(chēng)為 repaint。

如果該次變化涉及元素布局 (如 width), 瀏覽器則拋棄原有屬性, 重新計(jì)算并把結(jié)果傳遞給 render 以重新描繪頁(yè)面元素, 此過(guò)程稱(chēng)為 reflow。

這兩個(gè)過(guò)程是很耗費(fèi)瀏覽器性能的, 從 IE 系列和 Chrome 渲染頁(yè)面速度上的差距即可看出渲染引擎計(jì)算對(duì)應(yīng)值和呈現(xiàn)并不一定高效, 而每次對(duì)元素的操作都會(huì)發(fā)生 repaints 或 reflow, 因此編寫(xiě) DOM 交互時(shí)如果不注意就會(huì)導(dǎo)致頁(yè)面性能低下

頁(yè)面渲染的過(guò)程如下：

1.解析HTML代碼并生成一個(gè) DOM 樹(shù)。

2.解析CSS文件，順序?yàn)椋簽g覽器默認(rèn)樣式->自定義樣式->頁(yè)面內(nèi)的樣式。

3.生成一個(gè)渲染樹(shù)（render tree）。這個(gè)渲染樹(shù)和DOM樹(shù)的不同之處在于，它是受樣式影響的。它不包括那些不可見(jiàn)的節(jié)點(diǎn)。

4.當(dāng)渲染樹(shù)生成之后，瀏覽器就會(huì)在屏幕上“畫(huà)”出所有渲染樹(shù)中的節(jié)點(diǎn)。

不管頁(yè)面發(fā)生了重繪還是重排，它們都會(huì)影響性能（最可怕的是重排 ，應(yīng)盡量避免）

下列情況會(huì)發(fā)生重排

頁(yè)面初始渲染

添加/刪除可見(jiàn)DOM元素

改變?cè)匚恢?

改變?cè)爻叽纾▽挕⒏摺?nèi)外邊距、邊框等）

改變?cè)貎?nèi)容（文本或圖片等）

改變窗口尺寸

如何減少重排和重繪（提高性能）

由于回流和重繪會(huì)帶來(lái)很大的性能開(kāi)銷(xiāo)，所以在開(kāi)發(fā)中我們要盡量避免或減少回流和重繪的次數(shù)來(lái)提高性能

1.      避免頻繁讀取會(huì)引發(fā)回流/重繪的屬性，如果確實(shí)需要多次使用，就用一個(gè)變量緩存起來(lái)。

2.     對(duì)具有復(fù)雜動(dòng)畫(huà)的元素使用絕對(duì)定位，使其脫離文檔流，否則會(huì)引起父元素及后續(xù)元素頻繁回流。

3.     要避免頻繁的去操作DOM，可以通過(guò)創(chuàng)建documentFragment，完成所有所有DOM操作后，最后再把它添加到文檔中。

4.     避免頻繁操作樣式，最好一次性重寫(xiě)style屬性，或者將樣式列表定義為class并一次性更改class屬性。

1.分離讀寫(xiě)操作

var curLeft=div.offsetLeft;

var curTop=div.offsetTop;

div.style.left=curLeft+1+’px’;

div.style.top=curTop+1+’px’;

2.樣式集中改變 ,可以添加一個(gè)類(lèi)，樣式都在類(lèi)中改變

3.可以使用absolute脫離文檔流。

4.使用 display:none ，不使用 visibility，也不要改變 它的 z-index

5.能用css3實(shí)現(xiàn)的就用css3實(shí)現(xiàn)。

區(qū)別：

1. 重繪的性能開(kāi)銷(xiāo)較低，重排的性能開(kāi)銷(xiāo)較高；

2. 回流（重排）一定會(huì)觸發(fā)重繪，而重繪不一定會(huì)回流（重排）