Intereting Posts
Ошибка JpGraph: HTTP-заголовки уже отправлены Как применить дополнение к каждой строке в многострочном тексте? Переменная Javascript для css Создание пользовательских HTML-шаблонов предотвратить отправку формы из перенаправления / обновления с помощью javascript Заставить Firefox обновлять изображение после изменения img.src Экспресс – отправить страницу и пользовательские данные в браузер по одному запросу? Как вы можете работать со встроенными тегами XML в XSLT? Можно ли предотвратить сохранение изображений с моего сайта? Правый выровненный список CSS Форматировать HTML-документ как получить ImageUrl элемента управления asp изображения, чей образ установлен jquery на стороне клиента? Как компоненты HTML для Java ссылаются на ресурсы? Как получить доступ к методу родительского windows iframe Как обновить раскрывающееся меню, когда выбрано другое меню выпадающего меню?

Способы повышения производительности при установке большого значения на innerHTML

Я пытаюсь установить огромный (200K) ответ на innerhtml узла. objective состоит в том, чтобы получить лучшее время, чем 2,7 с в Internet Explorer 6. Любые идеи ?,

благодаря

Это не будет происходить быстрее, но это остановит браузер от блокировки пользователя; они могут продолжать использовать страницу, когда это происходит в фоновом режиме:

function asyncInnerHTML(HTML, callback) { var temp = document.createElement('div'), frag = document.createDocumentFragment(); temp.innerHTML = HTML; (function(){ if(temp.firstChild){ frag.appendChild(temp.firstChild); setTimeout(arguments.callee, 0); } else { callback(frag); } })(); } 

Используй это:

 var allTheHTML = ''; asyncInnerHTML(allTheHTML, function(fragment){ myTarget.appendChild(fragment); // myTarget should be an element node. }); 

Этот метод займет больше времени, чем простой innerHTML но пользователь сможет продолжать использовать ваш сайт, не заметив задержки.

Во-первых, я бы хотел, чтобы ваш HTML был как можно более простым. Как минимальная структурная разметка, насколько это возможно. Используйте CSS везде, включая его каскадную функцию, поэтому вы не устанавливаете атрибут classа везде и т. Д.

Затем попробуйте провести дополнительные исследования в лучших методах для каждого браузера. Например, некоторые делают лучше, создавая объекты DOM, некоторые устанавливают все это на innerHTML одного недревесного узла DOM, а затем добавляют его к дереву и т. Д. Я предлагаю вам прочитать Benchmark Quirksmode.org – W3C DOM vs. innerHTML ,

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

почему бы не довести ответ в json-формате и обработать его на стороне клиента, например, здесь большой объем данных управляется каждый раз при изменении любой опции навигации, а все строки визуализируются клиентом.

Сделайте HTML максимально простым или используйте XML с наименьшими возможными именами элементов / атрибутов.

Стиль с CSS (не используйте XML с XSLT, который может оказаться еще медленнее для синтаксического анализа / сборки).

К сожалению, обработка XML в разных браузерах несовместима.

С большой полезной нагрузкой HTML вы рискуете ошибкой «Operation Aborted» в IE 6. Потратьте некоторое время и просмотрите следующие вопросы StackOverflow, так как ошибка возникает из-за обновления DOM с использованием innerHTML, и на сегодняшний день MS не имеет полного исправления на месте:

Почему Asp.net вызывает операцию с прерывистой ошибкой в ​​ie7?

Как преодолеть ошибку IE при динамическом подключении DIV к телу из сценария?

Убедитесь, что ваш JSON / HTML / обычный текст максимально прост. Самое простое решение – сделать меньше работы, но если вам действительно нужно streamовое 200k, убедитесь, что транспорт в браузер сжат, что должно быть настроено в вашем приложении и / или веб-сервере. Содержимое Gzip’ping (при условии, что вы используете услугу AJAX) действительно помогает, особенно с простым текстом.

Посмотрите на другие вещи, такие как любые циклы, которые могут быть упрощены и т. Д., Но похоже, что убедитесь, что данные готовы и убедитесь, что данные могут быть отправлены по сети эффективно.

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

Я слышал, что innerText примерно в два раза быстрее, чем innerHTML в IE. Не уверен, правда ли это, но, возможно, стоит попробовать.

 if (window.ActiveXObject) { // we're using IE document.getElementById('myElement').innerText = 'Bla bla bla bla'; // or create a textnode: var txt = document.createTextNode('Lorem ipsum'); document.getElementById('myElement').appendChild(txt); } else { // other code here } 

Обновление : обратите внимание, что если вы хотите изменить HTML- myElement , не используйте innerText – HTML будет отображаться в виде обычного текста, например, если вы используете < и > ,