Рендеринг IE8 при каждом нажатии клавиши в текстовой области замедляется по мере увеличения размера страницы

Question

У меня есть страница, использующая JQuery, и я реализовал бесконечную прокрутку в div. На странице есть текстовая область. Я заметил, что чем больше строк добавляется в таблицу, тем быстрее производительность страницы с прокруткой. Вы действительно можете сказать, когда размер страницы большой, и вы пытаетесь ввести что-либо в текстовую область, потому что существует большая задержка между временем ввода текста в текстовую область и временем, когда вы действительно видите текст. Это происходит только в IE8. Я не пробовал другие версии IE. Это не происходит в Firefox. Это действительно быстро в Firefox.

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

Почему рендеринг страниц происходит так часто и медленно в IE8, и есть ли способ улучшить это?

Answer 1

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

Одним из решений является использование iframe с contentEditable, установленным в true вместо textarea. Это работает без каких-либо заметных задержек на той же странице. Я подозреваю, что это потому, что IE8 отображает только содержимое iframe при каждом нажатии клавиши, а не родительский документ. Он также может работать с текстовой областью внутри iframe, но я не пробовал этого.

Answer 2

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

См. статью Microsoft , в которой приведены советы по повышению производительности, особенно при использовании таблиц.

• Установить фиксированный CSS-атрибут макета таблицы.
• Явно определите объекты col для каждого столбца.
• Установить атрибут WIDTH для каждого столбца.

например:.

table
 {
 table-layout:fixed;
 } 

Избегайте вложения таблиц в таблицы и т. Д.

W3Schools подчеркивает преимущества и недостатки использования различных алгоритмов раскладки таблиц.

FireFox, по-видимому, обрабатывает рендеринг таблиц более эффективно, чем IE, но использование этих методов помогает большинству браузеров.

Надеюсь, это поможет!