Internet Explorer 8标准模式中的表性能不佳 [英] Poor Performance with tables in Internet Explorer 8 Standards Mode
问题描述
当使用具有合理数据量的表--100行乘50列时 - 我注意到IE8性能降低得无法接受（仅在IE8标准渲染模式下）。 CPU使用率达到100％，浏览器变得非常缓慢。增加表中的数据量会增加缓慢。
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报告显示，近100％的CPU时间是花在计算通用布局上。如果使用
< div>而不是表格（见下文），则不会发生这种情况。 - 将文档模式切换为IE7通过开发工具栏的标准或怪异模式解决了这个问题。
- 由于我所使用的环境受到限制，IE8在IE8 Compat模式浏览器模式下运行，具有IE8标准文档模式。通过开发工具栏更改此设置对性能没有任何影响。
- 用<$替换
< table>解决方案c $ c>< div> /< span>方法提高了性能，排除了DOM节点本身的数量作为罪魁祸首。 - 该示例将鼠标悬停事件添加到每个
< tr>，但使用事件委派不能解决问题。事实上，如果我用setInterval替换鼠标悬停解决方案，其中每50ms随机行突出显示，则会出现相同的性能下降。 - 我已经在我的工作环境中在几台不同的机器（所有Windows XP，Intel Core Duo @ 2.33 Ghz，3.5 GB RAM）上测试并确认了这种行为。所有都表现出相同的行为。
- 我测试了HTML 4严格，XHTML 1.0严格和HTML5文档类型。所有都表现出相同的行为。
- 预表示服务器端对运行时性能没有影响。
- 使用表格布局：固定和/或设置
< td>的宽度无效。 - 通过类而不是操作使用CSS样式通过JavaScript的样式无效。
- 将背景颜色应用于
< td>而不是< tr>没有效果。
- 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 asetIntervalwhere 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.
我相信我已经用尽了从编码角度提高鼠标悬停效果，并得出结论IE8 < table> 处理极差 - 尽管如果总是这么糟糕我很惊讶我没有找不到有关此主题的更多信息。
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.
我希望其他人可以在单独的IE8环境中确认此行为，或指出我的错误。我很想知道为什么标准中的IE8比IE6或IE7 / Quirks模式下运行的IE8差得多。
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>
推荐答案
虽然没有找到性能不佳的解释，但行为一直是其他用户确认（减少环境问题的可能性）。
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).
这似乎是IE8处理<的方式的核心问题。 table> 样式操作，我将向IE团队提交一个错误。我已经在Internet Explorer开发论坛上创建了一个论坛帖子，到目前为止没有产生任何结果： http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/2afa46aa-16bb-4e65-be38-a6de19b2b2e9
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
但是有一些解决方法可以在IE8中实现可用的悬停效果，最值得考虑的两个是：
There are however workarounds available for achieving a usable hover effect in IE8, the two most worth considering are:
- 用
< div>和<$ c替换< table>解决方案$ c>< span> 元素 - 通过定位
< div>假冒悬停效果David Murdoch建议的透明< table>背后的元素。可以在 http://jsfiddle.net/YarnT/1/ 找到基本的概念证明
- 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/
我将在此发布任何更新，以防我了解任何新内容，或从IE团队获得回复。
I will post any updates here in case I learn anything new, or get a response from the IE team.
这篇关于Internet Explorer 8标准模式中的表性能不佳的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
