Poor Performance with tables in Internet Explorer 8 Standards Mode

问题

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

回答1:

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.

回答2:

The issue isn't confined to tables. I've seen similar issues with other elements on the page. Check out this example with buttons: Poor Performance with IE8 Standards

Sure 500 buttons is excessive, but the same page renders perfectly using IE7 standards and in other browsers. I want to know what is causing this and how it can be fixed.

回答3:

Tables are really expensive with rendering, hence why people say you should never use them unless they are meant for tabular data. If you give the table widths, normally it speeds up the rendering time.

In your case I see one improvement that can be made. Instead of adding event handlers to every row, use event bubbling and catch the mouse movements on the table level. This means instead of 50 event handlers being adding for mouseover, you add one.

One way of doing it:

<!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>
   <style type="text/css">
      table, tr, td{ border-collapse: collapse; border: 1px solid black; }        
      tr.high td{ background-color: #FF0; }
    </style>
  </head>
  <body>
    <div id="out">~</div>
    <script type="text/javascript">

var numRows = 100;
var numCols = 50;
function renderTable() {
    var a = [];
    a.push('<table id="myTable"><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 lastHiglight = null;
    var bigTable = document.getElementById("myTable");
    bigTable.onmouseover = function (e) {
        e = e || window.event;
        var elm = e.target || e.srcElement;
        var tag = elm.nodeName.toLowerCase();
        if (tag == "td") {
            if (lastHiglight) {
                lastHiglight.className = "";
            }
            lastHiglight = elm.parentNode;
            lastHiglight.className = "high";
        }
    }
    var reTags = /(td|tr|tbody)/i;
    document.body.onmouseout = bigTable.onmouseout = function (e) {
        e = e || window.event;
        var elm = e.target || e.srcElement;
        var tag = elm.nodeName.toLowerCase();
        if (!reTags.test(tag)) {
            if (lastHiglight) {
                lastHiglight.className = "";
            }
        }
    }
}

renderTable();
    </script>
    <p>Awesome Table</p>
 </body>
</html>

Running Example

回答4:

Stick with event-delegation and "table-layout:fixed;" and then try setting visibility:hidden on the rows that are not being displayed on the screen. When they are scrolled into view visibility:auto; them.

Or better yet: detach the rows from the DOM when not in view and use a "buffer" row to maintain the scroll bar's height and scroll position (I recommend using jQuery's detach() method).

回答5:

I know this might be a long stretch, but you might want to use firebug profiling on firefox and where the performance loss is.

By "long stretch" I mean that the same issue might not be relevant to both browsers. I suggested a different browser because I know that firebug profiling isn't available on MSIE afaik, not because of any personal browser preferences.

回答6:

Realistically, with IE, you are better off constructing the entire HTML and plopping it in at once with style="" or the classes you are looking for. If you can handle the regressions, render X rows per table and multiple tables to 'stream' in changes.

来源：https://stackoverflow.com/questions/4602986/poor-performance-with-tables-in-internet-explorer-8-standards-mode

标签

javascript

performance

html-table

internet-explorer-8