Skip to content

Instantly share code, notes, and snippets.

@adrienne adrienne/perftips.js
Last active Dec 15, 2015

Embed
What would you like to do?
some quick Javascript/jQuery performance tips
// Some references here: http://bitly.com/bundles/adrienne/15
// Using native getElementByID to create a jQuery collection is faster than jQuery's ID selector!
// -------------------------------------------------------------------------------------------------------------
// prefer:
$(document.getElementById("testid"));
// to:
$("#testid");
// Never return false from a click handler; use preventDefault instead.
// -------------------------------------------------------------------------------------------------------------
// prefer:
$('#item').click(function(event) {
// stuff here
event.preventDefault();
});
// to:
$('#item').click(function() {
// stuff here
return false;
});
// Contextual selectors $('element','context') are faster than unqualified selectors when not selecting by ID
// -------------------------------------------------------------------------------------------------------------
// prefer:
$('.class', '#class-container');
// to:
$('.class');
// and especially to:
$('#class-container .class');
// Using $.ready is faster than $(document).ready
// -------------------------------------------------------------------------------------------------------------
// prefer:
$.fn.ready(function() {
// some code
});
// to:
$(document).ready(function() {
// some code
});
// using CSS3 :not is faster than $fn.not !
// -------------------------------------------------------------------------------------------------------------
// prefer:
var d = $('div:not(#header)');
// to:
var d = $('div').not('#header');
// Delegating to body is faster than delegating to an arbitrary parent element
// -------------------------------------------------------------------------------------------------------------
// prefer:
$(document.body).on("hover", "td", function() {
$(this).toggleClass("hover");
});
// to:
$("table").on("hover", "td", function() {
$(this).toggleClass("hover");
});
// $.data is faster than $fn.data
// -------------------------------------------------------------------------------------------------------------
// prefer:
$.data( $("#el") , 'keyname' );
// to:
$("#el").data('keyname');
// Appending a single (concatenated) string to a cached element is faster than appending to a live collection,
// and WAY faster than multiple appends
// -------------------------------------------------------------------------------------------------------------
// prefer:
var $toappend = $("#toappend");
str = str1+str2+str3;
$toappend.append(str);
// to:
str = str1+str2+str3;
$("#toappend").append(str);
// and ABSOLUTELY to:
$("#toappend").append(str1);
$("#toappend").append(str2);
$("#toappend").append(str3);
// Detaching nodes from the DOM before appending, then reinserting them,
// is faster than appending to attached nodes
// -------------------------------------------------------------------------------------------------------------
// prefer:
var $table=$("#mytable");
var $tbody=$table.children("tbody").detach();
$tbody.append(stuff);
$table.append($tbody);
// to:
var $table=$("#mytable");
$table.children('tbody').append(stuff);
// Using quickeach plugin is faster than $fn.each
// -------------------------------------------------------------------------------------------------------------
// prefer (using plugin from https://gist.github.com/Striker21/1352993):
$('td').quickEach(function( i, elem ){
elem; // DOM element
i; // DOM element index
this; // jQuery object
});
// to (jQuery core $fn.each method):
$('td').each(function( i, elem ){
this; // DOM element ( this === elem )
i; // DOM element index
$(this); // jQuery object
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.