Stash until jsperf figures out its spam detection

jsperfcase.md

Preparation HTML

<svg>
<g id="main"></g>
<g id="cache" hidden></g>
</svg>
<script>
var docFragment = document.createDocumentFragment();
var mainElement = document.getElementById('main');
var cacheElement = document.getElementById('cache');
var cacheArray = [];
function makeRect() {
  var rect = document.createElementNS("http://www.w3.org/2000/svg", 'rect');
  rect.setAttribute('x','10');
  rect.setAttribute('y','10');
  rect.setAttribute('width','100');
  rect.setAttribute('height','100');
  return rect;
}
var iterations = 10000;
function runIterations(f) {
  for (var i=0; i < iterations; i++) {
    f(i);
  }
}
function emptyElement(el) {
  while (el.hasChildNodes()) {
    el.removeChild(el.lastChild);
  }
}
function transferChildren(el1,el2) {
  while (el1.hasChildNodes()) {
    el2.appendChild(el1.lastChild);
  }
}
</script>

teardown

while(cacheArray.length > 0) {
    cacheArray.pop();
}
emptyElement(docFragment);
emptyElement(mainElement);
emptyElement(cacheElement);

Code snippet 1: no caching

function appendNewRect() {
  mainElement.appendChild(makeRect());
}

runIterations(appendNewRect);
emptyElement(mainElement);
runIterations(appendNewRect);

Code snippet 2: array caching

runIterations(function(){
  var rect = makeRect();
  cacheArray.push(rect);
  mainElement.appendChild(rect);
});
emptyElement(mainElement);
var rects = cacheArray.length;
for (var i = 0; i < rects; i++) {
  mainElement.appendChild(rect);
}

Code snippet 3: DocumentFragment caching

runIterations(function(){
  var rect = makeRect();
  mainElement.appendChild(rect);
});
transferElements(mainElement,docFragment);
transferElements(docFragment,mainElement);

Code snippet 4: same-document caching

runIterations(function(){
  var rect = makeRect();
  mainElement.appendChild(rect);
});
transferElements(mainElement,cacheElement);
transferElements(cacheElement,mainElement);