javascript - 防止IE卡住？

Question

我们的网络应用程序有一部分显示需要处理的可操作项目(“工作”)列表。我们的每个作业模型如下所示:

{
  "JobUID": Number,
  "State": "String",
  "FirstName": "String",
  "LastName": "String",
  "DateOfBirth": "dateTime",
  "DateReceived": "dateTime",
  "LastWorked": "dateTime",
  "UserName": "String",
  "ProblemText": "String", 
  "AssignedTo": "String",
  "DateAdded": "dateTime",
  "CallOutStatusUID": Number,
  "Notes": [
    {
      "NoteUID": Number,
      "EntityUID": Number,
      "Content": "String",
      "UserName": "String",
      "EntityTypeUID": Number,
      "CreatedDateTime": "dateTime"
    }
  ]
}

可以有0..n个注释。我们通过 AJAX 为所有这些工作请求服务，并使用它们来填写表格。我们在这些作业进入的表上使用 jQuery TableSorter 插件。

最近，该列表已增长到其中的 735 个作业，总共有 907 个注释，fiddler 报告传输了 450 KB 的数据。该表与页面的起始选项卡位于不同的选项卡上。当您单击将显示此表的选项卡时，IE 会卡住。澄清一下，这些是 HTML 选项卡，全部位于 IE 内的一个页面上。它们不是多个 IE 选项卡。

当您尝试切换标签时，IE 的内存不会稳定增长(大约 98MB)。该进程处于 13% 的处理器使用率(在 8 核机器上，这告诉我它在单核上执行所有操作，因为 13% 是 ~1/8)。该进程永远不会再次开始响应，必须使用任务管理器关闭。当连接到 Visual Studio 2012 时，如果我尝试在这种情况下暂停和调试，VS 会报告它当前处于 native 代码中。我尝试在卡住之前设置一个 javascript 断点并进入卡住状态，但除了一些幕后的 jquery 调用之外，它似乎确实卡在 native 代码中。

我们暂时的快速解决方案是一次只显示 200 个职位并且它有效，但我们想要一种能够显示所有职位的方法。我开始使用 TableSorter 的 Pager 插件，但它没有帮助。排序器设置为每页仅显示 10 行。如果在尝试更改选项卡之前，我检查了该表中有多少行，它会成功报告 12(每页 10 行 + 1 个标题行 + 1 个过滤行)。

下面是我设置表格的方式(问题是上述模型的数组):

for (var i = 0; i < problems.length; i++) {
    var style = "odd";
    if (i % 2) { style = "even"; }
    var problem = problems[i];
    rows += "<tr class='" + style + "'><td>";
    rows += problem.FirstName;
    rows += "</td><td>";
    rows += problem.LastName;
    rows += "</td><td>";
    rows += problem.DateOfBirth
    rows += "</td><td>";
    rows += problem.ProblemText;
    if (problem.CallOutStatusUID != null) {
        rows += " - " + GetType(callOutStatus, problem.CallOutStatusUID).Display;
    }
    rows += "</td><td style='text-align:center;width:30px'>";
    if (problem.Notes.length > 0) {
        rows += "<a href='#' onclick='getNotes_click(this, \"JobUID\", GetJob, problems);' id='notes-" + problem.JobUID + "' JobUID='" + problem.JobUID + "' class='lnk_Notes'><img src='images/icon_note.png'></a>";
    }
    rows += "</td><td>";
    if (problem.AssignedTo != null && problem.AssignedTo.toUpperCase() != userName.toUpperCase() && problem.State.toUpperCase() == "WORKING") {
        rows += "<a href='imageviewer?JobUID=" + problem.JobUID + "'>Read Only</a>";
    }
    else {
        rows += "<a href='imageviewer?JobUID=" + problem.JobUID + "'>Get Work</a>";
    }
    rows += "</td><td>";
    rows += problem.LastWorked;
    rows += "</td><td>";
    rows += problem.AssignedTo;
    rows += "</td><td>";
    rows += problem.DateReceived;
    rows += "</td></tr>";
}
$("#ListOfJobs tbody").html(rows).trigger('update');

奇怪的是，当在我们的开发环境(而不是我们发现问题的生产环境)中设置相同的场景时，我们可能有超过 1000 个作业，总注释超过 2000 个，并且它会正确显示。我试过在将大数组放入 DOM 后将其删除，但没有任何变化。我也试过删除 rows 但还是没有。还有多个其他选项卡，我可以在所有选项卡之间自由切换，页面似乎正常工作，直到我尝试打开包含此表的选项卡。更改浏览器不是一种选择。我什至无法在其他浏览器中进行测试，因为我们的 AJAX 调用在其中困惑，我们无法达到拥有所有数据并想要切换选项卡的这一点。我们不支持 IE<10。我们确实有一个运行 IE11 的开发人员，它也以完全相同的方式中断。

什么导致 IE 死机？

编辑:我尝试更改最后一行，这样它就不会调用触发器，现在选项卡加载得很好。有没有人对 TableSorter 有足够的了解，知道为什么这个触发器会出现这些问题？

编辑 2:我重新下载了 tablesorter 文件，结果发现我绝对没有使用最新的文件。当我切换到新版本时，一切正常。

Answer 1

Internet Explorer 不支持 innerHTML对 <table> 的修改元素 [ citation ]

因此，jQuery 必须解析生成的大量 HTML 字符串并手动创建每个元素、设置属性、附加子节点、追加它们……除非他们添加代码以分离 <tbody>在处理 DOM 之前，浏览器必须使用每个单独的操作重新计算整个表。

如果可能，请更改您的代码以便生成整个表格，并用它替换您之前拥有的任何表格。这将允许 jQuery 使用 innerHTML ，因为它使用浏览器的内部解析器，所以速度要快得多。