JSFiddle - React, Tailwind, and code Playground

by unarist

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/2.1.4/benchmark.min.js"></script>
Remove "return false;" to run benchmark.

JavaScript

return false;
"use strict";
const log = s => {
  document.body
  .appendChild(document.createElement('div'))
  .textContent = s;
};
const createList = n => {
  var node = document.createElement('div');
  for (let i = 0; i < n; ++i)
    node.appendChild(document.createElement('span'));
  return node.childNodes;
};
const suite = new Benchmark.Suite();

log('preparing...');

for (const n of [50, 10000]) {
  const list = createList(n);
  suite
  .add('Array.from#' + n, () => { Array.from(list) })
  .add('spread#' + n, () => { [...list] })
  .add('for..of#' + n, () => {
    let result = [];
    for (let v of list) result.push(v);
  })
  .add('iterator#' + n, () => {
    let result = [],
      iter = list[Symbol.iterator](),
      iterResult = iter.next();
    while (!iterResult.done) {
      result.push(iterResult.value);
      iterResult = iter.next();
    }
  })
  .add('forEach#' + n, () => {
    let result = [];
    list.forEach(v => result.push(v));
  });
}

log('running...');
log('name\tops/sec');
suite
.on('cycle', ({target}) => log(`${target.name}\t${target.hz|0}`))
.on('complete', () => log('done!'))
.run({async:true});