Buffering DOM updates using DocumentFragments

docfrag.js

/* Assumption: arrayOfElements is an array of DOM nodes created from a template or otherwise. */

/* Don't do this! This reflows the DOM a *lot* */
var targetNode = document.getElementById('target');

var appendToTargetNode = targetNode.appendChild.bind(targetNode);
arrayOfElements.forEach(appendToTargetNode);


/* Instead, use a DocumentFragment */
var targetNode = document.getElementById('target');
var docFrag = document.createDocumentFragment();

var appendToDocFrag = docFrag.appendChild.bind(docFrag);
arrayOfElements.forEach(appendtoDocFrag);

targetNode.appendChild(docFrag) /* 1 reflow */

/* Total: 1 reflow */