问重复500次时，jQuery append占用的时间太长

EN

$.getJSON( "https://domain.ltd/parse_data.php", function( data_recieved ) {
  if (data_recieved.length) {   
    var spns = '';
    $.each(data_recieved, function(index, element) {
spns+='<span>' + element.name +  ' = ' + element.amount + '</span><br />'; 
    });
        $( ".items" ).append(spns); // or use .html();
  }
})

// just for simulating your JSON
var dataRecieved = [];

for (var i = 0; i < 500; i++) {
  dataRecieved.push({ name: 'Element ' + i, amount: parseInt(Math.random() * i) });
}

// $.getJSON( "https://domain.ltd/parse_data.php", function( data_recieved ) {
// optimization start here
console.time('test');

// use a simple for loop and save the length of received data
var element, dataReceivedLength = dataRecieved.length;

// create a variable and append all html to it
var dataMarkup = '';

// if you want to do it on only one element, use the id as selector.
// save the object to a variable
var $items = $('#first-collection');

// check if $items exist
if ($items.length && dataReceivedLength) {
  for (var i = 0; i < dataReceivedLength; i++) {
    element = dataRecieved[i];
    dataMarkup += '<span>' + element.name + ' = ' + element.amount + '</span><br />';
  }
  
  // use html() instead of append() for performance reasons in this case
  $items.html(dataMarkup);
}

console.timeLog('test');
// });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p id="first-collection" class="items"></p>