Ok, maybe ‘danger’ is too strong a term, but after two days of optimising a search filter system, it transpired a simple oversight was doubling the processing time.
We’d been using the jQuery Paginator plugin; 100+ results, 10 per page, pretty standard stuff. It was called as
$('.pagination-bar').pagination(search_filters.getResults().length, opt);
There is a callback function set which then did our post-pagination stuff. Some template rendering, adding functionality to pages, job done.
But it transpired the code was executing twice, and code searches revealed no other instance of it being called. It took some line-by-line debugging and tracing to spot
return this.each(function() {
at the top of the paginator class. Investigation showed this was so if you passed in a jQuery selector that contained multiple matches (say, a class called pagination-bar), that the plug-in would execute against every match.
Good if you want to modify each element in turn. Bad if you have two pagination bars (above and below) resulting in the expensive rendering being called twice. On my machine, this still only clocked in at 200ms. But on old browsers on old machines, this was getting near 20 seconds!
Some heavy refactoring later, and it’s now triggered once, updates both bars, and renders once. End result was 200ms > 50ms on a good machine, 20 seconds > 500ms on IE8 / WinXP (there was some other improvements made too, but this fix instantly halved the process time).
All because I absent-mindedly passed in a class instead of an ID…