Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
parse HTML fragment
(version: 3)
Comparing performance of:
Template vs Range vs innerHTML vs insertAdjacentHTML vs Range2
Created:
4 years ago
by:
Registered User
Jump to the latest result
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>
Run tests (5)
Previous results
Fork
Test case name
Result
Template
Range
innerHTML
insertAdjacentHTML
Range2
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Related benchmarks:
create & append element vs set innerHTML
DOM Parser vs insertAdjacentHTML
Vanilla JS closest VS while loop
createContextualFragment vs template.innerHTML
Comments
Confirm delete:
Do you really want to delete benchmark?