How to speed up creating Waypoints? - jquery-waypoints

Question

I am attaching a waypoint to 2000 elements on the page, because I want to trigger a different event for each one. I have tried the noframework way as well as using jquery, and each one adds about 20 seconds to the loading of my page. Is there a technique I can use to attach waypoints to a lot of elements without it slowing down my page load? Thanks.
Jquery version (call once):
var waypoints = $('[data-waypointidentifier="iswaypoint"]').waypoint({
handler: function (direction) {
waypointHandler(direction, this);
}
});
No Framework version (called once for each of the 2000 elements):
var waypoint = new Waypoint({
document.getElementById('element-waypoint1'),
handler: function (direction) {
waypointHandler(direction, this);
}
});

Answer 1

This is not really an answer BUT does demonstrate the issue in near lowest form.
EDIT: This is perhaps a bit of a workaround hack now. Modified to simply attach in chunks.
NOTE: you will have to modify the last chunk - mine had even numbers at 2000 which I "chunked" in groups and then set a bound timeout to attach them. It still takes just as long but makes the situation slightly less visible while/until they all attach.
// approx times to attach (not definitive)
// - note each increment nearly doubles times, not linear
// super simple test, chrome, prob more on most computers
// var punchCount = 250; // 150ms
// var punchCount = 500; // 500ms
// var punchCount = 1000; // 2350ms
// var punchCount = 1500; // 4700ms
var punchCount = 2000; // 8750ms
function initme() {
var addme = $('<div class="facepunch" data-iam="-1">hi</div>');
var addgroup = $('<div>start</div>');
for (var i = punchCount; i > 0; i--) {
addme = $('<div class="facepunch">hi</div>').data('iam', i);
addme.appendTo(addgroup);
}
$('#punchme').append(addgroup);
}
var t0 = performance.now();
console.log('init 1');
initme();
var t1 = performance.now();
console.log("Call to initme took " + (t1 - t0) + " milliseconds.");
console.log('before 1');
function waypointHandler(direction, me) {
// NOOO... this will kill your perf console.log(direction, me);
var newt = "howdy " + $(me.element).data('iam');
$(me.element).text(newt + " " + direction);
}
t0 = performance.now();
console.log('before 2');
var waypoints = {};
function createWaysChunk(begin, end) {
console.log(begin, end, $('.facepunch').slice(begin, end).length);
$('.facepunch').slice(begin, end).waypoint({
// enabled: false,//no perf benefit
handler: function(direction) {
waypointHandler(direction, this); // "this.element" is the element
}
});
}
function createWays() {
t0 = performance.now();
var chunksize = 40;
var y = punchCount / chunksize; // 250
var x = 0;
for (var i = 0; i < chunksize; ++i) {
begin = x;
end = y * i;
setTimeout(createWaysChunk.bind(null, begin, end), 100);
x = end;
}
t1 = performance.now();
console.log("Call to createways = took " + (t1 - t0) + " milliseconds.");
}
// time out just moves the "freeze" to after the page loads
//var timeoutID0 = window.setTimeout(createWays, 2000);
window.onload = createWays;
// createWays();
t1 = performance.now();
console.log("Call to waypoints = took " + (t1 - t0) + " milliseconds.");
// Test with .enableAll
//t0 = performance.now();
//console.log('after 1');
// time out just moves the "freeze" to after the page loads
//var timeoutID = window.setTimeout(Waypoint.enableAll, 2000);
//initial enabled = false then enable is way slow, slower than true overall by 15000+ ms
//Waypoint.enableAll();
//console.log('after 2');
//t1 = performance.now();
//console.log("Call to enableAll took " + (t1 - t0) + " milliseconds.");
.facepunch {
height: 3em;
border: solid 1px lime;
margin: 0.25em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js" integrity="sha256-jDnOKIOq2KNsQZTcBTEnsp76FnfMEttF6AV2DF2fFNE=" crossorigin="anonymous"></script>
<div id="punchme"></div>