クラスを大規模なDOMに追加するときのパフォーマンスの問題

Question

divs（5000以上）という非常に大きなグループがあり、これにはclassを適用する必要があります。この操作により、パフォーマンスの低下/ UIの遅延が顕著に発生します。私はdivsにclassを追加するために二つの方法を試してみた

：

// jQuery approach 
$("div", "#document").addClass("default"); 

// Vanilla JS (HTML5) 
var obj_list = document.getElementById("document").querySelectorAll('div'); 

for (var index = 0; index < obj_list.length; index++) 
{ 
    obj_list[index].classList.add("action"); 
} 

どちらの方法が賢明任意の顕著な違いのパフォーマンスを提供します。私はこれを達成するための別のオプションがあるのだろうか？

ありがとうございます！

Answer 1

私は<div>という膨大な数の要素を1ページにいくつか試してみました。 "を生成" ボタンを

<style type="text/css"> 
    .default { 

     color: red; 
    } 
</style> 
<script src="https://code.jquery.com/jquery-2.2.3.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function() { 

    $('#generate').click(function() { 

     for (var i = 0; i <= 5000; i++) { 

      $('#container').append('<div class="tick">some text</div>'); 
     } 
    }); 

    $('#add').click(function() { 

     var 
      divs, 
      countFrom, 
      length, 
      runner, 
      requestAnimation; 

     divs = document.getElementById("container").querySelectorAll('div'); 
     countFrom = 0; 
     length = divs.length; 

     runner = function() { 

      if (countFrom < length) { 

       divs[countFrom++].className = 'default'; 
       requestAnimationFrame(runner) 
      } 
      else { 

       cancelAnimationFrame(requestAnimation); 
       console.log('READY'); 
      } 
     }; 

     requestAnimation = requestAnimationFrame(runner); 
    }); 
}); 
</script> 
<div> 
    <input type="button" id="generate" value="Generate"> <br> 
    <input type="button" id="add" value="Run it! Yay!"> <br> 
</div> 
<div id="container"> 

</div> 

まずクリック（5000のdiv要素がコンテナに追加されます）：

はここでそれは私の例です。次に「Run It」をクリックします。プロセスは非同期で開始されます。ページはプロセスによってブロックされません。

このプロセスを非同期で実行するには、slow setInterval（）の代わりにWindow.requestAnimationFrame()メソッドを使用しました。

スクリプトの速度：1 addClassフレームごとの操作。私のコードを変更することで、この速度を簡単に上げることができます。例えば、100のaddClass forループを使用してフレームごと操作...

Demo