Very slow reaction time in large table, only happens in IE8
I have a decently large, dynamically generated table with the following top-end. I'll spare you the agony of posting the entire table as it is very complex and contains tables within tables within tables:
<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>
and because I know someone with likely ask, here is the select all function:
$("#checkBoxAll").click(function() {
var checked_status = this.checked;
$("input[name=RecordId]").each(function() {
this.checked = checked_status;
});
});
The table is constructed dynamically through MVC-style in-page-code.
Surprisingly to me, it loads quite quickly in all browsers. However, the left column of the table is a series of check-boxes, and on attempting to click them it takes a full second to two seconds for it to process. It takes even longer for it to process when clicking the 'select all' check box at the top. Here are a few things I noticed about the performance
- It seems to actually take a long time between mousing over the check box until it highlights, indicating that it recognizes the 'hover'. (It does the same thing with hyperlinks within the table and the mouse turning into a pointer.)
- The larger my results set, the longer the delay. If I filter the table down to under 30-40 rows, it performs normally. (Yes, I considered pagination, but was told not to do so)
- The lag only occurs within the actual table, I experimented with dropping a checkbox into the page in locations progressively closer to the table, and until it was contained within a table row, it functioned normally.
- This lag does not exist in Chrome, Firefox, or even IE6
So, my question is this: what could be causing this? Is this just an unfortunate fact in dealing with massive, highly complex tables in IE8? If so, what causes it so that I can give a detailed reason as to why it can't be fixed. If not, how can I speed up this process?
Can't help you much without seeing more code, but from the jquery snippet you posted, I'll guess that you use each heavily. Consider using attributes/classes more. For example, your snippet can be rewritten as:
$("#checkBoxAll").click(function() {
var checked_status = this.checked;
$("input[name=RecordId]").attr("checked", checked_status);
});
No more calling closures 50 billion times!
After self-investigation, this seems to be a problem with IE8, not my code. I note this as I have encountered many other places of people complaining of this problem with no solutions in sight.
As a result, I would suggest to anyone who is encountering this problem that you take up paginating your data to keep the size of those tables down. That's what I did, and it seems to have resolved the issue
IE8 doesn't work well with table rendering. To solve this I have added Header add X-UA-Compatible IE=EmulateIE7 line in apache httpd.conf file. This setting will force IE8 to use IE7 rendering engine which doesn't take performance for bigger tables. But if you want to remain on IE8 for some more time then as suggested pagination is a better idea.
Also see this stackoverflow question
加载中,请稍侯......
精彩评论