Generating DOM elements off DOM means that only what is actually visible or intractable at the moment exists in the DOM tree. If you build your elements off DOM, then add them to the DOM in one document fragment or element, it only triggers a single layout/reflow as opposed to one for every element you build or manipulate. Conversely, if you pull an element or group of elements off DOM, modify them, then put them back on DOM at the same time it can prevent multiple layouts/reflows. The other advantage is caching. If you build image elements off DOM, you can cache up to 100 megs of images in memory that can instantly be dropped on DOM with zero load time. Many people try to use app cache and service workers for this, but it’s unnecessary. All that being said, pure CSS DOM manipulation is always preferred, just know which styles trigger layouts/reflows/repaints.
Question and answer is powered by AnsPress.io