我有一个体积大，动态生成的表，其中包含以下高端内容。我将免除你发布整个表格的痛苦，因为它非常复杂，并且在表格中的表格中包含表格：
<table class="pcsearchresults" style="table-layout:fixed;">
<thead>
<tr>
<th>
Assign Record
<% if (ViewData["CheckBoxAll"] != null)
{ %>
<input type="checkbox" id="checkBoxAll" name="checkBoxAll" checked="checked" />
<% } %>
<% else
{ %>
<input type="checkbox" id="checkBoxAll" name="checkBoxAll" />
<% } %>
</th>
<th onclick="javascript: SortData(0);" style="cursor: pointer;">
Part Number<img src="/Drm/Content/jqGrid/steel/images/sort_asc.gif" id="0_img" style="visibility: hidden" />
</th>
<th onclick="javascript: SortData(1);" style="cursor: pointer;">
Description<img src="/Drm/Content/jqGrid/steel/images/sort_asc.gif" id="1_img" style="visibility: hidden" />
</th>
<th onclick="javascript: SortData(2);" style="cursor: pointer;">
HTS Country<img src="/Drm/Content/jqGrid/steel/images/sort_asc.gif" id="2_img" style="visibility: hidden" />
</th>
<th onclick="javascript: SortData(3);" style="cursor: pointer;">
Status<img src="/Drm/Content/jqGrid/steel/images/sort_asc.gif" id="3_img" style="visibility: hidden" />
</th>
<th onclick="javascript: SortData(4);" style="cursor: pointer;">
Primary HTS<img src="/Drm/Content/jqGrid/steel/images/sort_asc.gif" id="4_img" style="visibility: hidden" />
</th>
<th onclick="javascript: SortData(5);" style="cursor: pointer;">
Pref Trade Code<img src="/Drm/Content/jqGrid/steel/images/sort_asc.gif" id="5_img"
style="visibility: hidden" />
</th>
<th onclick="javascript: SortData(6);" style="cursor: pointer;">
Customs COO<img src="/Drm/Content/jqGrid/steel/images/sort_asc.gif" id="6_img" style="visibility: hidden" />
</th>
<th onclick="javascript: SortData(7);" style="cursor: pointer;">
GTC Site<img src="/Drm/Content/jqGrid/steel/images/sort_asc.gif" id="7_img" style="visibility: hidden" />
</th>
</tr>
<%
for (int i = 0; i < 7; i++)
if (ViewData["8"].Equals("" + i + "") && ViewData["SortOrder"].Equals("1"))
{ %>
<script type="text/javascript" language="javascript">
document.getElementById("<%=i%>_img").src = "/Drm/Content/jqGrid/steel/images/sort_asc.gif";
document.getElementById("<%=i%>_img").style.visibility = "visible";
</script>
<%}
else
if (ViewData["8"].Equals("" + i + "") && ViewData["SortOrder"].Equals("0"))
{
%>
<script type="text/javascript" language="javascript">
document.getElementById("<%=i%>_img").src = "/Drm/Content/jqGrid/steel/images/sort_desc.gif";
document.getElementById("<%=i%>_img").style.visibility = "visible";
</script>
<%} %>
<tbody>
<% if (Model.RecordCount == 0)
{ %>
<tr>
<td></td>
<td></td>
<td colspan="2" valign="top"><a href="Search/0"> No Match Found</a></td>
</tr>
<%
}
else
{ %>
<% string stripeClass = "odd"; %>
<% foreach (var pc in Model.SearchResultItems)
{ %>
<% stripeClass = stripeClass.CompareTo("odd") == 0 ? "even" : "odd"; %>
<tr class="<%= stripeClass %> <%= pc.PcId %>" style="height: 16.3px;">
<td class="searchResultsCenterAlign">
<% if (ViewData["CheckboxAll"] != null ||
(ViewData["RecordIds"] != null &&
((string[])ViewData["RecordIds"]).Contains(Convert.ToString(pc.PcId))))
{ %>
<input type="checkbox" name="RecordId" value="<%= pc.PcId %>" checked="checked" />
<% } %>
<% else
{ %>
<input type="checkbox" name="RecordId" value="<%= pc.PcId %>" />
<% } %>
</td>
<td class="searchResultsLeftAlign">
<a href="ViewDetail/<%= pc.PcId %>">
<%= pc.PartNumber %></a>
<td class="searchResultsLeftAlign">
<%= pc.Description.Substring(0, pc.Description.Length > 30 ? 30 : pc.Description.Length) %>
</td>
<td class="searchResultsCenterAlign">
<%= pc.HtsCountry.Code %>
</td>
<td class="searchResultsCenterAlign">
<%= pc.Status %>
</td>
<td class="searchResultsCenterAlign">
<%= pc.PrimaryHts %>
</td>
<td class="searchResultsCenterAlign">
<%= pc.PreferentialTradeCode %>
</td>
<td class="searchResultsCenterAlign">
<%= pc.CustomsCountryOfOrigin.Code %>
</td>
<td class="searchResultsCenterAlign">
<%= pc.GtcSite.Name %>
</td>
</tr>
<tr class="<%= stripeClass %> <%= pc.PcId %>" style="height: 16.3px;">
<td class="searchResultsDetailTitle" colspan="2">
Supplier Name:
</td>
<td class="searchResultsDetailDetail" colspan="2">
<%= pc.Supplier.Name %>
</td>
<td class="searchResultsDetailTitle">
Manufacturer:
</td>
<td class="searchResultsDetailDetail" colspan="2">
<%= pc.Manufacturer.Name %>
</td>
<td class="searchResultsDetailTitle">
Classified By:
</td>
<td class="searchResultsDetailDetail">
<% if (pc.ClassifiedBy.LastName.Length > 0)
{ %>
<%= pc.ClassifiedBy.LastName%>, <%= pc.ClassifiedBy.FirstName%>
<% } %>
</td>
</tr>
<tr class="<%= stripeClass %> <%= pc.PcId %>" style="height: 16.3px;">
<td class="searchResultsDetailTitle" colspan="2">
MID:
</td>
<td class="searchResultsDetailDetail">
<%= pc.Mid %>
</td>
<td colspan="4">
<table border="0" width="100%" style="height: 95%;">
<tr>
<%--<td >Declared Add:</td>--%>
<td class="searchResultsDetailDetail" style="width: 25%; white-space: nowrap;">
Declared Add:
<% if (pc.DeclaredAdditions > 0)
{ %>
<img src="/Drm/Content/Icons/check.gif" />
<% }
else
{ %>
<% } %>
</td>
<%--<td >Undeclared Add:</td>--%>
<td class="searchResultsDetailDetail" style="width: 25%; white-space: nowrap;">
Undeclared Add:
<% if (pc.UndeclaredAdditions > 0)
{ %>
<img src="/Drm/Content/Icons/check.gif" />
<% }
else
{ %>
<% } %>
</td>
<td class="searchResultsDetailDetail" style="width: 25%; white-space: nowrap;">
Undefinit. Pricing:
<% if (pc.UndefinitizedPricing > 0)
{ %>
<img src="/Drm/Content/Icons/check.gif" />
<% }
else
{ %>
<% } %>
</td>
<td class="searchResultsDetailDetail" style="width: 25%; white-space: nowrap;">
Prop/Export Info:
<% if (pc.PropExportProductInfo.Length > 0)
{ %>
<img src="/Drm/Content/Icons/check.gif" />
<% }
else
{ %>
<% } %>
</td>
</tr>
</table>
</td>
<td class="searchResultsDetailTitle">
Classified Date:
</td>
<td class="searchResultsDetailDetail">
<%= PcFormHelpers.PrintDate(pc.ClassifiedDate) %>
</td>
</tr>
<tr>
<td colspan="9" class="recordBreak">
</td>
</tr>
<% } %>
<!-- determine the display spacing when less than 5 records -->
<%
var recordCnt = Model.PageSize; // default setting is 5
// if recordCnt is not set in the logic below or records per page is set to less than 5
// display spacing will not be impacted or set accordingly)
// determine if records count is less than 5 or records per page is less than 5
// and it is not the last page
if ((Model.RecordCount < 5 || Model.PageSize < 5) && (Model.PageNumber != Model.PageCount))
{
if (Model.RecordCount < Model.PageSize) // less than 5 records
{
recordCnt = Model.RecordCount; // set recordCnt to record count
}
}
else if (Model.PageNumber == Model.PageCount) // determine if user is on the last display page
{
var recordCalc = 0; // initialize calculation variable
var recordRemd = 0; // initialize record remainder variable
recordCalc = (int)Math.DivRem(Model.RecordCount, Model.PageSize, out recordRemd); // calculate
if (recordRemd < 5 && recordRemd != 0) // less than 5 records to display an not 0
{
recordCnt = recordRemd; // set record count to record remainder
}
}
%>
<!-- set spacing for display when record display is less than 5 -->
<% switch (recordCnt)
{ %>
<% case 0: %>
<tr class="blankline-search-results0">
<td>
</td>
</tr>
<% break; %>
<% case 1: %>
<tr class="blankline-search-results1">
<td>
</td>
</tr>
<% break; %>
<% case 2: %>
<tr class="blankline-search-results2">
<td>
</td>
</tr>
<% break; %>
<% case 3: %>
<tr class="blankline-search-results3">
<td>
</td>
</tr>
<% break; %>
<% case 4: %>
<tr class="blankline-search-results4">
<td>
</td>
</tr>
<% break; %>
<% } %>
<% } %>
</tbody>
<tfoot>
<tr>
<td colspan="2">
Total Records Found:
<%= Model.RecordCount %>
</td>
<td colspan="5">
</td>
<td colspan="2">
</td>
</tr>
</tfoot>
</table>
因为我知道有人可能会问，这是select all函数：
$("#checkBoxAll").click(function() {
var checked_status = this.checked;
$("input[name=RecordId]").each(function() {
this.checked = checked_status;
});
});
该表是通过MVC样式的页内代码动态构建的。
令我惊讶的是，它在所有浏览器中都能很快加载。但是，该表的左列是一系列复选框，在尝试单击它们时，它需要整整两秒钟才能处理。单击顶部的“全选”复选框时，处理时间会更长。以下是我注意到的关于性能的一些事情
所以，我的问题是：可能导致这种情况的原因是什么？在IE8中处理大量高度复杂的表时，这只是一个不幸的事实吗？如果是这样，是什么导致它，以便我可以详细说明为什么它无法修复。如果没有，我该如何加快这个过程？
答案 0 :(得分：0)
如果没有看到更多代码，对你帮助不大，但是从你发布的jquery片段中，我猜你会大量使用each。考虑更多地使用属性/类。例如，您的代码段可以重写为：
$("#checkBoxAll").click(function() {
var checked_status = this.checked;
$("input[name=RecordId]").attr("checked", checked_status);
});
不再召唤关闭500亿次！
答案 1 :(得分：0)
自我调查后，这似乎是IE8的问题，而不是我的代码。我注意到这一点，因为我遇到了很多其他地方的人抱怨这个问题，看不到任何解决方案。
因此，我会向遇到此问题的任何人建议您对数据进行分页以保持这些表的大小。这就是我所做的，似乎已经解决了这个问题
答案 2 :(得分：0)
IE8在表格渲染方面效果不佳。为了解决这个问题，我在apache httpd.conf文件中添加了Header add X-UA-Compatible IE=EmulateIE7行。此设置将强制IE8使用IE7渲染引擎，该引擎不会为较大的表提供性能。但是如果你想继续使用IE8一段时间，那么建议分页是一个更好的主意
另请参阅this stackoverflow question