Alex Rivera | Logout

Poor Performance with tables in Internet Explorer 8 Standards Mode

Asked 2011-01-05T10:23:19.473
17

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.
javascript performance html-table internet-explorer-8
Edit
Report

1 Answer

6

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.

answered 2011-01-07T14:49:38.470

Your Answer