Home/ Questions/Q 3678914
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T03:23:52+00:00

When using a table with a reasonable amount of data – 100 rows by

  • 0

When using a table with a reasonable amount of data – 100 rows by 50 columns – I notice that IE8 performance degrades unacceptably (only in IE8 standards rendering mode). The CPU usage spikes to 100% and the browser becomes very sluggish. Increasing the amount of data in the table amplifies the sluggishness.

This became apparent when applying a background color on hover on a row, but the performance degradation seems to occur with any style change, and unrelated to the hover event handling.

Attached is a very simple test-case with which I can consistently reproduce the problem.

A couple of notes concerning the issue:

  • Dynatrace reports show that nearly 100% of the CPU time is spent on “Calculating Generic Layout”. This does not occur if <div>s are used instead of tables (see below).
  • Switching the Document Mode to IE7 Standards or Quirks Mode via the Dev Toolbar fixes the problem.
  • Due to constraints imposed on the environment I work in, IE8 runs in IE8 Compat Mode Browser Mode, with IE8 Standards Document Mode. Changing this setting through the Dev Toolbar doesn’t have any effect on performance.
  • Replacing the <table> solution with <div>/<span> approach improves performance, ruling out the amount of DOM nodes in itself as the culprit.
  • The example adds mouseover events to each <tr>, but using event delegation doesn’t mitigate the problem. In fact, if I replace the mouseover solution with a setInterval where every 50ms a random row is highlighted, the same performance degradation occurs.
  • I have tested and confirmed this behavior on several different machines (all Windows XP, Intel Core Duo @ 2.33 Ghz, with 3.5 GB RAM) in my work environment. All exhibit the same behavior.
  • I have tested HTML 4 Strict, XHTML 1.0 strict and HTML5 doctypes. All exhibit the same behavior.
  • Pre-rendering the table server-side has no effect on run-time performance.
  • Using table-layout: fixed and/or setting widths on the <td>‘s has no effect.
  • Using CSS styles via classes instead of manipulating the styles via JavaScript has no effect.
  • Applying a background color to the <td>‘s instead of <tr>‘s has no effect.

I believe I have exhausted my options for improving the mouseover effect performance from a coding perspective, and have to conclude that IE8 <table> handling is extremely poor – although if it is always this bad I am surprised I haven’t found more information regarding this subject.

I hope someone else can confirm this behavior in a separate IE8 environment, or point out a mistake on my part. I am curious to find out why IE8 in standards performs so much worse than IE6, or IE8 running in IE7 / Quirks mode.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
     <meta http-equiv="X-UA-Compatible" content="IE=8">
        <title>IE8 Table Hover</title>
    </head>
    <body>
        <script type="text/javascript">
   var numRows = 100;
   var numCols = 50;

   function renderTable () {
    var a = [];

    a.push('<table id="table"><tbody>');

    for (var i=0; i < numRows; i++) {
     a.push('<tr>');

     for (var j=0; j < numCols; j++) {
      a.push('<td>');
      a.push(i + ':' + j);
      a.push('</td>');  
     }

     a.push('</tr>');
    }

    a.push('</tbody></table>');

    var div = document.createElement('div');
    div.innerHTML = a.join('');
    div = document.body.appendChild(div);

    var rows = div.getElementsByTagName('tr');

    for (var i=0; i < rows.length; i++) {
     rows[i].onmouseover = function (event) {
      this.style.backgroundColor = '#cc0000';
     }

     rows[i].onmouseout = function (event) {
      this.style.backgroundColor = '';
     }
    }
   }

   renderTable();
  </script>
 </body>
</html>

Test Case @ jsfiddle

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    While no explanation for the poor performance has been found, the behavior has been confirmed by other users (reducing the likelihood of an environmental issue).

    It seems it is a core issue in the way IE8 deals with <table> style manipulation, and I will file a bug with the IE team. I already created a forum post on the Internet Explorer Development Forum which didn’t yield any results thus far: http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/2afa46aa-16bb-4e65-be38-a6de19b2b2e9

    There are however workarounds available for achieving a usable hover effect in IE8, the two most worth considering are:

    • Replace the <table> solution with <div> and <span> elements
    • Fake the hover effect by positioning a <div> element behind the transparent <table> as suggested by David Murdoch. A rudimentary proof of concept can be found at http://jsfiddle.net/YarnT/1/

    I will post any updates here in case I learn anything new, or get a response from the IE team.

    • 0