Poor Performance With Tables In Internet Explorer 8 Standards Mode

April 21, 2024 Post a Comment

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 u

Solution 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.

Solution 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.

Solution 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 HTMLPUBLIC"-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><metahttp-equiv="X-UA-Compatible"content="IE=8"><title>IE8 Table Hover</title><styletype="text/css">table, tr, td{ border-collapse: collapse; border: 1px solid black; }        
      tr.hightd{ background-color: #FF0; }
    </style></head><body><divid="out">~</div><scripttype="text/javascript">var numRows = 100;
var numCols = 50;
functionrenderTable() {
    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

Solution 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).

Solution 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.

Html5 Log