JS Basics: How to render fast 10k elements

var totalElements = 10000;
var getUpdatedProducts = () => {
     var products = [];
     for (var i=0; i < totalElements; i ++ ) {
         products.push({id: i, name: `Product ${i}`, price: Math.floor(Math.random() * 10)+1, description:`Lorem ipsum dolor sit amet ${i}${i}${i}`})
     }
     return products;
 }
var buildElement = () => {
     var elContainer = document.createElement('div');
     var elTitle = document.createElement('strong');
     var elPrice = document.createElement('span');
     var elDescription = document.createElement('div');
     elDescription.className = 'desc';
     elContainer.appendChild(elTitle);
     elContainer.appendChild(elPrice);
     elContainer.appendChild(elDescription);
     return elContainer;
 }
var elTemplate = buildElement();
var render = items => {
     var documentFragment = document.createDocumentFragment();
     var el, name, price, desc;
items.forEach( i => {     el = elTemplate.cloneNode(true);     name = el.querySelector('strong');     name.textContent = i.name;     price = el.querySelector('span');     price.textContent = ` £${i.price}`;     desc = el.querySelector('.desc');     desc.textContent = i.description;     documentFragment.appendChild(el);        }); document.body.appendChild(documentFragment);
}
console.time('render time');
render(getUpdatedProducts());
console.timeEnd('render time');