为 IE 优化 jQuery答案

【问题标题】：optimization jQuery for IE为 IE 优化 jQuery
【发布时间】：2011-12-18 14:06:05
【问题描述】：

我有功能：

function doBlamingItem($cell, showEditMark) {
    $cell.hover(function () {
        $cell.toggleClass('clickable-cell', showEditMark).toggleClass('editing-cell', !showEditMark);
    }, function() {
        $cell.removeClass('clickable-cell editing-cell');
} );};

在 $(document).ready() 中，我将此函数应用于表中的某些单元格（~500），当我将鼠标移到它上面时 - 在 FF 或 Chrome 中一切正常，但 IE7-9 开始滞后并且我不知道如何解决它:(

以及来自 $(document).ready() 的代码：

var i = firstRowOnPage();
while (table.GetRow(i) != null) {
    if (condition) {
        var row = table.GetRow(i);
        var elementInCellId = column.fieldName + '_' + rowKey;
        var $cell = $(row.cells[realIndex]).attr('id',elementInCellId);
        doBlamingItem($cell, true);
        setClickable(editInfo, $cell);
    }
i++;
}

我对每个单元格都使用 doBlamingItem，因为其中一些为 showEditMark=true，而另一些为 showEditMark=false

【问题讨论】：

对不起，我帮不上忙，但我想说的是，至少在这个问题上，你的英语看起来并不糟糕 :)
你确定没有对每个元素应用 500 个事件处理程序吗？！
请显示调用此函数的代码。
意识到 IE 仍然比竞争对手慢一点。此外，表格在 html-dom 世界中非常特殊。 this jsperf test case 是一个很好的例子（在 jsperf 上的大量其他案例中）

标签： javascript jquery internet-explorer jquery-selectors

【解决方案1】：

您的代码基本上 (1) 找到了大约 500 个元素，(2) 将它们迭代到 (3) 分配悬停事件（由 mouseenter 和 mouseleave 组成）。你听说过delegated events吗？

设置时间几乎为零（仅注册了 2 个事件处理程序，而不是 1000 个）。没有选择和遍历任何元素。

(function($, undefined){
  // if you want it global
  var showEditMark = true;
  // otherwise save that state to some element's data()

  $(function(){
    $(document.body).delegate('.your-table-selector td', {
      mousenter: function(e){
        $(this)
          .toggleClass('clickable-cell', showEditMark)
          .toggleClass('editing-cell', !showEditMark);
      },
      mouseleave: function(e){
        $(this).removeClass('clickable-cell editing-cell');
      }
    });
  });
})(jQuery);

【讨论】：

我对每个单元格都使用doBlamingItem，因为其中一些单元格为showEditMark=true，其他单元格为showEditMark=false
您可能仍然对它们使用相同的事件处理程序，并且该事件处理程序必须检查给定单元格的showEditMark 是true 还是false。
我将代码更改为使用委托并创建了全局数组：window.flags[cellID] = showEditMark;但现在我的页面开始滞后了:(
我必须查看代码才能告诉您您做错了什么……我想知道您为什么要使用全局变量而不是 $.fn.data() 或简单的类。跨度>
因为使用全局数组，这段代码比 $.data() 运行得更快

【解决方案2】：

感谢所有回答我问题的人，但当我意识到问题不在 javascript 中时...我的页面有很大的 DOM-tree 元素和许多 CSS 样式，因此 IE 在渲染它时存在问题

【讨论】：