MeasureThat.net

Run results for: test_html_in_javascript

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
3 years ago
Test name Executions per second
teste_template_string 26.9 Ops/sec
test_template 52216.5 Ops/sec
HTML Preparation code:
​x
 
1
<!DOCTYPE html>
2
<html lang="pt-BR">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>Teste</title>
8
</head>
9
<body>
10
    <div id="container">
11
​
12
    </div>
13
</body>
14
</html>
Tests:

  • teste_template_string

     
    const tpl = document.getElementById('container');
    tpl.innerHTML += `
    <div>
        <h1>Heading</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
        <button>Button</button>
    </div>
    `;

  • test_template

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