Question

我们的网络应用程序的一部分显示了需要处理的可操作项目列表（＆＃34;作业＆＃34;）。我们每个Job的模型如下：

{
  "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 Notes。我们通过AJAX向服务部门询问所有这些工作，并使用它们填写表格。我们正在使用桌面上的jQuery TableSorter插件进行这些工作。

最近，该列表已增加到735个这样的工作，共有907个Notes，fiddler报告传输了450 KB的数据。该表位于与页面的起始选项卡不同的选项卡上。当您单击将显示此表的选项卡时，IE会冻结。为了澄清，这些是IE标签内的一个页面上的HTML标签。它们不是多个IE标签。

当您尝试切换标签时，IE内存不会稳定增长（大约98MB）。这个过程占处理器使用率的13％（在8核计算机上，它告诉我它在单个核心上做了所有事情，因为13％是~1 / 8）。该过程永远不会再次开始响应，必须使用任务管理器关闭。当挂钩到Visual Studio 2012时，如果我尝试暂停和调试它是这样的，VS报告它当前在本机代码中。我尝试在冻结之前设置一个javascript断点并进入冻结，但除了幕后的一些jquery调用之外，它似乎确实挂在了Native Code中。

我们一段时间的快速解决方案是一次只显示200个工作并且它有效但我们想要一种能够显示所有工作的方法。我开始使用TableSorter的寻呼机插件，但它没有帮助。分拣机设置为每页仅显示10行。如果在尝试更改选项卡之前，我检查该表中有多少行，它会成功报告12（每页10行+ 1个标题行+ 1个过滤行）。

以下是我如何设置表格（problems是上述模型的数组）：

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');

奇怪的是，当我们在我们的开发环境中设置相同的场景时（而不是我们发现问题的prod），我们可以拥有超过1000个以上的工作，总笔记超过2000个并且它会正确显示。我已经尝试删除大数据后将其放入DOM但没有任何变化。我还试图删除rows，但又一次，没有。有其他多个选项卡，我可以自由切换所有选项卡，页面似乎工作，直到我尝试打开包含此表的选项卡。更改浏览器不是一种选择。我甚至无法在其他浏览器中进行测试，因为我们的AJAX调用陷入其中，我们无法达到这一点，我们拥有所有数据并希望切换标签。我们不支持IE＆lt; 10。我们确实有一个运行IE11的开发人员，它也以完全相同的方式中断。

导致IE冻结的原因是什么？

编辑：我尝试更改最后一行，以便它不会调用触发器，现在标签加载就好了。任何人都知道TableSorter知道为什么这个触发器会出现这类问题吗？

编辑2：我重新下载了tablesorter文件，事实证明我绝对没有使用最新的文件。当我使用新的切换时，一切正常。

Answer 1

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

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

如果可能，请更改代码，以便生成整个表，并替换之前使用的任何表。这将允许jQuery使用innerHTML，这在使用浏览器的内部解析器时要快得多。

Answer 2

我认为下一个最好的尝试是在切换选项卡后调用表更新，如果可能的话，删除表并在重新加载时用新的表替换它。我不知道你是否有任何事件听众都附在桌子上的任何东西上，但如果没有，这里有一个单行试试：

$("#ListOfJobs").replaceWith( "<table id=\"ListOfJobs\"><tbody>" + rows + "</tbody></table>").trigger('update');

防止IE冻结？

2 个答案: