jQuery for the script guy

jQuery is the most used Javascript library in the world. It’salso one of the most hated. jQuery like all libraries has it’s advantages: it’ssimple to use, is cross browser compatible and makes web pages interactive withonly a few lines of code. Sounds great right? Only problem is that it impactswebsite performance!

To begin, in order to use jQuery you need to add an externaljavascript file like ‘jquery.min.js’ which is a 30kb file. This file load timecan add 7 milliseconds of delay to your page load, this might not sound like alot but imagine a user with slow internet or mobile connection.

If you’ve added the library using google’s jQuery url ‘https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js’then this would normally already be cached in the browser because a lot ofwebsite use jquery. Still though a delay is a delay.

Excluding the delay from the external file, jQuery is a lot slowerthan pure javascript or ‘vanilla’ javascript as it’s known in the industry. Evena simple task like adding a node to the DOM (Document Object Model) instead ofa simple api call, jQuery performs multiple unnecessary operations for changingthe DOM.

So what alternatives are there, other than re-writing your jquery functions in pure javascript, which is supported by all modern browsers, an alternative is to use a lightweight alternative such as Cash.

Pure Javascript examples for common jquery functions.

JavaScript Get Request

var request = new XMLHttpRequest();request.open('GET', '/my/url', true);request.onload = function() {if (request.status >= 200 && request.status < 400) {// Success!var resp = request.responseText;} else {// We reached our target server, but it returned an error}};request.onerror = function() {// There was a connection error of some sort};request.send();

JavaScript POST

var request = new XMLHttpRequest();request.open('POST', '/my/url', true);request.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');request.send(data);

JavaScript Hide & Show

el.style.display = 'none';//HIDEel.style.display = '';//SHOW

JavaScript Find

el.querySelectorAll(selector);

JavaScript Append

parent.appendChild(el);

JavaScript Remove

el.parentNode.removeChild(el);

JavaScript Get Html

el.innerHTML

JavaScript Get Text

el.textContent

JavaScript Set Style

el.style.borderWidth = '20px';

JavaScript Set Html

el.innerHTML = string;

JavaScript Add Class

if (el.classList)el.classList.add(className);elseel.className += ' ' + className;

JavaScript Remove Class

if (el.classList)el.classList.remove(className);elseel.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|')+ '(\\b|$)', 'gi'), ' ');