I was noticing poor performance when expanding large spoilers, and the Chrome dev tools confirms that. This Timeline graph is pretty bad.
Diving into the code for the spoiler, I can see this:
, _toggleSpoiler = function(e) {
var header = $(e.currentTarget);
var target = $(e.target);
if (target.is('a:not( [data-action="toggleSpoiler"] )') || (target.closest('a').length && !target.closest('a').is('[data-action="toggleSpoiler"]'))) {
return;
}
e.preventDefault();
if (header.hasClass('ipsSpoiler_closed')) {
ips.utils.anim.go('fadeIn', header.siblings());
header.removeClass('ipsSpoiler_closed').addClass('ipsSpoiler_open').find('span').text(ips.getString('spoilerClickToHide'));
} else {
header.siblings().hide();
header.removeClass('ipsSpoiler_open').addClass('ipsSpoiler_closed').find('span').text(ips.getString('spoilerClickToReveal'));
}
e.stopPropagation();
}
What's happening is that all of the siblings of the spoiler header are being animated individually. This explains the large sink of time being spent in the beginning setup the animations and then in the end receiving completion callbacks. Here's a spoiler with a large number of elements inside of it: So it looks like this only affects older posts. Here's the example I was working off of:
The Fix: Wrap spoiler contents in a div. The resulting timeline speaks for itself.
This will also fix the issue with spoiler tags displaying content even when hidden. The cause being that it's only hiding DOM siblings, not the bare text of the spoiler.
