<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script> (function(exposeAs){ var Dex = function(selector, nodes){ // Return Dex object return new Dex.fn.init(selector, nodes); }; Dex.fn = Dex.prototype = { init: function(selector, nodes){ this.selector = selector; if(nodes){ this.nodes = nodes; } else { this.nodes = document.querySelectorAll(selector); } return this; } }; // CONSTANTS var UNDEFINED = "undefined"; // HIDDEN VARIABLES var cachedSelections = {}, delegatedEventListeners = {}, mutationObservers = {}, DOMMutationCallback = function(mutations, selector, parentNodes){ var n, x, y, mutationRecord, addedNode, removedNode, modifiedNodeAttribute, callbacks, modifiedSelector, _target, executeCallbacks = function(queue, node, arg1, arg2){ var n = 0; while(queue[n]){ // Call callback function queue[n].callback.call(node, arg1, arg2); if(!queue[n].persistant){ queue.splice(n, 1); } n++; } }, executeAttributecallbacks = function(queue, node, attrKey, attrValue){ y = 0; while(queue[y]){ // Call callback function if(queue[y].attrKey == attrKey){ queue[y].callback.call(node, attrKey, attrValue); if(!queue[y].persistant){ queue.splice(y, 1); } } y++; } }; // Loop through mutation records for(n = 0; n < mutations.length; n++){ mutationRecord = mutations[n]; // Loop through added nodes if(mutationRecord.addedNodes.length > 0){ callbacks = mutationObservers[selector].callbacks.onOpen; if(callbacks){ for(x = 0; x < mutationRecord.addedNodes.length; x++){ addedNode = mutationRecord.addedNodes[x]; // Check if node type is valid if(addedNode.nodeType == 1){ // Loop through callbacks for(_target in callbacks){ modifiedSelector = callbacks[_target].matchType.modifiedSelector; // See if addedNode matches the _target of the callback switch(callbacks[_target].matchType.type){ case "tag": if(addedNode.tagName.toUpperCase() == modifiedSelector){ // Loop through all callbacks executeCallbacks(callbacks[_target].queue, addedNode); } break; case "id": if(addedNode.id == modifiedSelector){ // Loop through all callbacks executeCallbacks(callbacks[_target].queue, addedNode); } break; case "classname": if(addedNode.classList.contains(modifiedSelector)){ // Loop through all callbacks executeCallbacks(callbacks[_target].queue, addedNode, mutationRecord.addedNodes); } break; case "complex": if(addedNode.matches(modifiedSelector)){ // Loop through all callbacks executeCallbacks(callbacks[_target].queue, addedNode); } break; } } } } } } if(mutationRecord.removedNodes.length > 0){ callbacks = mutationObservers[selector].callbacks.onClose; if(callbacks){ // Loop through removed nodes for(x = 0; x < mutationRecord.removedNodes.length; x++){ removedNode = mutationRecord.removedNodes[x]; // Check if node type is valid if(removedNode.nodeType == 1){ // Loop through callbacks for(_target in callbacks){ modifiedSelector = callbacks[_target].matchType.modifiedSelector; // See if removedNode matches the _target of the callback switch(callbacks[_target].matchType.type){ case "tag": if(removedNode.tagName.toUpperCase() == modifiedSelector){ // Loop through all callbacks executeCallbacks(callbacks[_target].queue, removedNode); } break; case "id": if(removedNode.id == modifiedSelector){ // Loop through all callbacks executeCallbacks(callbacks[_target].queue, removedNode); } break; case "classname": if(removedNode.classList.contains(modifiedSelector)){ // Loop through all callbacks executeCallbacks(callbacks[_target].queue, removedNode); } break; case "complex": if(removedNode.matches(modifiedSelector)){ // Loop through all callbacks executeCallbacks(callbacks[_target].queue, removedNode); } break; } } } } } } if(mutationRecord.attributeName){ callbacks = mutationObservers[selector].callbacks.onAttribute; if(callbacks){ // Loop through modified attributes modifiedNodeAttribute = mutationRecord.target; // Loop through callbacks for(_target in callbacks){ modifiedSelector = callbacks[_target].matchType.modifiedSelector; // See if modifiedNodeAttribute matches the _target of the callback switch(callbacks[_target].matchType.type){ case "tag": if(modifiedNodeAttribute.tagName.toUpperCase() == modifiedSelector){ // Loop through all callbacks if(mutationRecord.target.attributes[mutationRecord.attributeName]){ // Its a live list, so check it hasnt been removed executeAttributecallbacks(callbacks[_target].queue, modifiedNodeAttribute, mutationRecord.attributeName, mutationRecord.target.attributes[mutationRecord.attributeName].value); } } break; case "id": if(modifiedNodeAttribute.id == modifiedSelector){ // Loop through all callbacks if(mutationRecord.target.attributes[mutationRecord.attributeName]){ // Its a live list, so check it hasnt been removed executeAttributecallbacks(callbacks[_target].queue, modifiedNodeAttribute, mutationRecord.attributeName, mutationRecord.target.attributes[mutationRecord.attributeName].value); } } break; case "classname": if(modifiedNodeAttribute.classList.contains(modifiedSelector)){ // Loop through all callbacks if(mutationRecord.target.attributes[mutationRecord.attributeName]){ // Its a live list, so check it hasnt been removed executeAttributecallbacks(callbacks[_target].queue, modifiedNodeAttribute, mutationRecord.attributeName, mutationRecord.target.attributes[mutationRecord.attributeName].value); } } break; case "complex": if(modifiedNodeAttribute.matches(modifiedSelector)){ // Loop through all callbacks if(mutationRecord.target.attributes[mutationRecord.attributeName]){ // Its a live list, so check it hasnt been removed executeAttributecallbacks(callbacks[_target].queue, modifiedNodeAttribute, mutationRecord.attributeName, mutationRecord.target.attributes[mutationRecord.attributeName].value); } } break; } } } } } }, createEventListener = function(dexObject, eventType, selector, target, callback, persistant){ // Check that the event type exists in queue if(!delegatedEventListeners[eventType]){ delegatedEventListeners[eventType] = {}; } // Check that this selector is registered if(!delegatedEventListeners[eventType][selector]){ delegatedEventListeners[eventType][selector] = {}; // Setup listener attachEventListeners(eventType, dexObject); } // Check that this target is registered if(!delegatedEventListeners[eventType][selector][target]){ delegatedEventListeners[eventType][selector][target] = []; } // register delegated event listener delegatedEventListeners[eventType][selector][target].push({ callback: callback, persistant: persistant }); }, attachEventListeners = function(eventType, dexObject){ var n, selector = { string: dexObject.selector }; for(n = 0; n < dexObject.nodes.length; n++){ selector.node = dexObject.nodes[n]; selector.node.addEventListener(eventType, function(e){ var eventHandlers = delegatedEventListeners[eventType][selector.string]; for(handlerSelector in eventHandlers){ clickedNode = e.target; while( clickedNode && clickedNode !== document && clickedNode !== selector.node) { // Stop looking when we hit the node that contains the event listener if (clickedNode.matches(handlerSelector)) { var handlerIndex = 0; while (eventHandlers[handlerSelector][handlerIndex]){ eventHandlers[handlerSelector][handlerIndex].callback.call(clickedNode, e); if(!eventHandlers[handlerSelector][handlerIndex].persistant){ eventHandlers[handlerSelector].splice(handlerIndex, 1); } handlerIndex++; } } clickedNode = clickedNode.parentNode; } } }); } }; // EXPOSED SELECTOR FUNCTIONS Dex.fn.init.prototype = { first: function(){ /* Remove all nodes except first from node list */ this.nodes = [this.nodes[0]]; return this; }, index: function(index){ /* Remove all nodes except requested index */ this.nodes = [this.nodes[index]]; return this; }, getNode: function(index){ /* Return DOM node */ return this.nodes[index]; }, exists: function(){ /* See if the node list contains at least one node */ return this.nodes[0] != null; }, appendClone: function(node){ var n; for(n = 0; n < this.nodes.length; n++){ this.nodes[n].appendChild(node.cloneNode(true)); } return this; }, append: function(node){ var n; for(n = 0; n < this.nodes.length; n++){ this.nodes[n].appendChild(node); } return this; }, remove: function(){ var n; for(n = 0; n < this.nodes.length; n++){ this.nodes[n]; if (this.nodes[n].parentNode) { this.nodes[n].parentNode.removeChild(this.nodes[n]); } } return this; }, clone: function(){ var n, clonedNodes = []; for(n = 0; n < this.nodes.length; n++){ clonedNodes.push(this.nodes[n].cloneNode(true)); } this.nodes = clonedNodes; return this; }, parent: function(){ this.nodes = [this.nodes[0].parentNode]; return this; }, closest: function(matchSelector){ var closest = []; node = this.nodes[0]; // Go through parents while(node && node !== document) { if (node.matches(matchSelector)) { closest = [node]; break; } node = node.parentNode; } this.nodes = closest; return this; }, filter: function(selector){ /* Filter then current node list - note: only filters on the first node in list */ this.nodes = this.nodes[0].querySelectorAll(selector); return this; }, // DOM modification setHTML: function(value){ /* Set innerHTML of all nodes in nodelist */ var n; for(n = 0; n < this.nodes.length; n++){ this.nodes[n].innerHTML = value; } return this; }, getHTML: function(value){ /* Get innerHTML of all first node in nodelist */ return this.nodes[0].innerHTML; }, css: function(styles){ /* Set CSS of all nodes in nodelist */ var style, n; for(n = 0; n < this.nodes.length; n++){ for(style in styles){ this.nodes[n].style[style] = styles[style]; } } return this; }, setAttribute: function(key, value){ /* Set attribute of all nodes in nodelist */ var n; for(n = 0; n < this.nodes.length; n++){ this.nodes[n].setAttribute(key, value); } return this; }, getAttribute: function(key){ /* Get attribute of first node in nodelist */ return this.nodes[0].getAttribute(key); }, toggleAttribute: function(key, value){ /* Get attribute of first node in nodelist */ var n, attrValue; for(n = 0; n < this.nodes.length; n++){ attrValue = this.nodes[n].getAttribute(key); if(attrValue == value[0]){ this.nodes[n].setAttribute(key, value[1]); } else { this.nodes[n].setAttribute(key, value[0]); } } return this; }, cache: function(cacheID){ /* Cache node list with cacheID as ID */ cachedSelections[cacheID] = this; }, // Classes addClass: function(classname){ /* Add class to all nodes in nodelist */ var n; for(n = 0; n < this.nodes.length; n++){ this.nodes[n].classList.add(classname); } return this; }, removeClass: function(classname){ /* Remove class from all nodes in nodelist */ var n; for(n = 0; n < this.nodes.length; n++){ this.nodes[n].classList.remove(classname); } return this; }, hasClass: function(classname){ /* Check whether first node in list contains a classname */ var result = false; if(this.nodes[0]){ result = this.nodes[0].classList.contains(classname); } return result; }, toggleClass: function(classname){ /* Toggle classnames on all nodes in nodelist */ var n; for(n = 0; n < this.nodes.length; n++){ this.nodes[n].classList.toggle(classname); } return this; }, replaceClass: function(old_classname, new_classname){ /* Replace old_classname with new_classname on all nodes in nodelist */ var n; for(n = 0; n < this.nodes.length; n++){ this.nodes[n].classList.replace(old_classname, new_classname); } return this; }, trigger: function(eventType){ /* Trigger eventType (click, mouseover, etc, ...) on all nodes in nodelist */ if(this.nodes[0]){ var clickEvent = document.createEvent("MouseEvents"); clickEvent.initEvent(eventType, true, true); this.nodes[0].dispatchEvent(clickEvent); } return this; }, onOpen: function(target, callback){ this.onMutation("onOpen", target, callback, { children: false, persistant: true }); return this; }, onceOpen: function(target, callback){ this.onMutation("onOpen", target, callback, { children: false, persistant: false }); return this; }, onClose: function(target, callback){ this.onMutation("onClose", target, callback, { children: false, persistant: true }); return this; }, onceClose: function(target, callback){ this.onMutation("onClose", target, callback, { children: false, persistant: false }); return this; }, onAttribute: function(target, attrKey, callback){ this.onMutation("onAttribute", target, callback, { attrKey: attrKey, persistant: true }); return this; }, onceAttribute: function(target, attrKey, callback){ this.onMutation("onAttribute", target, callback, { attrKey: attrKey, persistant: false }); return this; }, onMutation: function(mutationType, target, callback, parameters){ var selector = this.selector, parentNodes = this.nodes, matchType = function(target){ // This needs updating to cater for complex selectors. var result; if(target[0] == "."){ result = { type: "classname", modifiedSelector: target.slice(1) } } else if(target[0] == "#"){ result = { type: "id", modifiedSelector: target.slice(1) } } else if(target[0] == "["){ result = { type: "complex", modifiedSelector: target } } else { result = { type: "tag", modifiedSelector: target.toUpperCase() } } return result; }(target), n, parameters = parameters || {}; // See if we need to attach a mutation observer if(!mutationObservers[this.selector]){ mutationObservers[this.selector] = { observer: new MutationObserver(function(mutations){ DOMMutationCallback(mutations, selector, parentNodes); }), callbacks: {} } // Attach observer to all matches nodes for(n = 0; n < this.nodes.length; n++){ mutationObservers[this.selector].observer.observe(this.nodes[n], { attributes: true, childList: true, characterData: false, subtree: true }); } } // See if there are already callbacks for mutationType if(!mutationObservers[this.selector].callbacks[mutationType]){ mutationObservers[this.selector].callbacks[mutationType] = {} } // See if there are already calbacks for this target if(!mutationObservers[this.selector].callbacks[mutationType][target]){ // mutationObservers[this.selector][childtree].callbacks[mutationType][target] = [] mutationObservers[this.selector].callbacks[mutationType][target] = { matchType: matchType, queue: [] } } // Save callback mutationObservers[this.selector].callbacks[mutationType][target].queue.push({ callback: callback, attrKey: parameters.attrKey, persistant: parameters.persistant }); }, onClick: function(target, callback){ createEventListener(this, "click", this.selector, target, callback, true); return this; }, oneClick: function(target, callback){ createEventListener(this, "click", this.selector, target, callback, false); return this; }, onMouseUp: function(target, callback){ createEventListener(this, "mouseup", this.selector, target, callback, true); return this; }, oneMouseUp: function(target, callback){ createEventListener(this, "mouseup", this.selector, target, callback, false); return this; }, onMouseDown: function(target, callback){ createEventListener(this, "mousedown", this.selector, target, callback, true); return this; }, oneMouseDown: function(target, callback){ createEventListener(this, "mousedown", this.selector, target, callback, false); return this; }, onMouseEnter: function(target, callback){ createEventListener(this, "mouseenter", this.selector, target, callback, true); return this; }, oneMouseEnter: function(target, callback){ createEventListener(this, "mouseenter", this.selector, target, callback, false); return this; }, onMouseLeave: function(target, callback){ createEventListener(this, "mouseleave", this.selector, target, callback, true); return this; }, oneMouseLeave: function(target, callback){ createEventListener(this, "mouseleave", this.selector, target, callback, false); return this; }, onMouseOver: function(target, callback){ createEventListener(this, "mouseover", this.selector, target, callback, true); return this; }, oneMouseOver: function(target, callback){ createEventListener(this, "mouseover", this.selector, target, callback, false); return this; }, onMouseOut: function(target, callback){ createEventListener(this, "mouseout", this.selector, target, callback, true); return this; }, oneMouseOut: function(target, callback){ createEventListener(this, "mouseout", this.selector, target, callback, false); return this; }, } Dex.appendCSS = function(url){ var head = document.head, link = document.createElement('link'); link.type = "text/css"; link.rel = "stylesheet"; link.href = url; head.appendChild(link); return link; } Dex.getCached = function(cacheID){ return cachedSelections[cacheID]; } Dex.clearCache = function(cacheID){ delete cachedSelections[cacheID]; } Dex.tag = function(tag){ /* Use Tag() to select nodes using the getElementsByTagName */ var nodes = document.getElementsByTagName(tag); return Dex(tag, nodes); } Dex.class = function(classname){ /* Use Tag() to select nodes using the getElementsByClassName */ var nodeCollection = document.getElementsByClassName(classname), nodes = Array.prototype.slice.call(nodeCollection); return Dex("." + classname, nodes); } Dex.iframe = function(selector){ var iframe = document.querySelectorAll(selector)[0]; return Dex.node(iframe.contentDocument || iframe.contentWindow.document); } Dex.id = function(id){ /* Use Tag() to select nodes using the getElementById */ var nodes = [document.getElementById(id)]; return Dex("#" + id, nodes); } Dex.node = function(node){ /* Use Node to create a Dex object with a DOM node directly */ return Dex("node", [node]); } Dex.collection = function(nodeCollection){ /* Use Node to create a Dex object with an HTML Node Collection directly */ var nodes = []; for(n = 0; n < nodeCollection.length; n++){ nodes.push(nodeCollection[n]); } return Dex("node", nodes) } Dex.dump = function(object){ console.log(mutationObservers); }; if(exposeAs){ window[exposeAs] = Dex; } })("DexV2");</script><style> .add-colour { background: red; } .add-more-colour { background: red; }</style><section> <table> <tbody> <tr> <td> <div class="app-container"> <table> <tbody> <tr> <td> <div class="app-window"> App window <table> <tbody> <tr> <td> <div class="app-menu" id="the-menu"> <h1 class="h1" id="h1" data-attr="hello there">Button</h1> app menu <div> <div> <ul> <li class="add-more-colour"> <span class="title">This is a list item in an unordered list</span> </li> <li class="add-more-colour"> <button class="click-me-ul">ul .click-me</button> <button class="and-me">ul .and-me</button> </li> </ul> <ol> <li class="add-more-colour"> <span class="title">This is a list item in an ordered list</span> </li> <li class="add-more-colour"> <button class="click-me-ol">ol .click-me</button> <button class="and-me">ol .and-me</button> </li> </ol> </div> <span id="output">This is the output area</span> </div> </div> </td> </tr> </tbody> </table> </div> </td> </tr> </tbody> </table> </div> </td> </tr> </tbody> </table> </section>DexV2.tag("li").first();$("li").first();DexV2.tag("li").index();$("li").index();DexV2.tag("li").getNode(1);$("li").get(1);var exists = DexV2.tag("li").exists();var exists = $("li").length > 0;var dexObject = DexV2.tag("h1").parent();var jqueryObject = $("h1").parent();var dexObject = DexV2.tag("h1").closest(".app-menu");var dexObject = $("h1").closest(".app-menu");var dexObject = DexV2.tag("ul").filter("li");var jqueryObject = $("ul").find("li");--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| Dex ::: first() | |
| jQuery ::: first() | |
| Dex ::: index() | |
| jQuery ::: index() | |
| Dex ::: getNode() | |
| jQuery ::: get() | |
| Dex ::: exists() | |
| jQuery ::: exists equivalent | |
| Dex ::: parent() | |
| jQuery ::: parent() | |
| Dex ::: closest() | |
| jQuery ::: closest() | |
| Dex ::: filter() | |
| jQuery ::: find() |
| Test name | Executions per second |
|---|---|
| Dex ::: first() | 2854246.2 Ops/sec |
| jQuery ::: first() | 283138.9 Ops/sec |
| Dex ::: index() | 2095012.4 Ops/sec |
| jQuery ::: index() | 234540.1 Ops/sec |
| Dex ::: getNode() | 2960902.5 Ops/sec |
| jQuery ::: get() | 298972.6 Ops/sec |
| Dex ::: exists() | 2939122.2 Ops/sec |
| jQuery ::: exists equivalent | 307200.5 Ops/sec |
| Dex ::: parent() | 2459514.5 Ops/sec |
| jQuery ::: parent() | 399220.8 Ops/sec |
| Dex ::: closest() | 1762376.8 Ops/sec |
| jQuery ::: closest() | 292769.6 Ops/sec |
| Dex ::: filter() | 925198.6 Ops/sec |
| jQuery ::: find() | 39472.4 Ops/sec |
A large JSON data!
To answer your question, I'll need to extract the relevant information from the data. It appears that you want me to count the number of tests for each test name.
After analyzing the data, here are the results:
Test Name: Dex ::: closest() Number of executions: 5
Test Name: Dex::: filter() Number of executions: 2
Test Name: jQuery ::: parent() Number of executions: 1
Test Name: jQuery ::: exists equivalent Number of executions: 1
Test Name: jQuery ::: get() Number of executions: 1
Test Name: jQuery ::: first() Number of executions: 1
Test Name: jQuery ::: index() Number of executions: 1
Test Name: jQuery::: find() Number of executions: 1
