MeasureThat.net

Run results for: teste_template

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.88 Safari/537.36
Chrome 100
Windows
Desktop
2 years ago
Test name Executions per second
teste_template_string 31597.5 Ops/sec
teste_DocumentFragment 34787.0 Ops/sec
Script Preparation code:
​x
 
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());
Tests:

  • teste_template_string

     
    const section = document.createElement('section');
    section.innerHTML += `
    <div>
        <h1>Heading</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
        <button>Button</button>
    </div>
    `;
    ​
    document.documentElement.appendChild(section);

  • teste_DocumentFragment

     
    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(fragment);