为 IE 优化 jQuery

Posted 2023-03-05

【中文标题】为 IE 优化 jQuery

【英文标题】：optimization jQuery for IE

【发布时间】：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 上的大量其他案例中）

【参考方案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 在渲染它时存在问题