Benchmark: DEX vs JQUERY ::: Attribute manipulation

DEX vs JQUERY ::: Attribute manipulation (version: 1)

Comparing performance of: Dex ::: addClass() vs jQuery ::: addClass() vs Dex ::: removeClass() vs jQuery ::: removeClass() vs Dex ::: toggleClass() vs jQuery ::: toggleClass() vs Dex ::: replaceClass() vs jQuery ::: replace class equivalent vs Dex ::: hasClass() vs jQuery ::: hasClass()

Created: 6 years ago by: Registered User

Jump to the latest result

HTML Preparation code:

<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;
                }


            };

            var delegatedEventListeners = {},
			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 !== 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){
											delete eventHandlers[handlerSelector][handlerIndex];
										}

										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;
		        },

		        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;

		        },

		        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;
		        },

                onClick: function(target, callback){

                    // Check that the event type exists in queue
                    if(!delegatedEventListeners["click"]){
                        delegatedEventListeners["click"] = {};
                    }

                    // Check that this selector is registered
                    if(!delegatedEventListeners["click"][this.selector]){
                        delegatedEventListeners["click"][this.selector] = {};

                        // Setup listener

                        attachEventListeners("click", this);
                    }

                    // Check that this target is registered
                    if(!delegatedEventListeners["click"][this.selector][target]){
                        delegatedEventListeners["click"][this.selector][target] = [];
                    }

                    // register delegated event listener
                    delegatedEventListeners["click"][this.selector][target].push({
                        callback: callback,
                        persistant: true
                    });

					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 nodes = document.getElementsByClassName(classname);

				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)
			}

            if(exposeAs){
                window[exposeAs] = Dex;
            }

        })("Dex");
</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">
                                                                      	<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>

Tests:

Dex ::: addClass()
Dex.tag("li").addClass("add-colour");
jQuery ::: addClass()
$("li").addClass("add-colour");
Dex ::: removeClass()
Dex.tag("li").removeClass("add-more-colour");
jQuery ::: removeClass()
$("li").removeClass("add-more-colour");
Dex ::: toggleClass()
Dex.tag("li").toggleClass("add-more-colour");
jQuery ::: toggleClass()
$("li").toggleClass("add-more-colour");
Dex ::: replaceClass()
Dex.tag("li").replaceClass("add-more-colour", "add-colour");
jQuery ::: replace class equivalent
$("li") .removeClass("add-more-colour") .addClass("add-colour");
Dex ::: hasClass()
var hasClass = Dex.tag("li").hasClass("add-colour");
jQuery ::: hasClass()
var hasClass = $("li").hasClass("add-colour");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Dex ::: addClass()
jQuery ::: addClass()
Dex ::: removeClass()
jQuery ::: removeClass()
Dex ::: toggleClass()
jQuery ::: toggleClass()
Dex ::: replaceClass()
jQuery ::: replace class equivalent
Dex ::: hasClass()
jQuery ::: hasClass()

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 6 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

Browser/OS: Chrome 61 on Mac OS X 10.12.5

View result in a separate tab

Test name	Executions per second
Dex ::: addClass()	71075.3 Ops/sec
jQuery ::: addClass()	47934.9 Ops/sec
Dex ::: removeClass()	73879.7 Ops/sec
jQuery ::: removeClass()	50378.2 Ops/sec
Dex ::: toggleClass()	55735.7 Ops/sec
jQuery ::: toggleClass()	12949.2 Ops/sec
Dex ::: replaceClass()	193421.9 Ops/sec
jQuery ::: replace class equivalent	27351.8 Ops/sec
Dex ::: hasClass()	2399868.0 Ops/sec
jQuery ::: hasClass()	263288.0 Ops/sec

DEX vs JQUERY ::: Attribute manipulation (version: 1)

Comparing performance of: Dex ::: addClass() vs jQuery ::: addClass() vs Dex ::: removeClass() vs jQuery ::: removeClass() vs Dex ::: toggleClass() vs jQuery ::: toggleClass() vs Dex ::: replaceClass() vs jQuery ::: replace class equivalent vs Dex ::: hasClass() vs jQuery ::: hasClass()

Created: 6 years ago by: Registered User

Jump to the latest result

Dex ::: addClass()

jQuery ::: addClass()

Dex ::: removeClass()

jQuery ::: removeClass()

Dex ::: toggleClass()

jQuery ::: toggleClass()

Dex ::: replaceClass()

jQuery ::: replace class equivalent

Dex ::: hasClass()

jQuery ::: hasClass()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A