Benchmark: parse HTML fragment

HTML Preparation code:

<div id="target"></div>

Script Preparation code:

const target = document.getElementById('target');
var source = "<h2></h2><table><tbody><tr><td>A0</td></tr><tr><td>A1</td></tr><tr><td>A2</td></tr><tr><td>A3</td></tr><tr><td>A4</td></tr><tr><td>A5</td></tr><tr><td>A6</td></tr><tr><td>A7</td></tr><tr><td>A8</td></tr><tr><td>A9</td></tr><tr><td>A10</td></tr><tr><td>A11</td></tr><tr><td>A12</td></tr><tr><td>A13</td></tr><tr><td>A14</td></tr><tr><td>A15</td></tr><tr><td>A16</td></tr><tr><td>A17</td></tr><tr><td>A18</td></tr><tr><td>A19</td></tr></tbody></table><h2></h2><table><tbody><tr><td>B0</td></tr><tr><td>B1</td></tr><tr><td>B2</td></tr><tr><td>B3</td></tr><tr><td>B4</td></tr><tr><td>B5</td></tr><tr><td>B6</td></tr><tr><td>B7</td></tr><tr><td>B8</td></tr><tr><td>B9</td></tr><tr><td>B10</td></tr><tr><td>B11</td></tr><tr><td>B12</td></tr><tr><td>B13</td></tr><tr><td>B14</td></tr><tr><td>B15</td></tr><tr><td>B16</td></tr><tr><td>B17</td></tr><tr><td>B18</td></tr><tr><td>B19</td></tr><tr><td>B20</td></tr><tr><td>B21</td></tr><tr><td>B22</td></tr><tr><td>B23</td></tr><tr><td>B24</td></tr><tr><td>B25</td></tr><tr><td>B26</td></tr><tr><td>B27</td></tr><tr><td>B28</td></tr><tr><td>B29</td></tr></tbody></table>";

Tests:

Template
const tpl = document.createElement('template'); tpl.innerHTML = source; target.appendChild(tpl.content);
Range
const parse = Range.prototype.createContextualFragment.bind(document.createRange()); target.appendChild(parse(source));
innerHTML
target.innerHTML = source;
insertAdjacentHTML
target.insertAdjacentHTML('afterbegin',source)
Range2
const range = document.createRange(); range.selectNode(target); target.appendChild(range.createContextualFragment(source));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Template
Range
innerHTML
insertAdjacentHTML
Range2

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:101.0) Gecko/20100101 Firefox/101.0

Browser/OS: Firefox 101 on Ubuntu

View result in a separate tab

Test name	Executions per second
Template	11516.2 Ops/sec
Range	7222.9 Ops/sec
innerHTML	65.9 Ops/sec
insertAdjacentHTML	1379.7 Ops/sec
Range2	3233.3 Ops/sec

parse HTML fragment (version: 3)

Comparing performance of: Template vs Range vs innerHTML vs insertAdjacentHTML vs Range2

Created: 2 years ago by: Registered User

Jump to the latest result

Template

Range

innerHTML

insertAdjacentHTML

Range2

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A