IE 8 - 慢速点击事件识别 - 100 个可点击的表格单元格答案

【问题标题】：IE 8 - Slow Click Event Recognition - 100's Of Clickable Table CellsIE 8 - 慢速点击事件识别 - 100 个可点击的表格单元格
【发布时间】：2012-08-16 04:24:02
【问题描述】：

我遇到的问题是客户大多都在使用 IE8。屏幕上有如此多的元素，IE8 难以识别单击或导航到哪个单元格。速度是不可接受的，所以我正在寻找提高点击识别速度的方法。我已经安装了一个 jQuery 分页插件，它使用户能够更改显示的行数，这提高了一些速度，但还不够。

让我提出这个问题的原因是，使用 .delegation() 和 .click() 时点击识别速度没有区别。在 IE8 中，即使 .delegate 应该快得多。下面的 JSFiddle 是我最大的表的表示，大约 10,000 个单元格。它启用了“单击”和箭头键导航，因此您可以看到 IE8 和 Firefox/Chrome/etc 在速度上的明显差异。此外，IE8 中的 JSFiddle 可能难以呈现示例。

http://jsfiddle.net/RaySuave/Q6vex/1/
（jQuery 代码来自这个网站上的另一个帖子，我做了一些模组来满足我的需要）

我尝试解决该问题的最巧妙的失败尝试是将委派分配给固定数量的行而不是整个表，其模式如下：

$(function(){
   $('table tr').slice(0, 5).delegate("td","click",function);
});

$(function(){
   $('table tr').slice(5,10).delegate("td","click",function);
});

$(function(){
   $('table tr').slice(10, 15).delegate("td","click",function);
});

仅供参考 - jQuery 事件处理方法在不同浏览器中的测试速度
http://jsperf.com/bind-vs-click/41

为什么需要这么大的桌子？
我正在将过去手动填充到 excel 中的大型电子表格转换为动态的基于 Web 的站点，用户可以在其中通过单元格单击和箭头键导航来填充 HTML 表格单元格。单元格值将保存在数据库中。所有授权人员都可以通过网站访问这些表格以供查看。

我已完成所有编码，包括用于使单元格可编辑的 jQuery、用于列标题的垂直文本以及通过 Coldfusion 和 MS-SQL 将值写入数据库。

提前感谢任何 cmets 或建议。

【问题讨论】：

你使用的是什么版本的 JQuery？
按fiddle说是1.4.4。
尝试一次处理更少的数据。在处理如此大量的数据时，通常最好使用 ajax 请求而不是客户端进行分页，除非您忽略了 IE6 7 和 8 的兼容性。这将允许客户端一次只处理 10-30 行，而不是尝试对 10k 行进行排序和分页。
@Elliot，是的，我使用的是 jQuery 1.4.4
客户必须能够同时查看整个表格。我忽略了 IE6 和大部分 IE7。即使是 20 或 30 行，IE 仍然太慢。点击速度非常重要，因为需要更新大量单元格，尤其是在最初填充表格时。在那之后，它只是到处更新一些单元格。

标签： jquery internet-explorer-8 delegates cell html-table

【解决方案1】：

如果它有助于某人搜索缓慢的 ie8 问题：How to force ie8 to repaint after adding a class to a dom element。尽可能减少 DOM 上的元素和事件数量，并使用 [some-attr] 选择器而不是 .some-class 选择器。

【讨论】：