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

Share this: Twitter

Facebook

Like this: Like Loading...