畫面繪製需要成本。

你了解觸發的時機嗎?

怎麼改善呢? 進來坐坐吧^^

<文章列表>
IT人生組文章
--9/24 : 連鎖效應後的反思 - 瀏覽衝量十法
http://ithelp.ithome.com.tw/question/10129219
--9/23 : 半澤直樹 - 連鎖效應後的反思
http://ithelp.ithome.com.tw/question/10128966
--9/23 : 推薦大家看半澤直樹
http://ithelp.ithome.com.tw/question/10128756
--9/22 : 不要在電梯裡面討論HTML
http://ithelp.ithome.com.tw/question/10128407
--9/21 : IT人的人生觀
http://ithelp.ithome.com.tw/question/10128168

開發技術組文章
--9/24 : jQuery套件開發(九)，了解reflow的概念
http://ithelp.ithome.com.tw/question/10129232
--9/23 : jQuery套件開發(八)，怎麼樣把element 放進DOM中才好呢。
http://ithelp.ithome.com.tw/question/10128771
--9/22 : jQuery套件開發(七)，實作套件。
http://ithelp.ithome.com.tw/question/10128406
--9/21 : jQuery套件開發(六)，套件的整個流程的小構思。
http://ithelp.ithome.com.tw/question/10128176
--9/20 : jQuery套件開發(五)，套件的定義
http://ithelp.ithome.com.tw/question/10127881

全列表
http://ithelp.ithome.com.tw/ironman6/player/sheephead081/alll/1
今天，我們把腳步放慢一點(…這句話好耳熟)

來了解一下reflow是甚麼意思。

大家都說DOM cost a lot

主因是因為你每次修改DOM瀏覽器都會重畫整個畫面。

這篇文章寫的不賴

http://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/

不負責引用…底下的情形會觸發reflow
1.When you add or remove a DOM node.
2.When you apply a style dynamically (such as element.style.width="10px").
3.When you retrieve a measurement that must be calculated, such as accessing offsetWidth, clientHeight, or
any computed CSS value (via getComputedStyle() in DOM-compliant browsers or currentStyle in IE),
while DOM changes are queued up to be made.
4.按F5( 喂! )

所以我們可以說，前端設計師很大的效能控管要來自於對DOM的了解、對reflow減少觸發的次數。

以下講述滿抽象的<-真的請前輩指正...

我覺得整個DOM 你可以想像是一個大海。

瀏覽器是一個繪製海面的立體圖的儀器，我們叫他Idraw好了。

所以當海底有甚麼東西浮出海面的時候，Idraw會去執行重新繪製也就是reflow

我們今天要在海面上作一個美麗的島嶼，島上有樹、有石頭、有動物。

為了減少reflow
我們最好把島嶼像樂高一樣拼好之後再一次浮出來。

而不是作好甚麼就先把甚麼東西浮在海面上。

另外一個觸動reflow的狀況就是

海面上有個海妖在吹嗩吶。你想用你的神力把嗩吶弄大一點、女妖頭髮改成金黃色(胸部也大一點)

你該作的事情不是下面這樣

海妖.style.嗩吶 = '200%';
海妖.style.髮色 = '金黃色' ;

因為你的每一次的指令送出，都會讓Idraw重新繪製，即便中間的時間差很小!

你應該要用class來控管海妖新外表。

class 
{
    嗩吶: ’200%’;
    髮色: ‘金黃色’ ;
}

海妖.classList.add('class'); or $(海妖).addClass('class') ;

如果你要作的改變是巨量的。

理論上你是應該要把這個元素移除掉

在海面下作好新的女妖之後再上架。

或是你可以利用jQuery的detach函式。

恩~明天就來實做看看吧~

讚喔!