<button id="clc1">.append()</button>
  <button id="clc2">.appendChild( div )</button>
  <button id="clc3">.innerHTML</button>
  <button id="clc4">.push()</button>

  <button id="clr" onclick="res.innerHTML= time.innerHTML= ''">очистить</button>

  <div id="res"></div>
  <div id="time"></div>


<h2>Выводы</h2>
<p>Как видно, способы 2 и 4 -- лидируют с хорошим отрывом.</p>

#res {
  margin-top: 20px;
  border: 1px solid #000;
  padding: 10px;
  max-height: 200px;
  overflow: auto;
}

#clr{
  margin-left:3em;
}

$("body").on("click", "#clc1", function() {
      
      var timeS = performance.now();
      var html = "";
      for( var i = 0, count = 0; i < 10; i++){
          html = "";
          for( var line = 0; line < 1000; line++, count++){
              html += "<div>"+count+"</div>";
          }
          $("#res").append( html+" " ); 
      }
      $("#time").append( (performance.now()-timeS)+" ms<br/>" );
      
    }).on("click", "#clc2", function() {
         
      var timeS = performance.now();
      var html = "";
      for( var i = 0, count = 0; i < 10; i++){
          html = "";
          for( var line = 0; line < 1000; line++, count++){
              html += "<div>"+count+"</div>";
            // res.innerHTML+= "<div>"+count+"</div>";
          }
          var div = document.createElement('div');
          div.innerHTML = html; 
          var target = document.getElementById( "res" );
          target.appendChild(div);
          
      }
       $("#time").append( (performance.now()-timeS)+" ms<br/>" );
      
    }).on("click", "#clc3", function() {
         
      var timeS = performance.now();
      var html = "";
      for( var i = 0, count = 0; i < 10; i++){
          html = "";
          for( var line = 0; line < 1000; line++, count++){
              html += "<div>"+count+"</div>";
          }
          document.getElementById( "res" ).innerHTML += html; 
      }
     $("#time").append( (performance.now()-timeS)+" ms<br/>" );
      
    }).on("click", "#clc4", function() {
      res.innerHTML='';
      var timeS = performance.now();
      const target = document.querySelector('#res');
      const dfr = document.createDocumentFragment();

      const data = ((arr) => {
        for( var i = 0, count = 0; i < 10; i++){
          
              for( var line = 0; line < 1000; line++, count++){
                var div= document.createElement('div');
                div.innerHTML= count;
                dfr.appendChild(div);
              }
          }

        return arr;
      })([]);

      res.appendChild(dfr);
      
      $("#time").append(( performance.now()-timeS)+" ms<br/>");
  })