《頁面重構(gòu)應注意repaint和reflow的9個問題》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302349622013.htm

2. 什么情況下會觸發(fā)瀏覽器的repaint/reflow?

一個頁面由兩局部組成：
DOM：描述該頁面的結(jié)構(gòu)
render：描寫 DOM 節(jié)點 (nodes) 在頁面上如何出現(xiàn)

3.生成一個渲染樹（render tree）。這個渲染樹和DOM樹的不同之處在于，它是受款式影響的。它不包含那些不可見的節(jié)點。

援用:
 ,頁面設(shè)計中的中文測試;     ,面向?qū)ο蟮腦HTML與CSS編程; 對Layout屬性中非引用類型的值（數(shù)字型），如果需要屢次拜訪則可以在一次訪問時先存儲到局部變量中，之后都應用部分變量，這樣可以防止每次讀取屬性時造成瀏覽器的渲染。
4. 設(shè)置元素的position為absolute或fixed

引用:
       許多情形下都會觸發(fā)reflow，如果css里有expression，每次都會重新計算一遍

這兩個過程是很消耗瀏覽器性能的, 從 IE 系列和 Chrome 渲染頁面速度上的差距即可看出渲染引擎計算對應值和浮現(xiàn)并不必定高效, 而每次對元素的操作都會產(chǎn)生 repaints 或 reflow, 因而編寫 DOM 交互時如果不注意就會導致頁面機能低下.
頁面渲染的過程如下：

除了頁面在首次加載時必定要閱歷該過程之外，還有以下行動會觸發(fā)這個行為：
引用:
1. DOM元素的增加、修改（內(nèi)容）、刪除( Reflow + Repaint)
2. 僅修改DOM元素的字體色彩（只有Repaint，由于不需要調(diào)劑布局）
3. 利用新的樣式或者修改任何影響元素外觀的屬性
4. Resize瀏覽器窗口、轉(zhuǎn)動頁面
5. 讀取元素的某些屬性（offsetLeft、offsetTop、offsetHeight、offsetWidth、 scrollTop/Left/Width/Height、clientTop/Left/Width/Height、 getComputedStyle()、currentStyle(in IE))
3. 怎么優(yōu)化？

引用:
     ,非常實用的CSS統(tǒng)計圖表實例;  不要用tables布局的另一個起因就是tables中某個元素一旦觸發(fā)reflow就會導致table里所有的其它元素 reflow。在合適用table的場所，可以設(shè)置table-layout為auto或fixed，這樣可以讓table一行一行的渲染，這種做法也是為了限度reflow的影響范疇
7. 不要在css里面寫expression

引用:
       在元素的position為static和relative時，元素處于DOM樹構(gòu)造當中，當對元素的某個操作需要重新渲染時，瀏覽器會渲染全部頁 面。將元素的position設(shè)置為absolute跟fixed能夠使元素從DOM樹結(jié)構(gòu)中脫離出來獨破的存在，而瀏覽器在需要渲染時只須要渲染該元素 以及位于該元素下方的元素，從而在某種水平上縮短瀏覽器渲染時光，這在當今越來越多的Javascript動畫方面尤其值得斟酌。
5. 衡量速度的平滑

引用:
       1. 盡可能少的修改元素style上的屬性
       2. 盡量通過修改className來修改樣式
       3. 通過cssText屬性來設(shè)置樣式值
3. 緩存Layout屬性值

1. 什么是 repaint 和 reflow？

當 DOM 元素的屬性發(fā)生變化 (如 color) 時, 瀏覽器會告訴 render 重新描寫相應的元素, 此過程稱為 repaint。

引用:
      ,靜態(tài)頁面制作注意事項; 比方實現(xiàn)一個動畫，以1個像素為單位挪動這樣最平滑，但reflow就會過于頻繁，CPU很快就會被完整占用。如果以3個像素為單位移動就會好良多。
6,陳凱：淺談影響B(tài)2C網(wǎng)站轉(zhuǎn)化率的七大因素. 不要用tables布局

 在這里收拾了一下相干材料，先容一下頁面重構(gòu)應留神repaint和reflow的9個問題

Tag：   reflow   repaint   頁面重構(gòu)     reflow   repaint   頁面重構(gòu)  

4.當渲染樹天生之后，瀏覽器就會在屏幕上“畫”出所有渲染樹中的節(jié)點。

引用:
1. 先將元素從document中刪除，完成修改后再把元素放回原來的地位
2. 將元素的display設(shè)置為”none”，實現(xiàn)修改后再把display修正為本來的值
3. 如果需要創(chuàng)建多個DOM節(jié)點，可以使用DocumentFragment創(chuàng)立完后一次性的參加document
2. 集中修改樣式

--> [網(wǎng)站建設(shè)之]頁面重構(gòu)應注意repaint和reflow的9個問題

1.解析HTML代碼并生成一個 DOM 樹。

假如該次變更波及元素布局 (如 width), 閱讀器則擯棄原有屬性, 從新盤算并把成果傳遞給 render 以重新刻畫頁面元素, 此進程稱為 reflow。

1. 避免在document上直接進行頻繁的DOM操作，如果確切需要可以采取off-document的方法進行，詳細的方式包括但不完全包括以下多少種：

2.解析CSS文件，次序為：瀏覽器默認樣式->自定義樣式->頁面內(nèi)的樣式。

(責任編輯：網(wǎng)站建設(shè))
頁面重構(gòu)應注意repaint和reflow的9個問題相關(guān)文章