Selecting Items

// '.classes', '[attributes]', '#ids'
document.querySelector(elem); 
document.querySelectorAll(elems);

// '.classes', '[attributes]', '#ids'
$(elem);

jQuery

JavaScript

Code

Performance

85%  - source

Support

93%   - source

Manuplating Classes

// JavaScript uses a DOMTokenList to contain
// the class names, returned via the classList Object
elem.classList.add('fowd');
elem.classList.remove('fowd');
elem.classList.toggle('fowd');

//You can use below method to a jQuery Object
$(elem).addClass('fowd');
$(elem).removeClass('fowd');
$(elem).toggle('fowd');

jQuery

JavaScript

Code

Performance

85%  -  source

Support

82%   -  source

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

el.className += ' ' + className;

Add Class

Remove Class

Alt Code

Support

99%

Manuplating Attributes

elem.setAttribute('data-jquery', 'test'); // set
elem.getAttribute('data-jquery'); // get

$(elem).attr('data-jquery', 'test'); // set
$(elem).attr('data-jquery'); // get

jQuery

JavaScript

Code

Performance

86%  -  source

Support

99% 

Event Listners

if (el.addEventListener) {
    el.addEventListener(eventName, someFunction);
} else { //IE 8-
    el.attachEvent('on' + eventName, function(){
      someFunction.call(el);
    });
}

$(elem).on('click', someFunction);

jQuery

JavaScript

Code

94%   -  source

Performance

99%  -  source

Support

DOM Ready

document.addEventListener('DOMContentLoaded', Function_Name);

$(document).ready(Function_Name);

jQuery

JavaScript

Code

Performance

Performance Stats have, by now, become a joke

Support

89%   -  source

Styling Elements

// extend the Style Object, pure write, no loops
var elem = document.querySelector(elem);
elem.style.background = '#000';
elem.style.color = '#fff';

// creates an Object, will loop internally
$(elem).css({
  "background" : "#000",
  "color" : "#fff"
});

jQuery

JavaScript

Code

Support

99%

Loops

Code - nodes

var paragraphs = document.querySelectorAll( "p" );

for (var i = 0; i < paragraphs.length; i++ ) {
    paragraphs[ i ].classList.add('red');
};

jQuery('p').each(function(index, value) {
   jQuery(this).addClass('red');
});

//or jQuery('p').addClass('red')

jQuery

JavaScript

var arr = [2, 3, 5, 7];
arr.forEach(function (value, index) {
  //works ie9+ or use normal for loops
});

var arr = [2, 3, 5, 7];
$.each(arr, function(index, value) {
   
});

jQuery

JavaScript

Code - array

var obj = { a:'1', b:'2' };
for (var prop in obj) {

}

var obj = { a:'1', b:'2' };
$.each(obj, function(index, value) {
  
});

jQuery

JavaScript

Code - objects

Time Taken By Browsers to parse jQuery

• Desktop       - 10-20 ms
• Mobile         -  50-100 ms
• Android 4.0 -  500ms

jQuery Core File Size

• 1.11.0 : 32.64 KB
• 2.1.0   : 28.66 KB

(minified and gzipped)

The slow parsing  of scripts on mobile browsers like Android forces us to use small JavaScript libraries.

How about
loading jQuery from a 3rd party CDN

ajax.googleapis.com or code.jquery.com

" 81.9% of the websites use none of the JavaScript content delivery networks that we monitor.

Google Hosted Libraries is used by 15.8% of all the websites, that is a JavaScript content delivery network market share of 87.3%. "

- w3techs

Cache Hits are rare

• DNS lookup
• TCP connection
• HTTP GET

miss leads to 3 RTTs!

Native methods will almost always be faster, but in the vast majority of cases it doesn't matter.

"I tried using the browser’s native innerHtml and getElementByClassName API methods instead of jQuery’s html and append. I thought native APIs might be easier for the browser to optimize and what I read confirmed that. But for whatever reason, it didn’t make much of a difference for Trello."

- Fogcreek

What about Zepto

• Zepto is a jQuery-compatible lib.
• APIs provided match their jQuery counterparts but not 100%
• It's a drop-in replacement of jQuery for most projects
• It's 1/4 the size of jQuery. 

But does it lead to faster site

" we found that lighter file size did not translate into better performance overall. Sure, Zepto downloaded quickly. But once loaded, it wasn't quite as fast as jQuery. It didn't help that many third-party plugins required jQuery, not Zepto — in fact, we found that some third party JavaScripts conflicted outright with Zepto."

- Zurb Fundation

Worry about the size of jQuery after you have

• minified your assets,
• concatenated your assets,
• gziped your assets,
• set appropriate cache headers,
• removed unnecessary HTTP requests as much as possible (e.g. images)

What are the top 300K sites doing

jQuery Hosted from, 1 Mar 13

- stevesouders

What are the top 300K sites doing

jQuery Version if loading from Google, 1 Mar 13

Add Class to all p

var paragraphs = document.querySelectorAll( "p" );
var plen       = paragraphs.length;
var i          = 0;

for (i = 0; i < plen; i++ ) {
    paragraphs[ i ].classList.add('red');
};

jQuery('p').addClass('red');

jQuery

JavaScript