Перемещение строк в таблице в Internet Explorer выполняется медленно с любым типом документа - PullRequest
10 голосов
/ 21 октября 2010

Хорошо, этот сводит меня с ума.

У меня есть HTML-таблица с около 100 строк. Я хочу, чтобы строки меняли цвет при наведении мыши над ним.

Я пытался:

  • : указатель мыши в CSS,

  • события onmouseover / onmouseout в javascript

  • jquery. Hover

  • jquery .mouseover / .mouseout

  • наведение мыши на стол с помощью e.target и т. Д.

Все работают отлично в Firefox и ужасно медленно в IE7 / IE8. Неважно, какой тип документа я пробовал. Но если я полностью удаляю доктайп страницы (причуды), то в IE это тоже очень быстро!

К сожалению, отсутствие doctype для меня неприемлемо, так как я использую другие (jquery ui) компоненты, которые, похоже, похожи на doctype (в противном случае в IE они замедляются!)

Есть предложения?

для проверки:

режим причуд (быстрое зависание в IE): http://www.watikwil.nl/test_quirks.html

строгий режим (медленное зависание в IE): http://www.watikwil.nl/test_strict.html

UPDATE: Я обнаружил, что использование фонового изображения для строки зависания на самом деле быстрее в IE, чем использование background-color !! Но это работает быстро только при использовании: hover. Методы jquery или javascript не работают быстро. Это все еще не так быстро, как Firefox, но приемлемо для меня.

* ОБНОВЛЕНИЕ 2: Все еще возникают проблемы. В IE8 он все еще слишком медленный, особенно когда в строках несколько классов (как в JqGrid) *

ОБНОВЛЕНИЕ 3: Как-то у меня сейчас работает с IE8. Diabled некоторые классы, которые использует JqGrid, больше не знаю, если это имеет значение. Я использую: наведите курсор на фоновое изображение. Дело в том, что когда я заставляю страницу использовать режим стандартов IE7, это заметно быстрее. Но когда я пробую ту же страницу в IE7, она снова ОЧЕНЬ медленно работает ... действительно сводит меня с ума ...

Ответы [ 2 ]

3 голосов
/ 04 ноября 2010

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

Однако вы можете использовать text-decor: underline в CSS: hover, не вызывая пересчет этой таблицы.Эффект.

Я понимаю комментарий Роба о том, что тип учения не связан (и свят), но это желаемое за действительное.Проблема легко воспроизводится с очень спартанской таблицей, без каких-либо атрибутов ячеек или отдельных атрибутов строк, кроме: наведите курсор мыши на CSS.Конечно, измерить влияние DOCTYPE на это сложно, так как при отключении STRICT вы отключаете возможность IE применять: hover к элементам, не связанным с ссылками.Рисование подчеркивания на тексте с простой границей CSS и отсутствием JavaScript, CSS-выражений и т. Д. На странице также вызывает проблему, однако оформление текста - нет.Очевидно, IE подавляет пересчет таблиц специально для этого правила CSS, если в вашей таблице есть ссылки.(Другими словами, разработчики MS знали об этой проблеме еще до того, как выпустили дефект в первый раз, и она все еще присутствует в двух основных версиях позже. Как здорово :). Итак, вот более крутой тест:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>IE TD performance</title><style type="text/css">
    a:hover { text-decoration: line-through; }
    a:hover { line-height: 1.1em; }
</style></head><body><table><tbody>
    <tr>
        <td><a href='#'>Test</a></td>
etc.

Обратите внимание, что выше вы не увидите проблемы, если удалите правило CSS 'line-height' или переключитесь на DOCTYPE TRANSITIONAL.Также обратите внимание, это зависит от вашего процессора, сколько ячеек вам нужно.Также обратите внимание, что это общее количество ячеек в строках или столбцах (ИЛИ в нескольких таблицах!), Которые вызывают низкую производительность рендеринга таблиц IE при изменении стилей CSS.

У меня есть догадка (я не пробовал, но вам понравится ваш код, если вы сделаете:>) что если вместо вместо изменения цвета в самой строке таблицы перед вами будет прозрачный png , который неесли IE пересчитает размеры таблицы, вы получите требуемую производительность.Он даже может быть помещен в div, который вы, вероятно, уже используете для прокрутки таблицы, не благодаря другим проблемам IE с таблицами.Я предполагаю, что вы можете получить подходящий эффект при наведении (не совсем то, что вы имели в виду графически, но работоспособно визуально) с помощью этого метода.

Я преобразовал свою таблицу в деления с фиксированными размерами, вычеркнув MS за один разснова заставляя меня выбирать между тем, чтобы бросить свой дизайн или тратить время на проект.

0 голосов
/ 23 октября 2010

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

...