При использовании таблицы с разумным объемом данных - 100 строк на 50 столбцов - я замечаю, что производительность IE8 снижается недопустимо (только в режиме рендеринга стандартов IE8).Загрузка процессора увеличивается до 100%, и браузер становится очень вялым.Увеличение объема данных в таблице усиливает медлительность.
Это стало очевидным при применении цвета фона при наведении на строку, но снижение производительности, похоже, происходит при любом изменении стиля и не связано с событием наведения мышиобработка.
Прилагается очень простой тестовый пример, с помощью которого я могу последовательно воспроизвести проблему.
Несколько замечаний по проблеме:
- Отчеты Dynatraceпоказать, что почти 100% процессорного времени тратится на «Расчет общего макета».Этого не происходит, если вместо таблиц используются
<div> s (см. Ниже). - Переключение режима документа в стандарты IE7 или режим Quirks через панель инструментов Dev решает проблему.
- Из-заИз-за ограничений, накладываемых на среду, в которой я работаю, IE8 работает в браузерном режиме IE8 с режимом документа стандартов IE8.Изменение этого параметра с помощью панели инструментов Dev не влияет на производительность.
- Замена решения
<table> на подход <div> / <span> повышает производительность, исключая количество узлов DOM в себе каквиновник. - В этом примере события наведения мыши добавляются к каждому
<tr>, но использование делегирования событий не уменьшает проблему.Фактически, если я заменю решение для наведения мыши на setInterval, где каждые 50 мс выделяется случайная строка, происходит такое же снижение производительности. - Я протестировал и подтвердил это поведение на нескольких разных машинах (все Windows XP, Intel Core Duo @ 2,33 ГГц, с 3,5 ГБ ОЗУ) в моей рабочей среде.Все они демонстрируют одинаковое поведение.
- Я тестировал HTML 4 Strict, XHTML 1.0 строго и HTML5 doctypes.Все они демонстрируют одинаковое поведение.
- Предварительный рендеринг таблицы на стороне сервера не влияет на производительность во время выполнения.
- Использование макета таблицы: фиксированная и / или заданная ширина
<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>
Test Case @ jsfiddle