jqGrid multiselect使用大型本地数据和jQueryUI 1.8非常慢，jQueryUI 1.7很好
我在ASP.NET页面中使用jqGrid并将数据注入页面上的脚本块，然后从那里加载。 对于这一个用例，我们必须立即在屏幕上显示大量数据。 涉及300~500条记录，每行30列。 对这种情况进行分页并不合适。 用户需要能够扫描大量数据，选择40~60行然后移动到另一个屏幕。
我不确定这是否适合jqGrid的乞讨，但在原型设计中，一切都运行得足够快。 然而，在多选模式下，转向生产会非常缓慢。
我已经把痛点缩小到了jQueryUI 1.8。 如果我将其恢复到jQueryUI 1.7，它足够快。
jQueryUI 1.7~ 17.htm的例子
jQueryUI 1.8~ 18.htm的例子
注意：示例显示FireFox和IE中的差异最大，Chrome似乎没问题
两个页面都使用最新的jqGrid 3.8并选择了所有选项。
从谷歌CDN加载jQuery和jQueryUI
从我的服务器加载jqGrid JS / CSS
和我的大型本地数据集
数据集中的示例行
var gridData = [ {id:"1",aa:"aa1",bb:"bb1",cc:"cc1",dd:"dd1",ee:"ee1", ff:"ff1", gg:"gg1", hh:"hh1", ii:"ii1", jj:"jj1", kk:"kk1", ll:"ll1", mm:"mm1", nn:"nn1"}, {...} ];
我的基本jqGrid设置调用
$(function () { var gridData = getGridData(); // pulls from getGridData.js setupGrid(gridData); }); function SelectRow(rowid) { // I will be firing AJAX calls here in the future console.log("rowid: " + rowid); } function setupGrid(gridData) { $("#testGrid").jqGrid({ data: gridData, height: 'auto', rowNum: gridData.length, multiselect: true, datatype: 'local', multiboxonly: false, gridview: true, // not sure if this is needed since jqGrid 3.6 onSelectRow: function (rowid) { SelectRow(rowid); }, colNames: ['id', 'aa', 'bb', 'cc', 'dd', 'ee', 'ff', 'gg', 'hh', 'ii', 'jj', 'kk', 'll', 'mm', 'nn'], colModel: [ { name: 'id', width: 40 }, { name: 'aa', width: 40 }, { name: 'bb', width: 40 }, { name: 'cc', width: 40 }, { name: 'dd', width: 40 }, { name: 'ee', width: 40 }, { name: 'ff', width: 40 }, { name: 'gg', width: 40 }, { name: 'hh', width: 40 }, { name: 'ii', width: 40 }, { name: 'jj', width: 40 }, { name: 'kk', width: 40 }, { name: 'll', width: 40 }, { name: 'mm', width: 40 }, { name: 'nn', width: 40 } ], caption: "Test Grid" }); }
如果有人有一些见解为什么网格是如此慢jQueryUI 1.8与jQueryUI 1.7将非常感激。
“很高兴”看到有同样问题的人。
我打开你的例子并点击行或复选框在UI 1.8上表现不佳。
我们（php项目，本地存储在JSON变量中的数据，本地处理（排序，过滤），没有分页，一次最多1000条记录）遇到了同样的问题，但还没有找到解决方案。 UI 1.7在任何浏览器中都表现不错，但随着1.8的变化，我们注意到只有firefox（3.6，没有测试的低版本）的一些严重的性能问题。 IE6，我们其他支持的浏览器工作正常（至少这次:-)
我试图找出这个问题的根源，并使用firebug来分析点击后调用的不同函数的运行时。 我知道jquery对不同的浏览器（规范化）有不同的事件处理，但如果这有任何影响我不知道。
结果可以在这里找到： profile.png
也许你在这个列表中看到任何明显的东西。
由于我们也没有找到任何解决方案，我们降级到UI 1.7.3（其他问题还有其他问题）。
凯
编辑：您是否在jqGrid论坛中报告了此问题？ 大多数问题至少会被接近。
edit2：好的，经过一些进一步的调查和一些研究，我发现了一个解决方法。 如此处所述（ http://www.trirand.com/blog/?page_id=393/bugs/compatibility-bug-with-jquery-ui-1-8-4/ ），问题可以（暂时）通过从UI的css中删除以下行：
.ui-widget :active { outline: none; }
我可以确认删除此行后不再存在性能问题。 由于此规则对我们的风格没有影响，因此解决方法成为我们的修复…… 🙂
这些是关于JQGrid和IE> = 7的一般性观察。我见过你的示例页面，其中许多不会影响你的具体情况。
- IE不能很好地处理大型javascript – 保持你的javascript很小，它将加载 jqgrid更快。
- 加载网格时不要传递html元素，在加载提高初始加载速度后构建它们。
- 如果可以 – 使用分页，这将提高加载速度和交互状态。
- 您可以一次加载整个网格数据，但仍然包括分页 – 无需多次调用服务器。 这将减慢初始负载，但提高分页速度。
- 如果可以，请将以下内容添加：
到您的html头部。 它将在IE 7模式下运行IE 8，我发现使用JQGrid可以更快地运行。 - 在jquery中传播事件，因此向具有子节点的父节点添加事件侦听器也会在子节点上激活该事件。 与其他DOM对象交互时，请记住这一点。 Jquery .hover阻止传播。
- 这是一个重要的问题 – IE浏览器中的hover速度很慢，而且在IE 8中真的很慢！
- Jquery主题滚动 – 交互状态部分使用：将鼠标hover在标签上并在hover时插入背景图像，删除时会提高我的性能。 所以对于
background: #5d5f69 url(/content/images/ui-bg_flat_75_5d5f69_40x100.png) 50% 50% repeat-x;应该是background: #5d5f69;这改善了交互状态。
让我知道你的发现 – 我仍在寻找提高网格速度的方法。