Cacher is the code snippet organizer for pro developers

/*
 * ul insert 1000 li tag
 */
let ul = document.querySelectorAll('.list');
console.time('no frag');
for(let i = 0; i < 1000; ++i) {
  let li = document.createElement('li');
  li.textContent = 'No ' + i;
  ul[0].appendChild(li);
}
console.timeEnd('no frag');

console.time('with frag');
let tmpLilist = document.createDocumentFragment();
for(let i = 0; i < 1000; ++i) {
  let li = document.createElement('li');
  li.textContent = 'No ' + i;
  tmpLilist.appendChild(li);
}
ul[1].appendChild(tmpLilist);
console.timeEnd('with frag');