MeasureThat.net

Run results for: Element creation speed

Speed of different methods to create elements.

Go to the benchmark
Run details:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36
Chrome 109
Mac OS X 10.15.7
Desktop
2 years ago
Test name Executions per second
Programmatic Element creation 81233.5 Ops/sec
jQuery Element creation 17719.5 Ops/sec
Custom Method: HTMLElement.From() 8580.8 Ops/sec
DOMParser 4542.7 Ops/sec
HTML Preparation code:
​x
 
1
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
2
​
Script Preparation code:
 
Object.defineProperty(HTMLElement, 'From', {
  enumerable: false,
  value: (function (doc, rgx) {
    //https://www.measurethat.net/Benchmarks/Show/2149/0/element-creation-speed
    return function CreateElementFromHTML(html) {
      html = html.trim();
      var bodystart = html.indexOf('>') + 1, bodyend = html.lastIndexOf('<');
      var elemStart = html.substr(0, bodystart);
      var innerHTML = html.substr(bodystart, bodyend - bodystart);
      rgx.lastIndex = 0;
      var elem = doc.createElement(rgx.exec(elemStart)[4]);
      var match; while ((match = rgx.exec(elemStart))) {
        if (match[1] === undefined) {
          elem.setAttribute(match[4], "");
        } else {
          elem.setAttribute(match[1], match[3]);
        }
      }
      elem.innerHTML = innerHTML;
      return elem;
    };
  }(window.document, /(\S+)=(["'])(.*?)(?:\2)|(\w+)/g))
});
​
var domParser = new DOMParser();
Tests:

  • Programmatic Element creation

     
    var arr = Array(2);
    var el = document.createElement('link');
    el.id='reddit_css';
    el.type='text/css';
    el.rel='stylesheet';
    el.setAttribute('data-srcprop', 'href');
    el.setAttribute('data-src', 'sites/reddit/zinject.reddit.css');
    el.async = true;
    el.defer = true;
    arr[0] = el;
    el = document.createElement('div');
    el.id = 'somevalue';
    el.className = 'sidebar';
    el.innerHTML = `<div class='sb-handle'></div><div class='sb-track'></div>`;
    arr[1] = el;
    return arr;

  • jQuery Element creation

     
    var arr = Array(2);
    arr[0] = $(`<link id="reddit_css" type="text/css" rel="stylesheet" async defer data-srcprop="href" data-src="sites/reddit/zinject.reddit.css">`);
    arr[1] = $(`<div id='somevalue' class='sidebar'><div class='sb-handle'></div><div class='sb-track'></div></div>`);
    return arr;
    ​

  • Custom Method: HTMLElement.From()

     
    var arr = Array(2);
    arr[0] = HTMLElement.From(`<link id="reddit_css" type="text/css" rel="stylesheet" async defer data-srcprop="href" data-src="sites/reddit/zinject.reddit.css">`);
    arr[1] = HTMLElement.From(`<div id='somevalue' class='sidebar'><div class='sb-handle'></div><div class='sb-track'></div></div>`);
    return arr;
    ​

  • DOMParser

     
    var arr = Array(2);
    var doc = domParser.parseFromString(`<link id="reddit_css" type="text/css" rel="stylesheet" async defer data-srcprop="href" data-src="sites/reddit/zinject.reddit.css">`, 'text/html');
    arr[0] = doc.head.removeChild(doc.head.firstElementChild);
    doc = domParser.parseFromString(`<div id='somevalue' class='sidebar'><div class='sb-handle'></div><div class='sb-track'></div></div>`, 'text/html');
    arr[1] = doc.body.removeChild(doc.body.firstElementChild);
    return arr;