iT邦幫忙

DAY 8
2

jQuery 套件開發之我可不可以跳著說系列 第 8

jQuery套件開發(八),怎麼樣把element 放進DOM中才好呢。

提升效能重要的觀念

如何提升element放進dom的速度呢?

<文章列表>
IT人生組文章
--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/20 : IT人的創意
http://ithelp.ithome.com.tw/question/10127866
--9/19 : 程式設計師的成就感
http://ithelp.ithome.com.tw/question/10127573

開發技術組文章
--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
--9/19 : jQuery套件開發(四),預設值與設定值的差別
http://ithelp.ithome.com.tw/question/10127575

全列表
http://ithelp.ithome.com.tw/ironman6/player/sheephead081/alll/1
今天我們把腳步放慢一點
來討論怎麼樣把element 放進DOM中才好呢?

我以前都是這樣寫的

for (var i=0; i<1000; i++)
{
    var _tr = $('<tr><td>'+ i +'</td></tr>')
      .appendTo(_tb) ;   
}

感覺很對,但實際上很慢。
因為如果以結果論,你要的只是貼完TR的結果。
在迴圈的每一次,你都用了一次$() 函式。
並貼到畫面上
會算數學都知道,你用了1000次$()這個函式跟1000次appendTo函式
還不考慮你修改畫面觸發reflow對瀏覽器的影響。

這樣寫才對

var _strNode = '' ;
for (var i=0; i<1000; i++)
{
    _strNode += '<tr><td>'+ i +'</td></tr>' ;
}
_tb.append($(_strNode)) ;

你只是在執行字串累加,最後執行了$()與append()各一次
我們會懷疑,$() 應付得了那麼大的字串
解析不用花費時間嗎?
有空可以看一下大師的文章
[
http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly
](<br />
http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly&lt;br />
)

大師的文章有一段提到下面這種寫法
個人覺得程式可讀性滿差的。所以我不喜歡~

var arr = reallyLongArray;
var textToInsert = [];
var i = 0;
var length = arr.length;
for (var a = 0; a <length; a += 1) {
    textToInsert[i++]  = '<tr><td name="pieTD">';
    textToInsert[i++] = arr[a];
    textToInsert[i++] = '</td> </tr>' ;
  
}
$('table').append(textToInsert.join(''));

each也沒有一定要用到阿。
用for來跑,效果一樣。自己斟酌嚕。

恩,期待明天的相會喔~


上一篇
jQuery套件開發之(七),實作套件。
下一篇
jQuery套件開發(九),了解reflow的概念。
系列文
jQuery 套件開發之我可不可以跳著說26

2 則留言

0
fillano
iT邦超人 1 級 ‧ 2013-09-24 16:49:17

現在覺得,使用$.each或是ES5的Array comprehensions,有一個好處是協助解決非同步的問題。在for中間如果有非同步操作,等到非同步操作被執行時,for其實已經跑完了...一個解法是利用closure來保存變數,有了$.each或ES5的array comprehensions,就不用這麼麻煩。

恩,的確是另一個面向的考慮! 感謝

我要留言

立即登入留言