速度差異，將近十倍。

<文章列表>
IT人生組文章
--9/25 : 瀏覽衝量十法(完)
http://ithelp.ithome.com.tw/question/10129651
--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/25 : jQuery套件開發(十)，element放入DOM相關速度測試。
http://ithelp.ithome.com.tw/question/10129658
--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

全列表
http://ithelp.ithome.com.tw/ironman6/player/sheephead081/alll/1
大家好，今天完全是開心的一天

因為我只要把昨天的測試文件貼上來就OK了

經過測試，我看不到使用detach之後的效能差異。

所以把測試的程式之中，把detach完全沒用到，著重在元素的append上

首先先看一般的應用

$('#btn2')
    .click(function() 
    {
        console.time('直接進行append') ;
        var numLoop = 2000 ;
        var _eleTb = $('#tb').html('') ;
        for (var i=1000; i <= numLoop; i++)
        {
            $('#tb')
                 .append('<tr><td>'+ i +'</td></tr>') ;
        }
         
        console.timeEnd('直接進行append') ;
    }) ;

執行時間大概是80ms

接下來看只append一次大量元素的狀況。

$('#btn1')
    .click(function() 
    {
        console.time('儘量減少reflow') ;
        var numLoop = 1000 ;
        var _eleTb = $('#tb').html('') ;
        var _strNode = '' ;
        for (var i=1; i <= numLoop; i++)
        {
            _strNode += '<tr><td>'+ i +'</td></tr>' ;
        }
        $('#tb')
            .append(_strNode) ;
             
        console.timeEnd('儘量減少reflow') ;
 
    }) ;

執行時間大約是18ms 恩~~~有差捏。但是差別不大。但!這是因為我塞的東西很單純

越複雜速度差異會越大。DEMO網頁如下

http://ry.url.tw/wp/doc/frag.htm

所以這次的測試~~~大成功!( 記得打開console來看阿... )

套件的部分，會找一天實作如果觸發之後

出現的widget有點複雜怎麼辦，不只是一個DIV。

該怎麼控管那些元素會比較合理呢?