HTML string to DOM node

JavaScript performance comparison

Revision 4 of this test case created by geoffgscott

Preparation code


      
      <script>
Benchmark.prototype.setup = function() {
  const html = `<h1>Lorem ipsum dolor sit amet consectetuer adipiscing 
  elit</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
  elit. Aenean commodo ligula eget dolor. Aenean massa 
  <strong>strong</strong>. Cum sociis natoque penatibus 
  et magnis dis parturient montes, nascetur ridiculus 
  mus. Donec quam felis, ultricies nec, pellentesque 
  eu, pretium quis, sem. Nulla consequat massa quis 
  enim. Donec pede justo, fringilla vel, aliquet nec, 
  vulputate eget, arcu. In enim justo, rhoncus ut, 
  imperdiet a, venenatis vitae, justo. Nullam dictum 
  felis eu pede <a class="external ext" href="#">link</a> 
  mollis pretium. Integer tincidunt. Cras dapibus. 
  Vivamus elementum semper nisi. Aenean vulputate 
  eleifend tellus. Aenean leo ligula, porttitor eu, 
  consequat vitae, eleifend ac, enim. Aliquam lorem ante, 
  dapibus in, viverra quis, feugiat a, tellus. Phasellus 
  viverra nulla ut metus varius laoreet. Quisque rutrum. 
  Aenean imperdiet. Etiam ultricies nisi vel augue. 
  Curabitur ullamcorper ultricies nisi.</p>
  <h1>Lorem ipsum dolor sit amet consectetuer adipiscing 
  elit</h1>
  <h2>Aenean commodo ligula eget dolor aenean massa</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
  elit. Aenean commodo ligula eget dolor. Aenean massa. 
  Cum sociis natoque penatibus et magnis dis parturient 
  montes, nascetur ridiculus mus. Donec quam felis, 
  ultricies nec, pellentesque eu, pretium quis, sem.</p>
  <h2>Aenean commodo ligula eget dolor aenean massa</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
  elit. Aenean commodo ligula eget dolor. Aenean massa. 
  Cum sociis natoque penatibus et magnis dis parturient 
  montes, nascetur ridiculus mus. Donec quam felis, 
  ultricies nec, pellentesque eu, pretium quis, sem.</p>
  <ul>
    <li>Lorem ipsum dolor sit amet consectetuer.</li>
    <li>Aenean commodo ligula eget dolor.</li>
    <li>Aenean massa cum sociis natoque penatibus.</li>
  </ul>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
  elit. Aenean commodo ligula eget dolor. Aenean massa. 
  Cum sociis natoque penatibus et magnis dis parturient 
  montes, nascetur ridiculus mus. Donec quam felis, 
  ultricies nec, pellentesque eu, pretium quis, sem.</p>
  <form action="#" method="post">
    <fieldset>
      <label for="name">Name:</label>
      <input type="text" id="name" placeholder="Enter your 
  full name" />
  `;

};
</script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Range.createContextualFragment()
const node = document.createRange().createContextualFragment(html);
pending…
DOMParser.parseFromString()
const node = new DOMParser().parseFromString(html, 'text/html').body.firstElementChild;
pending…
Element.innerHTML
const placeholder = document.createElement('div');
placeholder.innerHTML = html;
const node = placeholder.firstElementChild;
pending…
Element.insertAdjacentHTML()
const placeholder = document.createElement('div');
placeholder.insertAdjacentHTML('afterbegin', html);
const node = placeholder.firstElementChild;
pending…

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL.

0 Comments