javascript函数＆QUOT; createCallback的＆QUOT;所谓的大于50次，当我使用addClass / removeClass移除在Firefox [英] javascript function "createCallback" called >50 times when I use addClass/removeClass in Firefox

问题描述

我工作在ASP.NET 2.0中的Web应用程序，涉及到几个 GridView控件元素。当用户点击一个网格中的行之一，该行需要通过改变颜色来显示其选择。每一行都有属性设置，以确定其记录类型，独特的ID：

I'm working on a web app in ASP.NET 2.0 that involves several GridView elements. When users click one of the rows in a grid, that row needs to show its selection by changing color. Each row has attributes set to identify its record type and unique ID:

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

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

I accomplish the selection through a javascript onclick handler on each row that calls a function that:

• 删除从$ P $的选类pviously选定的行


• 添加选类新选定的行


• 更新一个隐藏字段的值与新选定的唯一ID，以便服务器端code可以知道哪些元素来执行一个按钮被点击时的动作（查看，删除等）。

• Removes the selected class from the previously selected row
• Adds the selected class to the new selected row
• Updates the value of a hidden field with the new selected unique ID so server-side code can know which element to perform an action on when a button is clicked (view, delete, etc).

其中的一个网格现在有刚刚超过700记录在里面。在Firefox 3.6中，这一网格的选择操作是可怕的慢（大约两秒钟）;在其他浏览器（IE，甚至7和8）这不是一个问题。我把的console.log 语句的开始和选择功能的结束，在Firebug他们出现非常快的延时结束，这表明它不是选择是速度变慢的功能。我用探查萤火虫，它说： createCallback的，这在文件中由ASP.NET生成的ScriptResource剧本中的一个定义，走的是巨大的多数的时间。什么是 createCallback的为什么它似乎是如此之慢在Firefox 3.6？它是在FF的错误，或者是我能解决问题吗？

One of these grids now has just over 700 records in it. In Firefox 3.6, the selection operation on this grid is horribly slow (about two seconds); in other browsers (even IE 7 and 8) it's not a problem. I put console.log statements at the start and end of the selection function, and in Firebug they show up very fast at the end of the delay, suggesting that it's not the selection function that is slowing things down. I used the profiler in Firebug and it says that "createCallback", which is defined in one of the "ScriptResource" script files generated by ASP.NET, is taking the huge majority of the time. What is createCallback and why does it seem to be so slow in Firefox 3.6? Is it a bug in FF, or is it a problem I can solve?

更新：我当然使用jQuery从行添加/删除类。我一直使用jQuery 1.5.2和jQueryUI的1.8.11，但我更新到最新版本（1.6.2和1.8.14目前）无济于事。我试图把一个断点 createCallback的来看看它的获取调用，而当它打破那里下来的几帧从我的电话调用堆栈 removeClass移除。这里是堆栈看起来就像萤火虫是什么：

UPDATE: I am, of course, using jQuery to add/remove classes from the rows. I've been working with jQuery 1.5.2 and jQueryUI 1.8.11, but I updated to the latest (1.6.2 and 1.8.14 currently) to no avail. I tried putting a breakpoint in createCallback to see where it's getting called, and when it breaks there it's several frames down in the call stack from my call to removeClass. Here is what the stack looks like in Firebug:

createCallback的（） - 中的ScriptResource.axd ......

createCallback() - in ScriptResource.axd?......

尽可能修剪：修剪？功能（文字=） - jQuery中

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

removeClass移除（值=selectedRow） - jQuery中

removeClass(value="selectedRow") - in jQuery

removeClass移除（类名=selectedRow，速度=不确定，缓解=不确定，回调=未定义） - 在jQueryUI的

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

selectionFunction（） - 在我的.aspx页面中

selectionFunction() - in my .aspx page

的onclick

我不明白为什么jQuery是触发ASP.NET生成这样的功能。

I don't understand why jQuery is triggering an ASP.NET generated function like this.

更新2 ：一些调查提供了一些更详细。看来，这个createCallback的功能获取调用了很多，当我使用 addClass / removeClass移除，并且它的发生在无论火狐3.6和Firefox 5，我发现在Chrome相同的功能，把一个断点它，它没有得到所有调用，所以这似乎是一个Firefox的事情。我把一个断点有问题的功能/线路并选择了行，断点得到它的 57倍的。只有前两个涉及我喊 removeClass移除和 addClass ;其余的人 createCallback的多次在调用堆栈，有时 BeginRequestEventArgs 太。我注意到它获取调用也当我将鼠标放置在页面（标签）上的其他东西jQueryUI的，当jQuery使用 addClass 和 removeClass移除。但是为什么它获取调用很多次，当我做TR元素的工作？

UPDATE 2: some more investigation has provided some more detail. It seems that this "createCallback" function is getting called A LOT when I use addClass/removeClass, and it's happening in both Firefox 3.6 and Firefox 5. I found the same function in Chrome and put a breakpoint on it, and it's not getting called at all, so this seems to be a Firefox thing. I put a breakpoint on the function/line in question and selected a row, and the breakpoint got it 57 times. Only the first two involved me calling removeClass and addClass; the rest had createCallback several times in the callstack, and sometimes BeginRequestEventArgs too. I've noticed it getting called also when I mouseover other jQueryUI stuff on the page (tabs), when jQuery uses addClass and removeClass. But why is it getting called so many times when I do work on tr elements?

我更改标题和标签，以反映真正的问题。

I'm changing the title and tags to reflect the real issue.

更新3 ： createCallback的获取调用大约相同的次数，每当我在任何网格中选择一排，即使只有在它6行。但是，在这种情况下，它不是一个性能问题，并剖析表明它只是采取的执行时间约为30％，而它的至少80％时，我就大表配置文件选择。因此， createCallback的看来，当它在页面上看到更多的东西上下文的用于执行差。但它似乎仍然像jQuery应该不会引起 createCallback的的电话，尤其是因为我不能罚款在所有它在Firebug的脚本搜索的任何引用。它似乎只被调用在Firefox！

UPDATE 3: createCallback is getting called about the same number of times whenever I select a row in any of the grids, even if it only has 6 rows in it. But in that case it's not a performance problem, and the profiler shows it only taking about 30% of the execution time, while it's at least 80% when I profile selection on the larger table. So createCallback seems to perform worse when it's used in the context of more stuff visible on the page. But it still seems like jQuery shouldn't cause a call to createCallback, especially since I couldn't fine any references at all to it in Firebug's script search. And it appears to only get called in Firefox!

另请注意，所有这些网格都在同一页上，但只有一个是可见的一次，因为我使用jQueryUI的标签。

Note also that all of these grids are on the same page, but only one is visible at once, because I'm using jQueryUI tabs.

更新4 ：我设法得到类似的东西了对的jsfiddle的要求。请参见这里。在Firebug中，找到 createCallback的和脚本，在那里与功能.__的typeName =功能开头设置一个断点（仅低于我的点击处理程序;功能.__类= TRUE; Function.createCallback =功能（b，A）并重新加载页面，我收到了很多电话给它

UPDATE 4: I managed to get something similar up on jsFiddle as requested. See here. In Firebug, find createCallback and set a breakpoint (just below my click handler in the script, where it begins with Function.__typeName = "Function"; Function.__class = true; Function.createCallback = function (b, a) and reload the page. I get a lot of calls to it.

推荐答案

我有ASP不甚了解但它听起来像你的问题是纯粹的客户端。

I have very little knowledge of ASP however it sounds like your problem is purely client side.

在声明的onclick事件的每一行不是处理被点击的行最明智的办法。尤其是当你进入你谈论（〜700 +）。

Declaring on "onclick" event for each row is not the most sensible way to handle the rows being clicked. Especially when you get into the quantity of rows you're talking about (~700+).

有一个更好的方法是将一个click事件处理程序添加到表，并找出它的时候会发生什么被点击。我已经写在这里同样大小的表被处理的应用程序，我们没有看到像你点击时遇到的任何滞后。有可能是其他因素造成的点击活动放缓但我还是建议大意如下的东西是值得推行在任何情况下：

A better way would be to add a click event handler to the table and figure out what is clicked when it happens. I have written an application where a similar size table is being handled and we're not seeing anything like the lag you're experiencing upon click. there may well be other factors causing your click events to slow down however I would still suggest something along the following lines is worth implementing in any case:

$(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

A good article to take a look at which advocates this method (and a few other handy jQuery tips) can be found here: http://www.artzstudio.com/2009/04/jquery-performance-rules/#leverage-event-delegation

另外值得注意的是，如果你的表中有动态添加行页面加载后，再考虑使用 .live（）而不是。点击（ ）。

Also worth noting that if your table has rows added dynamically after the page is loaded then consider using .live() instead of .click().

更新@ 2011年7月28日上午9时结果
已经采取了看看源更加紧密，我觉得应该呼吁createCallback的是一个红色的鲱鱼。其中包含createCallback的功能你原来的jsfiddle源中的行实际上是一个很长的JavaScript字符串（〜90000个字符）。我认为，事实上，createCallback的是字符串中的第一个功能是在误导Firebug的探查。当您分析您的原始网页的载入，有2261电话，像你说的，似乎有说不完的createCallback的

UPDATE @ July 28th 2011 9AM
Having taken a look at the source more closely, I think the supposed calls to "createCallback" are a red herring. The line within your original jsFiddle source which contains the "createCallback" function is actually a really long string (~90,000 characters) of javascript. I think the fact that "createCallback" is the first function within that string is misleading Firebug's profiler. When you profile your original page's load, there are 2261 calls and as you said, there appear to be lots to "createCallback"

我已经通过 http://jsbeautifier.org/使其可读性和它重新添加到页面的jsfiddle。你可以在这里看到： http://fiddle.jshell.net/KvpmE/1/show/ 。现在，当你资料这个网页的加载，你会看到一个类似的电话（2267 - 不知道发生了什么事，其他6！）的数量，但重要的不是单一的一个createCallback的。

I've "beautified" (hate that phrase) this long JS string via http://jsbeautifier.org/ to make it readable and re-added it to a jsFiddle page. You can see it here: http://fiddle.jshell.net/KvpmE/1/show/. Now when you profile this page's load you'll see a similar number of calls (2267 - not sure what happened to the other 6!) but importantly not a single one to "createCallback".

我现在还不能提供，虽然任何解决方案，因为基本上我已经无法重新创建原始的问题，它是一个点击一行时，有在Firefox 3.6中2秒延迟。

I still can't offer any solution though because essentially I've been unable to re-create your original issue which was that there was a 2 second lag in Firefox 3.6 when clicking a row.

这是你仍然遇到的问题？

Is this still the problem you're having?

你能试一试，看看您是否可以重新创建更新的jsfiddle页中的问题？

Could you try and see whether you can re-create the problem within the updated jsFiddle page?

也可以尝试并添加去缩小的JS到您的网页，看看它是否可以帮助您跟踪实际的功能被点击行时被调用，因此那里的滞后正在发生。

Also try and add the de-minified JS to your page to see if it helps you track down the actual functions being called when the row is clicked and therefore where the lag is taking place.

这篇关于javascript函数＆QUOT; createCallback的＆QUOT;所谓的大于50次，当我使用addClass / removeClass移除在Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！