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');