document.createDocumentFragment

JavaScript performance comparison

Test case created by

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<select id="select1"></select>
<select id="select2"></select>
      
<script>
Benchmark.prototype.setup = function() {
  var $select1 = $('#select1');
  var $select2 = $('#select2');
  var options = "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed consectetur suscipit ante, non imperdiet metus accumsan sed. Quisque ac neque eu leo condimentum venenatis et non dui. Pellentesque id nunc sed turpis molestie fermentum vel vel risus.".split(' ');
  
  function jquery_style($select, options) {
  	$.each(options, function() {
  		$select.append('<option>' + this + '</option>');
  	});
  }
  
  function docfrag_style($select, options) {
  	optionsFragment = document.createDocumentFragment();
  	for (var i in options) {
  		option = document.createElement('option');
  		option.textContent = options[i];
  		optionsFragment.appendChild(option);
  	}
  	$select[0].appendChild(optionsFragment);
  }
  

};
</script>

Preparation code output

<select id="select1"></select> <select id="select2"></select>

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
jQuery each
jquery_style($select1, options);
pending…
Document fragment
docfrag_style($select2, options);
pending…

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

Compare results of other browsers

0 Comments