Menu
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:
<div>s are used instead of tables (see below).<table> solution with <div>/<span> approach improves performance, ruling out the amount of DOM nodes in itself as the culprit.<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.<td>'s has no effect.<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
698
Compatibility View is a feature of Windows Internet Explorer 8 that enables the browser to render a webpage nearly identically to the way that Windows Internet Explorer 7 would render it.
To open Internet Explorer, select the Start button, type Internet Explorer, and then select the top search result. To be sure you have the latest version of Internet Explorer 11, select the Start button, select Settings > Update & security > Windows Update, and then select Check for updates.
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:
<table> solution with <div> and <span> elements<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.
98
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.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
