javascript - 当我在Firefox中使用addClass/removeClass时，javascript函数“createCallback”被调用了50次以上

Question

我正在使用ASP.NET 2.0中的Web应用程序，其中涉及几个GridView元素。当用户单击网格中的某一行时，该行需要通过更改颜色来显示其选择。每行都设置了属性以标识其记录类型和唯一ID：

<tr data-elementType='myType' data-myID='12' onclick='selectionFunction();'></tr>

我通过每行调用一个函数的javascript onclick处理程序来完成选择：


从先前选择的行中删除 selected类
将 selected类添加到新的选定行
用新选择的唯一ID更新隐藏字段的值，以便服务器端代码可以知道单击按钮时（查看，删除等）在哪个元素上执行操作。


这些网格之一现在已包含700多个记录。在Firefox 3.6中，此网格上的选择操作非常慢（大约两秒钟）；在其他浏览器（甚至是IE 7和8）中，这也不是问题。我将 console.log语句放在选择函数的开头和结尾，在Firebug中，它们在延迟结束时很快地显示出来，这表明不是选择函数使事情变慢了。我在Firebug中使用了探查器，它说在ASP.NET生成的“ ScriptResource”脚本文件之一中定义的“ createCallback”占用了绝大多数时间。什么是 createCallback？为什么在Firefox 3.6中它这么慢？是FF中的错误，还是我可以解决的问题？

更新：当然，我正在使用jQuery从行中添加/删除类。我一直在使用jQuery 1.5.2和jQueryUI 1.8.11，但我已更新到最新版本（当前为1.6.2和1.8.14），但无济于事。我尝试在 createCallback中放置一个断点，以查看它在哪里被调用，当它中断时，从调用 removeClass到调用堆栈中有几帧。这是Firebug中的堆栈外观：

createCallback()-在ScriptResource.axd中？......

wherever possible trim: trim ? function(text=" ")-在jQuery中

removeClass(value="selectedRow")-在jQuery中

removeClass(classNames="selectedRow", speed=undefined, easing=undefined, callback=undefined)-在jQueryUI中

selectionFunction()-在我的.aspx页面中

onclick

我不明白为什么jQuery会触发这样的ASP.NET生成的函数。

更新2：更多调查提供了更多详细信息。当我使用 addClass / removeClass时，似乎此“ createCallback”函数被称为A LOT，并且在Firefox 3.6和Firefox 5中都在发生。它根本没有被调用，因此这似乎是Firefox。我在有问题的函数/行上放置一个断点，并选择了一行，断点得到了57次。只有前两个涉及到我呼叫 removeClass和 addClass;其余的在调用栈中有几次 createCallback，有时也有 BeginRequestEventArgs。我注意到当我将鼠标悬停在页面（选项卡）上的其他jQueryUI内容上时，当jQuery使用 addClass和 removeClass时，它也会被调用。但是，当我从事tr元素的工作时，为什么会被这么多次调用？

我正在更改标题和标签以反映实际问题。

更新3：每当我在任何网格中选择一行时，即使它只有6行， createCallback都会被调用相同的次数。但是在那种情况下，这不是性能问题，探查器显示它仅占用大约30％的执行时间，而当我在较大的表上探查选择时，至少需要80％的执行时间。因此，当 createCallback在页面上可见的更多内容中使用时，其性能似乎会更差。但是，看起来jQuery似乎不应该引起对 createCallback的调用，尤其是因为在Firebug的脚本搜索中，我根本无法对它进行任何引用。它似乎只在Firefox中被调用！

还要注意，所有这些网格都在同一页面上，但是一次只能看到一个网格，因为我使用的是jQueryUI选项卡。

更新4：我设法按要求在jsFiddle上得到了类似的东西。请参见 here。在Firebug中，找到 createCallback并设置一个断点（就在脚本中单击处理程序的下面，该断点以 Function.__typeName = "Function"; Function.__class = true; Function.createCallback = function (b, a)开头并重新加载页面。我收到了很多调用。

Answer 1

我对ASP的了解很少，但是听起来您的问题纯粹是客户端。

声明每一行的“ onclick”事件不是处理被单击的行的最明智的方法。尤其是当您进入要谈论的行数时（〜700 +）。

更好的方法是将click事件处理程序添加到表中，并找出发生事件时单击的内容。我编写了一个应用程序，其中正在处理类似的尺寸表，但看不到单击时遇到的滞后现象。可能还有其他因素导致您的点击事件变慢，但是我仍然建议在任何情况下都应执行以下内容：

$(function(){
    var rowSelectedClass = 'rowSelectedClass';
    $('#myTableID').click(function(e){
        if(e.target.nodeName === 'TD'){
            var $tr = $(e.target).parent();
            $('tr.' + rowSelectedClass).removeClass(rowSelectedClass);
            $tr.addClass(rowSelectedClass);

            // ....
            // Do whatever else you want to do when the row is clicked
            // ....

        }
    });
}

可以在这里找到一篇很好的文章，看看哪些人倡导了此方法（以及其他一些方便的jQuery技巧）： http://www.artzstudio.com/2009/04/jquery-performance-rules/#leverage-event-delegation

同样值得注意的是，如果您的表在页面加载后已动态添加行，则考虑使用 .live()而不是 .click()。

UPDATE @ 2011年7月28日上午9点
更仔细地查看了源代码之后，我认为所谓的“ createCallback”调用是一个红色鲱鱼。原始jsFiddle源代码中包含“ createCallback”函数的行实际上是一个很长的javascript字符串（〜90,000个字符）。我认为“ createCallback”是该字符串中的第一个函数的事实误导了Firebug的分析器。剖析原始页面的负载时，有2261个调用，正如您所说，“ createCallback”似乎有很多

我已经通过 http://jsbeautifier.org/“美化”（讨厌这句话）这个长的JS字符串，以使其可读并重新添加到jsFiddle页面。您可以在这里看到它： http://fiddle.jshell.net/KvpmE/1/show/。现在，当您配置此页面的负载时，您会看到相似数量的呼叫（2267-不确定其他6个发生了什么！），但重要的是没有一个可以“ createCallback”。

不过，我仍然无法提供任何解决方案，因为从本质上讲，我无法重新创建您的原始问题，即单击行时Firefox 3.6有2秒的延迟。

这仍然是您遇到的问题吗？

您能否尝试看看是否可以在更新的jsFiddle页面中重新创建问题？

另外，请尝试在页面上添加缩小的JS，以查看它是否有助于您跟踪单击行时的实际调用函数，从而了解发生滞后的位置。