Test name | Executions per second |
---|---|
template | 36697.9 Ops/sec |
DocumentFragment | 55058.3 Ops/sec |
createElement | 67893.7 Ops/sec |
createElement createTextNode | 42917.2 Ops/sec |
const tpl = document.createElement('template');
tpl.innerHTML = `
<div>
<h1>Heading</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<button>Button</button>
</div>
`;
const el = tpl.content.firstElementChild
document.documentElement.appendChild(el.cloneNode());
const fragment = document.createDocumentFragment();
const el = document.createElement('div');
const heading = document.createElement('h1');
const para1 = document.createElement('p');
const para2 = document.createElement('p');
const button = document.createElement('button');
const headingText = document.createTextNode('Heading');
const para1Text = document.createTextNode('Paragraph 1');
const para2Text = document.createTextNode('Paragraph 2');
const buttonText = document.createTextNode('Button');
heading.appendChild(headingText);
para1.appendChild(para1Text);
para2.appendChild(para2Text);
button.appendChild(buttonText);
el.appendChild(heading);
el.appendChild(para1);
el.appendChild(para2);
el.appendChild(button);
fragment.appendChild(el);
document.documentElement.appendChild(fragment);
// const fragment = document.createDocumentFragment();
const el = document.createElement('div');
const heading = document.createElement('h1');
const para1 = document.createElement('p');
const para2 = document.createElement('p');
const button = document.createElement('button');
heading.innerText = 'Heading';
para1.innerText = 'Paragraph 1';
para2.innerText = 'Paragraph 2';
button.innerText = 'Button';
el.appendChild(heading);
el.appendChild(para1);
el.appendChild(para2);
el.appendChild(button);
// fragment.appendChild(el);
document.documentElement.appendChild(el);
// const fragment = document.createDocumentFragment();
const el = document.createElement('div');
const heading = document.createElement('h1');
const para1 = document.createElement('p');
const para2 = document.createElement('p');
const button = document.createElement('button');
const headingText = document.createTextNode('Heading');
const para1Text = document.createTextNode('Paragraph 1');
const para2Text = document.createTextNode('Paragraph 2');
const buttonText = document.createTextNode('Button');
heading.appendChild(headingText);
para1.appendChild(para1Text);
para2.appendChild(para2Text);
button.appendChild(buttonText);
el.appendChild(heading);
el.appendChild(para1);
el.appendChild(para2);
el.appendChild(button);
// fragment.appendChild(el);
document.documentElement.appendChild(el);