Question

I’ve got this page that let’s you set some filter criteria, and you click the filter button, and it ajaxly gets the data for you.

it all works just wonderfully, until i get a GIANT chunk of html back. it comes back fine, puts it in the document fine, and all the hovers and click functionality i apply to the new content is a-ok, nice and speedy and responsive.

The problem is, once there is a huge page, the filter button takes 4-5 seconds to respond to clicks!

In IE 9 it’s fine, in older versions of IE, other things are slower then 9, but at the expected/acceptable rate.

I’ve done some profiling and whatnot. i’ve added a bunch of console.log statements, and the interesting thing is, the console.log statement at the very beginning of the function does get logged until 4-5 seconds after the button is clicked! even more interesting, if i put an alert as the first line, it fires instantly! and if i put an alert later in the click handler, everything before the alert fires instantly, but everything after is delayed.

not to much going on in the handler, once it decideds to recognize that it’s clicked, it’s super fast:

    $('#FilterScheduledShifts').click(function () {

        console.log("Filter Start:" + new Date().getTime());

        var categoryId = $('#FilterCategoryId').val();
        var activityId = $('#FilterActivityId').val();
        console.log("Before GetShiftStatusFilters:" + new Date().getTime());
        var shiftStatusFilters = v2GetShiftStatusFilterIds();
        console.log("After GetShiftStatusFilters:" + new Date().getTime());
        var dayOfWeekFilters = v2GetDayOfWeekFilters();
        console.log("After v2GetDayOfWeekFilters:" + new Date().getTime());
        var startDateFilter = v2GetStartDateFilter();
        console.log("After v2GetStartDateFilter:" + new Date().getTime());
        var endDateFilter = v2GetStartEndFilter();
        console.log("After v2GetStartEndFilter:" + new Date().getTime());

        if (Date.parse(startDateFilter).isBeforeOrEqual(Date.parse(endDateFilter))) {
            console.log("inside if statement:" + new Date().getTime());

            var dataToPost = { categoryId: categoryId, activityId: activityId, statuses: shiftStatusFilters, daysOfWeek: dayOfWeekFilters, startDate: startDateFilter, endDate: endDateFilter };
            var url = $('#UrlToFilter').val();

            $('#holder').empty().html($('#LoadingScreen').clone());
            console.log("after emptyand loadingscreen:" + new Date().getTime());
            $.ajax({
                url: url,
                data: dataToPost,
                type: 'POST',
                success: function (data) {
                console.log("success:" + new Date().getTime());
                    document.getElementById('holder').innerHTML = data;
                    v2WireUpGetUsersForAllShiftsArrow();
                    v2SetUpGetShiftUserArrow($('#holder').find('div.GetShiftUserArrow'));
                    v2SetUpGetDayShiftsUsers($('#holder').find('div.GetDayUserArrow'));
                    v2SetUpAssingVolunteersLinks($('#holder'));
                },
                error: function () {
                    v2ErrorNotice(v2Text.shared.genericAjaxErrorMessage);
                }

            });
        }
        else {
            v2ErrorNotice('error');
        }
    });

    v2SetUpGetShiftUserArrow($('#holder').find('div.GetShiftUserArrow'));
    v2SetUpGetDayShiftsUsers($('#holder').find('div.GetDayUserArrow'));

});

all those console.logs show up within 30 or 40 milliseconds of each other. so i KNOW it’s not something in there that is slow.

Other info:

there are a couple live handlers on the page that are assigned to span.someClass (i think 3). there used to be a long more, but i’ve fixed them. and it didn’t make a big difference on this problem (in generaly the page got better though).

jquery is version 1.4.1 (and no, i can’t upgrade to a new version).

Answer 1

I’ve noticed, if you have firebug open, especially the HTML tab, there may be a huge performance loss while manipulating or loading the DOM. Close firebug and see if the performace improves.