Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Run results for:
JQuery new div element with class - 1k reps (with prototype.join2)
Faster way to create new dom elements before insertion with JQuery (+ set class)
Go to the benchmark
Embed
Embed Benchmark Result
Run details:
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0
Browser:
Firefox 115
Operating system:
Windows
Device Platform:
Desktop
Date tested:
2 years ago
Test name
Executions per second
JQuery - direct + class
120.1 Ops/sec
JQuery - cloneNode + class
1136.5 Ops/sec
prototype.join
921.9 Ops/sec
forcycle
1132.2 Ops/sec
HTML Preparation code:
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
Tests:
JQuery - direct + class
var list = [], n = 0; var newDiv = function(){ return $('<div class="test">'); } while(true) { n++; list.push(newDiv()); if(n===1000) break; }
JQuery - cloneNode + class
var list = [], n = 0, node = document.createElement('div'); var newDiv = function(){ var newNode = node.cloneNode(false); newNode.className = [].slice.call(arguments).join(' '); return $(newNode); } while(true) { n++; list.push(newDiv("test")); if(n===1000) break; }
prototype.join
var list = [], n = 0, node = document.createElement('div'); var newDiv = function (classname) { var newNode = node.cloneNode(false); if (classname !== void 0) newNode.className = Array.prototype.join.call(arguments, " "); return $(newNode); } while(true) { n++; list.push(newDiv("test")); if(n===1000) break; }
forcycle
var list = [], n = 0, node = document.createElement('div'); var newDiv = function (classname) { var newNode = node.cloneNode(false); if (classname !== void 0) { var args = new Array(arguments.length); for (var i = 0, ii = arguments.length; i < ii; i++) { args[i] = arguments[i]; } newNode.className = args.join(' '); } return $(newNode); } while(true) { n++; list.push(newDiv("test")); if(n===1000) break; }