Замедление IE при использовании таблицы с 500+ строками

Question

У вас есть какие-нибудь советы, как сделать так, чтобы любая большая таблица с 500+ строками быстрее отображалась в Internet Explorer?

Вот как я сейчас это делаю:

Результат запроса MySQL возвращает 500+ строк, поэтому я использую цикл while со следующим для отображения всех строк:

echo "<tr class='someMainClass' bgcolor='".$someBgColor."'>";
echo    "<td width='10px' style='display: none;' class='someClass'>String</td>";
echo    "<td class='someClassAgain andOtherClass' title='someTitle' >String again</td>";
echo    "<td width='100px' class='ClassAgain' id='>another string</td>";
echo    "<td width='100px' class='ClassAgain' title='title'><input type='text' value='and i input'/></td>";
echo "</tr>";

Когда список готов, IE просто останавливается на пару секунд, а затем появляется список. В дополнение к этому любой эффект наведения на <tr> работает очень медленно.

Я не уверен, почему это медленное движение вызывается в IE, так как все другие браузеры работают правильно.

Любая помощь будет принята с благодарностью.

Answer 1

Помните, что большинство пользователей IE не знают, что их опыт не на должном уровне, они к этому привыкли.

Наилучшим способом может быть реализация нумерации страниц на стороне сервера или с помощью JavaScript.

Answer 2

К сожалению, это будет проблемой с IE ... Вам лучше как-то изящно унизить IE.Может быть, просто показать первые 50 строк и реализовать нумерацию страниц.

Answer 3

Рендеринг 500 строк на одной странице - плохая идея, независимо от того, какой браузер вы используете, хотя он может работать лучше в Safari, Firefox и Chrome по сравнению с IE. С точки зрения удобства использования это тоже ужасно.

Таким образом, лучшим подходом, вероятно, было бы переосмыслить решение и вместо этого ввести нумерацию страниц. Может быть, 50 строк на странице? или что-то.

Answer 4

Сохраните данные в объекте javascript, загрузите первые 20 (или сколько угодно занимают страницу), дождитесь document.ready и затем начните подключать остальные строки с помощью javascript.Вы даже можете подключить строки при прокрутке страницы.

Много работы, чтобы он выглядел хорошо в таком браузере.

Answer 5

Попробуйте ограничить разметку. Удалите все атрибуты width, style, id и т. Д., А затем создайте сценарий для их заполнения после загрузки HTML-кода. Соскрести стиль и ширину, идти с классами. Убрать лишние пробелы.

Answer 6

Попробуйте использовать table-layout: fixed в вашем CSS:

При таком (быстром) алгоритме горизонтальное расположение таблицы не зависит от содержимого ячеек; это зависит только от ширины таблицы, ширины столбцов, а также границ или расстояния между ячейками.

Это должно ускорить начальный рендеринг, но вам придется управлять размерами столбцов вручную. Для определения размера столбцов таблицы обычно требуется полное сканирование таблицы, а затем согласование, если недостаточно места для размещения естественной ширины всех столбцов; использование фиксированного макета позволяет избежать сканирования и согласования, статически устанавливая ширину сразу, а затем заставляя все ячейки соответствовать, нравится им это или нет.

Answer 7

Известно, что псевдо-селектор: hover для неякорных элементов в некоторых случаях замедляет работу IE7 и IE8 *. Когда строгий тип документа не используется, IE7 и IE8 будут игнорировать: hover для любого элемента, кроме якорей. Когда используется строгий тип документа,: зависание на элементах без привязки может привести к снижению производительности.

Источник

Answer 8

Вы можете использовать его, показывая только то, что вам нужно, когда вы просматриваете ajax, что-то вроде , этот или даже , этот .

Но на самом деле IE просто ужасен. Наличие такого большого количества HTML просто для маленького браузера, с которым нужно справиться ... если, конечно, это не мусор.