DocumentFragment can create virtual dom tree. It can helps to avoid layout reflow.. problems
Code has profermance problem:
const data = [‘Earth‘, ‘Fire‘, ‘Water‘, ‘Air‘]; data.forEach(name => { const li = document.createElement(‘li‘); li.innerText = name; app.append(li); });
Instead of each loop, we append one li tag, what we can do is accumlate all the li tags and append into DOM only once.
const data = [‘Earth‘, ‘Fire‘, ‘Water‘, ‘Air‘]; const fragment = document.createDocumentFragment(); data.forEach(name => { const li = document.createElement(‘li‘); li.innerText = name; fragment.append(li); }); app.append(fragment);
[HTML 5] Using DocumentFragments
原文：https://www.cnblogs.com/Answer1215/p/12535295.html