Yeah, I even have a blog on my website! This is the place where I drop short write-ups with tips and tricks, offer old hardware for sale, maybe even share a song with you, my dear audience and (future) clientele.
Blog
Notify Enter Viewport
Sometimes we are testing a page element or component that, when the page has loaded, lies outside of the viewport. This has the simple consequence that you should not count this page load as a visitor to your test. Only when the element you are testing scrolls into view, the visitor can be added to your test. To accomplish this, we needed some code that keeps track of the elements position on the page with regard to the page’s dimensions.
This one still relies on jQuery, I’ll upload a JS only version soon.
var notifyEnterViewport = function(o) {
var raf = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame,
l = $(window).height(),
r = $(window),
t = r.scrollTop(),
enter = function(e) {
e.addClass("MM_inside_viewport"), e.hasClass("MM_outside_viewport") && e.removeClass("MM_outside_viewport")
},
exit = function(e) {
e.addClass("MM_outside_viewport"), e.hasClass("MM_inside_viewport") && e.removeClass("MM_inside_viewport")
},
loop = function() {
var e = r.scrollTop();
t !== e && (t = e, o.length && $.each(o, function(e) {
var o = $(this),
raf = o.height(),
t = o.offset().top,
loop = t - r.scrollTop(),
n = t - r.scrollTop() + raf;
0 <= loop && n <= l && !o.hasClass("MM_inside_viewport") && (console.log("test: element " + (e + 1) + " scrolled into view"), enter(o)), (n < 0 || l < loop) && !o.hasClass("MM_outside_viewport") && (console.log("test: element " + (e + 1) + " scrolled out of view"), exit(o))
})), raf(loop)
};
raf && loop();
}
elementsToCheck = $("div#checkThisElement");
notifyEnterViewport(elementsToCheck);
- UPDATE!
var notifyEnterViewport = function(el) {
var w = window,
raf = w.requestAnimationFrame,
vpHeight = w.innerHeight,
lastPgYO = w.pageYOffset,
scroll = function() {
var height = el.offsetHeight,
elOffset = offSet(el),
top = elOffset.top,
pTop = top - w.pageYOffset,
pBottom = pTop + height;
if (pTop >= 0 && pBottom <= vpHeight && !el.classList.contains('mm_enter')) {
enter(el);
}
if ((pBottom < 0 || pTop > vpHeight) && !el.classList.contains('mm_exit')) {
exit(el);
}
},
offSet = function(el) {
var rect = el.getBoundingClientRect(),
pgxo = w.pageXOffset,
pgyo = w.pageYOffset;
return {
top: rect.top + pgyo,
left: rect.left + pgxo
};
},
enter = function(el) {
//console.log("enter: ", el);
el.classList.add('mm_enter');
el.classList.remove('mm_exit');
},
exit = function(el) {
//console.log("exit: ", el);
el.classList.add('mm_exit');
el.classList.remove('mm_enter');
},
loop = function() {
var PgYO = w.pageYOffset;
if (lastPgYO === PgYO) {
raf(loop);
return;
} else {
lastPgYO = PgYO;
scroll();
raf(loop);
}
};
if (raf) loop();
};
// call:
notifyEnterViewport(document.querySelector('ul#sub_nav > li.active:not(.first)'));
AB Test jQuery Performance Cheat Sheet
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.
Update: Tip number 1: Do NOT use jQuery! Why wait for a library to load, when vanilla JS nowadays does everything jQuery does – but faster.
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 OK-ish
$("[attribute=value]");
// PSEUDO selector - slowest - needs document.querySelectorAll to perform OK-ish
$(":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:
const arr = [reallyLongArrayOfImageURLs];
$.each(arr, function(count, item) {
let 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
Track That!
This function tracks every event with all its attributes in the div that’s set in the caller function. Handy if you need custom tracking for your AB test.
var trackThat = function() {
var t = {},
r = {},
a = window.event ? window.event.srcElement : i.target,
c = document.getElementsByTagName(a.tagName),
k = "";
try {
for (var d = 0; d < c.length; ++d) c[d] == a && (r.tag = a.tagName, r.index = d, r.text = a.hasChildNodes() ? a.childNodes[0].data : "null"); for (var l, d = 0, o = a.attributes, g = o.length; g > d; d++) l = o[d], t[l.nodeName] = l.nodeValue;
r.attrs = t, k = JSON.stringify(r);
} catch (i) {
k = "error: " + i.message;
} finally {
return k;
}
};
$( 'div.main-holder' ).on('click', function(e){
console.log(trackThat(e));
});