При использовании таблицы с разумным объемом данных - 100 строк на 50 столбцов - я замечаю, что производительность IE8 неприемлемо снижается (только в режиме рендеринга стандартов IE8). Использование ЦП достигает 100%, и браузер становится очень вялым. Увеличение количества данных в таблице усиливает медлительность.
Это стало очевидным при применении цвета фона при наведении на строку, но ухудшение производительности, похоже, происходит при любом изменении стиля и не связано с обработкой события наведения.
Прикрепленный пример - это очень простой тестовый сценарий, с помощью которого я могу последовательно воспроизводить проблему.
Несколько примечаний по этой проблеме:
- Отчеты Dynatrace показывают, что почти 100% времени процессора расходуется на "Расчет общей компоновки". Этого не происходит, если вместо таблиц используются
<div>(см. Ниже). - Переключение режима документа на стандарты IE7 или режим Quirks через панель инструментов Dev устраняет проблему.
- Из-за ограничений, налагаемых на среду, в которой я работаю, IE8 работает в режиме браузера режима совместимости IE8 с режимом документа стандарта IE8. Изменение этого параметра с помощью панели инструментов Dev не влияет на производительность.
- Замена решения
<table>с помощью подхода<div>/<span>повышает производительность, исключая количество узлов DOM в себе как виновника. - Пример добавляет события mouseover к каждому
<tr>, но использование делегирования событий не уменьшает проблему. Фактически, если я заменю решение мыши с помощьюsetInterval, где каждые 50 мс выделяется случайная строка, происходит такое же ухудшение производительности. - Я тестировал и подтвердил это поведение на нескольких разных машинах (все Windows XP, Intel Core Duo @2.33 Ghz, с 3.5 ГБ оперативной памяти) в моей рабочей среде. Все проявляют одинаковое поведение.
- Я протестировал HTML 4 Strict, XHTML 1.0 строгие и доктрины HTML5. Все проявляют одинаковое поведение.
- Предварительная рендеринг серверной части таблицы не влияет на производительность во время выполнения.
- Использование табличного макета: фиксированная и/или настройка ширины на
<td>не имеет эффекта. - Использование стилей CSS через классы вместо управления стилями через JavaScript не имеет эффекта.
- Применение цвета фона к
<td>вместо<tr>не имеет эффекта.
Я полагаю, что исчерпал свои возможности для улучшения производительности эффекта мыши, с точки зрения кодирования, и должен сделать вывод, что обработка IE8 <table> крайне бедна, хотя, если это всегда так плохо, я удивлен, что не нашел более подробная информация по этому вопросу.
Я надеюсь, что кто-то еще сможет подтвердить это поведение в отдельной среде IE8 или указать на ошибку с моей стороны. Мне любопытно узнать, почему IE8 в стандартах работает намного хуже, чем IE6, или IE8 работает в режиме IE7/Quirks.
<!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>
