MeasureThat.net

Run results for: Parse vs InnerHTML

Parse vs InnerHTML

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36
Chrome 66
Windows
Other
6 years ago
Test name Executions per second
parse() 213367.6 Ops/sec
innerHTML 658914.1 Ops/sec
HTML Preparation code:
AخA
 
1
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script>
2
<div id="demo"></div
Script Preparation code:
 
  var html = ""
  
  for(var i = 0; i++; i < 1000){
     html += `<ol>
    <li>a</li>
    <li>b</li>
  </ol>
  <ol>
    <li>c</li>
    <li>d</li>
  </ol>`;
  }
  
  var demo = document.querySelector("#demo")
  var range = document.createRange();
  var parse = range.createContextualFragment.bind(range);
Tests:

  • parse()

     
    demo.appendChild(parse(html));
    document.querySelector("#demo").innerHTML = ""

  • innerHTML

     
    demo.innerHTML = html;
    document.querySelector("#demo").innerHTML = ""