IE слишком медленный при добавлении большого количества HTML в DOM через Javascript

Question

IE слишком медленный при добавлении большого количества HTML в DOM через Javascript

0

У меня есть страница, где мы используем шаблон пользовательского интерфейса Kendo для создания кучи HTML для вставки в DOM. Мы говорим 2+ миллионов байт. Все остальные браузеры покажут это примерно через 2 - 3 секунды или около того. Я уже избегаю jQuery и устанавливаю innerHTML через вызов document.getByElementId. Похоже, что самая медленная часть - это вызовы regexp.test, которые делает IE. Является ли IE доверенным, что все стартовые/конечные теги совпадают? Если да, есть ли способ сказать IE пропустить эту проверку, чтобы ускорить работу (т.е. "Доверять мне")? Я уже уменьшил HTML, который был как можно меньше, так что это уже не вариант. Кроме того, данные, которые я показываю, еще не являются крупнейшим набором данных, поэтому я знаю, что он будет намного больше. У кого-нибудь есть идеи?

Обновить:

Это текущий код, который я использую:

 var resultHtml = kendo.template(templateHtml, { useWithBlock: false })(currentPage.ViewModel);
 resultHtml = resultHtml.replace(new RegExp("\>[\n\t ]+\<", "g"), "><"); // Get rid of whitespace
 document.getElementById("tblData").innerHTML = resultHtml;

В IE это заканчивается тем, что занимает около 10 секунд, чтобы показать, когда генерируется 2,5 миллиона символов. В Chrome/FireFox/Opera это занимает от 2 до 3 секунд.

Daniel Lorenz 19 сен. 2013, в 18:05

Источник

Теги:

javascript

html

performance

internet-explorer

2 ответа

1

Реализуйте что-то вроде "двойной буферизации".

Создайте узел, который не является частью DOM.

var offlineNode = $('<div />');

Извлеките содержимое в автономный узел.

offline.html(kendoTemplate(billionData));

Закончив, переместите весь узел в DOM.

offlineNode.appendTo($('#a-place-in-dom'));

У IE есть проблемы с угадыванием, когда нужно повторно отобразить страницу, поэтому разумно манипулировать DOM. Каждый раз, когда вы делаете огромные изменения DOM, IE будет медленным.

Adrian Salazar 19 сен. 2013, в 13:29

0

На самом деле это заняло еще больше времени.
Daniel Lorenz 19 сен. 2013, в 15:34
0

Похоже, я ничего не могу для вас сделать ... Подумайте о включении нумерации страниц. Рендеринг данных это одно. Сохранение занимаемого объема памяти и отзывчивый интерфейс - это еще одна вещь. Вы никогда не найдете решение этих двух проблем, если не прекратите рендерить огромное количество HTML.
Adrian Salazar 19 сен. 2013, в 15:41
0

Да, на самом деле, я просто вставил несколько более точно настроенных оповещений, и это, кажется, не является добавлением к части DOM ... это связывание с Кендо вызывает проблемы ...
Daniel Lorenz 19 сен. 2013, в 15:44

Показать ещё 1 комментарий

Ещё вопросы

На самом деле это заняло еще больше времени.
Похоже, я ничего не могу для вас сделать ... Подумайте о включении нумерации страниц. Рендеринг данных это одно. Сохранение занимаемого объема памяти и отзывчивый интерфейс - это еще одна вещь. Вы никогда не найдете решение этих двух проблем, если не прекратите рендерить огромное количество HTML.
Да, на самом деле, я просто вставил несколько более точно настроенных оповещений, и это, кажется, не является добавлением к части DOM ... это связывание с Кендо вызывает проблемы ...

Daniel Lorenz · Accepted Answer · 2013-09-19T13-44-00.000Z

Проблема в том, что HTML не добавляется в DOM. Он имеет отношение ко всем объектам, которые у меня есть, к двухстороннему связыванию с Kendo MVVM. Извини за это!

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