哪個是在HTML元素中用Jquery添加值最快的方法？

隨着純HTML然後通過jQuery添加值：哪個是在HTML元素中用Jquery添加值最快的方法？

<div id="leftAxis"> 
    <div class="leftQuadrant"> 
     <div id="oneval" class="insideQuadrant"></div> 
    </div> 
    <div class="leftQuadrant"> 
     <div id="twoVal" class="insideQuadrant"></div> 
    </div> 
    <div class="leftQuadrant"> 
     <div id="threeVal" class="insideQuadrant"></div> 
    </div> 
    </div> 


    fillLeftAxis: function() { 
     var data = ['one', 'two', 'three'], 
      IdHtml = ['#oneVal', '#twoVal', '#threeVal']; 

     for(var i=0; i<IdHtml.length; i++) { 
      $(IdHtml[i]).html(data[i]); 
     } 
    };

或者直接構建在它的值的HTML元素和後來與jquery其追加到容器：

<div id="leftAxis"> 
    </div> 

fillLeftAxis: function() { 
    var data = ['one', 'two', 'three'], 
     html = ''; 

    for(var i=0; i<data.length; i++) { 
     html += '<div class="leftQuadrant"><div id="' + data[i] + 'Val" class="insideQuadrant">' + data[i] + '</div></div>'; 
    } 

    $('#leftAxis').html(html); 
};

來源

2017-08-07 Laiacy

如果您確實需要一些快速代碼，請刪除jQuery。 – Teemu

如果您只添加文本，請使用'jQuery.text（）'。但我只能同意上一篇文章：如果你想快速做本土JS。 jQuery有很多開銷。 '$（IdHtml [i]）.html（data [i]）'將創建一個類似數組的結構，在元素上進行迭代並執行'html'函數。 – Bellian

如果您使用第二種方法（構建大量html），然後進行* single * jquery調用，那麼「開銷」將會極小。即使使用第一種方法，與本地相比使用「$（id）.html（）」的「開銷」也是完全最小的（因爲重繪的開銷會很大）。所以，儘管'jquery有一些開銷'的通用聲明通常是正確的，但是* this *的實際開銷並不值得使用jquery。這取決於你的情況。 –

您可以使用Document.querySelectorAll()來選擇所有具有類"insideQuadrant"的元素，而不是使用jQuery，這是一個外部庫，其中有許多方法可能不需要在腳本（或項目）中使用所有這些方法。

比你可以用Array.prototype.forEach()遍歷所有的elements aray。

代碼：

(function() { 
 
    var data = ['one', 'two', 'three']; 
 

 
    document 
 
    .querySelectorAll('.insideQuadrant') 
 
    .forEach(function (element, index) { 
 
     element.textContent = data[index]; 
 
    }); 
 
})();

<div id="leftAxis"> 
 
    <div class="leftQuadrant"> 
 
    <div class="insideQuadrant"></div> 
 
    </div> 
 
    <div class="leftQuadrant"> 
 
    <div class="insideQuadrant"></div> 
 
    </div> 
 
    <div class="leftQuadrant"> 
 
    <div class="insideQuadrant"></div> 
 
    </div> 
 
</div>

注意：對於這種情況下，沒有必要使用元素ID屬性，因爲這將需要更多的querys到DOM。

來源

2017-08-07 09:46:10

第二辦法。

第一種方式會導致Dom Tree刷新每個循環，並導致性能消耗過度。沒有建議。

在瀏覽器中查看Dom rending和UI Thread的更多細節。

來源

2017-08-07 09:42:33 Jimmy

哪個是在HTML元素中用Jquery添加值最快的方法？

回答

相關問題