Ограничение размера innerHTML
Я хочу использовать AJAX для загрузки html-файла в <div> Затем мне нужно будет запустить jsMath для этого. Все, что я до сих пор делал с innerHTML, было параграфом или двумя, может быть, таблицей и / или изображением. Ничего особенного.
Какие потенциальные проблемы могут возникнуть, когда я устанавливаю innerHTML для внешнего 25k-файла со всеми видами сложного форматирования CSS? (спасибо jsMath) Я не могу придумать какой-либо другой способ сделать это, но мне нужно знать, есть ли какие-то ограничения.
Заранее спасибо.
--Dave
6 ответов
Я не знаю ни о каких ограничениях размера браузера, но если вы назначите строку длиннее 65536, Chrome разделит ее на множество elem.childNodesпоэтому вам, возможно, придется перебрать эти узлы и объединить их.
Запустите приведенный ниже в Chrome Dev Tools. Он строит строку длиной 160 тыс., Но theDivElement.childNodes[0] обрезается до 65536 символов.
var longString = '1234567890';
for (var i = 0; i < 14; ++i) {
longString = longString + longString;
}
console.log('The length of our long string: ' + longString.length);
var elem = document.createElement('div');
elem.innerHTML = longString;
var innerHtmlValue = elem.childNodes[0].nodeValue;
console.log('The length as innerHTML-childNodes[0]: ' + innerHtmlValue.length);
console.log('Num child nodes: ' + elem.childNodes.length);
Результат: (версия Chrome 39.0.2171.95 (64-разрядная версия), Linux Mint 17)
The length of our long string: 163840
The length as innerHTML-childNodes[0]: 65536
Num child nodes: 3
Но в Firefox innerHTML не разбивает содержимое на множество узлов: (FF версия 34.0, Linux Mint 17)
"The length of our long string: 163840"
"The length as innerHTML-childNodes[0]: 163840"
"Num child nodes: 1"
Таким образом, вы должны принять во внимание, что разные браузеры обрабатывают childNodes по-разному, и, возможно, перебрать все дочерние узлы и объединить. (Я заметил это, потому что я пытался использовать innerHTML чтобы удалить> 100k HTML-кодированную строку.)
На самом деле, в Firefox я могу создать innerHTML-childNodes[0] длиной 167 772 160, зацикливаясь на i < 24 выше. Но где-то выше этой длины, есть InternalError: allocation size overflow ошибка.
Ничто не мешает вам делать это технически. Самой большой проблемой будет время загрузки страницы. Обязательно укажите какой-либо признак того, что данные загружаются, иначе будет выглядеть, как будто ничего не происходит.
В приложении, над которым я сейчас работаю, у меня не было проблем с браузером, который устанавливал бы innerHTML в строку 30 КБ или более. (Не знаю, каков предел)
Единственные ограничения на этот тип вещей связаны исключительно с пропускной способностью и процессором. Вы должны убедиться, что в вашем запросе на ajax не установлено малое время ожидания. Вы также должны проверить на некоторых компьютерах с более низкой скоростью, чтобы увидеть, есть ли проблема с памятью. Некоторые старые браузеры могут быть довольно простыми для больших объектов в памяти.
Ваш лимит будет, скорее всего, лимит загрузки, установленный с вашего веб-сервера. обычно пару МБ. Несколько веб-фреймворков позволяют увеличить этот размер, но вы не можете просто сделать это, потому что это будет означать увеличение размера буфера, что не очень хорошо.
Вы, вероятно, захотите профилировать это с помощью такого инструмента, как dynatrace ajax или speed tracer, чтобы понять, как установка на innerHTML действительно огромного значения влияет на производительность. Возможно, вы захотите сравнить его с другим подходом, например, поместить новый контент в iframe или разбить его на страницы.