• Skip to primary navigation
  • Skip to content
  • Skip to footer

recoveryArea

Front End Development & UX Optimization

Main navigation

  • About
  • Code
  • Contact

AB Testing, JavaScript, Performance / 14 October 2016

AB Test jQuery Performance Cheat Sheet

cheating

If you write AB tests with jQuery you have to make sure you write your code as optimised as possible. Every millisecond you shave off results in less chance of unwanted repaint or reflow flickers.

Use Faster Selectors.

Know which selectors perform the fastest to optimise your code!


// ID selector - very fast (document.getElementById)
$("#id");
// TAG selector - fast (document.getElementsByTagName)
$("p");, $("input");, $("form");
// CLASS selector - performs well in modern browsers (document.getElementsByClassName)
$(".class");
// ATTRIBUTE SELECTOR - slow - needs document.querySelectorAll to perform OKish
$("[attribute=value]");
// PSEUDO selector - slowest - needs document.querySelectorAll to perform OKish
$(":hidden");

// also, instead of this:
$("#id p");
// do this:
$("#id").find("p"); // --> limit the scope that has to be searched: more than twice as fast!

Use Caching.

Basically every time you use

$('someselector')

you iterate through the dom. If you need an element more than twice, you should store the element reference!


// instead of this:
$('a.contactus').css('padding', '10px');
$('a.contactus').css('margin', '4px');
$('a.contactus').css('display', 'block');
// do this:
var myvar = $('a.contactus');
myvar.css({
padding: '10px',
margin: '4px',
display: 'block'
}); // element stored, CSS passed as object

Use Chaining.

Chained methods will be slightly faster than multiple methods made on a cached selector, and both ways will be much faster than multiple methods made on non-cached selectors.


// instead of this
$("#object").addClass("active");
$("#object").css("color","#f0f");
$("#object").height(300);
// do this
var myvar = $('a.contactus');
myvar.addClass("active").css("color", "#f0f").height(300);

Use Event Delegation.

Event listeners cost memory.


// instead of this: (an event listener for EVERY table cell)
$('table').find('td').on('click',function() {
$(this).toggleClass('active');
});
// do this: (an event listener for only the table that gets fired by its 'td' children)
$('table').on('click','td',function() {
$(this).toggleClass('active');
});

Use Smarter DOM Manipulation.

Every time the DOM is manipulated, the browser has to repaint and reflow content which can be extremely costly.


// instead of this:
var arr = [reallyLongArrayOfImageURLs];
$.each(arr, function(count, item) {
var newImg = '<li><img src="'+item+'"></li>';
$('#imgList').append(newImg); // aargh a selector in a loop! and we're adding an element here, too!
});
// do this
var arr = [reallyLongArrayOfImageURLs],
tmp = '';
$.each(arr, function(count, item) {
tmp += '<li><img src="'+item+'"></li>'; // no selector and the HTML to add is stored in a variable...
});
$('#imgList').append(tmp); // ..that will be added once when the loop has finished

Filed Under: AB Testing, JavaScript, Performance

Pascal Louwes

Me
Creative, resourceful and innovative Front End Developer / User Experience Optimizer. I love to make stuff work, perform and convert better.

Buzzwords
JavaScript, jQuery, User Experience & Conversion Optimization, Web Strategy, Interaction Design, Accessibility, Wordpress Design, Development & Optimization. Check out my full profile!

Footer

Contact me

recoveryArea
Nijverheidstraat 11-1
7511 JM Enschede

+31 6 14 77 98 45
KvK: 65594940

Goals

Let's make a more elegant, easy to use internet, accessible for everyone.
Let's move forward to an empathic, secular, sustainable future, enabled through science and technology.

Read my full profile

Get In Touch

  • Flickr
  • Github
  • Linkedin
  • Twitter

Copyright © 2018 · Another recoveryArea production · All rights reserved