Comparation of speeds

Download Raw Clone


  1. const tbody_jquery = $('#here-goes-content');
  2. const tbody_javascript = document.querySelector('#here-goes-content');
  3. const timer = function(name) {
  4. var start = new Date();
  5. return {
  6. stop: function() {
  7. var end = new Date();
  8. var time = end.getTime() - start.getTime();
  9. console.log('TEMPO:', name, 'terminado em', time, 'ms');
  10. }
  11. }
  12. };
  13. const runWithJQuery = function (tbody) {
  14. for (var l=0; l<10000; l++) {
  15. var el = tbody.append("<tr>");
  16. for (var c=0; c<10; c++) {
  17. var data = `<td>${c}</td>`;
  18. el.append(data);
  19. }
  20. el.append("</tr>");
  21. }
  22. }
  23. const runWithVanilla = function (tbody) {
  24. for (var l=0; l<10000; l++) {
  25. var tr = document.createElement('tr');
  26. for (var c=0; c<10; c++) {
  27. var col = document.createElement('td');
  28. col.innerHTML += c;
  29. tr.appendChild(col);
  30. }
  31. tbody.appendChild(tr);
  32. }
  33. }
  34. const t1 = timer('Rodando codigo javascript com jquery');
  35. runWithJQuery(tbody_jquery);
  36. t1.stop();
  37. const t2 = timer('Rodando codigo javascript vanilla');
  38. runWithVanilla(tbody_javascript);
  39. t2.stop();

Raw paste data: