Question

我有这个页面让你设置一些过滤条件，然后点击过滤按钮，它就会为你获取数据。

这一切都非常有效，直到我得到一大堆html回来。它回来很好，把它放在文档中，并且我应用于新内容的所有悬停和点击功能都是好的，美观，快速和响应。

问题是，一旦有一个巨大的页面，过滤器按钮需要4-5秒来响应点击！

在IE 9中没问题，在IE的旧版本中，其他东西比9慢，但是以预期/可接受的速度。

我做了一些剖析等等。我添加了一堆console.log语句，有趣的是，函数一开始的console.log语句确实会被记录，直到点击按钮后4-5秒！更有趣的是，如果我把警报作为第一行，它会立即触发！如果我稍后在点击处理程序中发出警报，则警报之前的所有内容都会立即触发，但之后的所有内容都会延迟。

在处理程序中没有太多进展，一旦它决定识别它被点击，它就超级快：

    $('#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'));

});

所有这些console.logs都会在30或40毫秒之间显示出来。所以我知道那里的东西不是那么慢。

其他信息：

页面上有几个实时处理程序分配给span.someClass（我认为3）。曾经有更长的时间，但我已经修复了它们。它并没有对这个问题产生很大的影响（虽然一般情况下页面变得更好）。

jquery是版本1.4.1（不，我无法升级到新版本）。

Answer 1

我注意到，如果你打开了firebug，尤其是HTML标签，那么在操作或加载DOM时可能会有巨大的性能损失。关闭萤火虫，看看性能是否有所改善。

帮助解决Firefox中奇怪的jQuery性能问题

1 个答案: