Run results for: parse HTML fragment

Run details:

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

Browser: Firefox 101

Operating system: Ubuntu

Device Platform: Desktop

Date tested: one year ago

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

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

Run results for: parse HTML fragment

Template

Range

innerHTML

insertAdjacentHTML

Range2