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

Question

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

Спасибо

Answer 1

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

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 = '<div><a href="#">.............</div>';
asyncInnerHTML(allTheHTML, function(fragment){
    myTarget.appendChild(fragment); // myTarget should be an element node.
});

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

Answer 2

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

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

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

Answer 3

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

Answer 4

Убедитесь, что ваш JSON / HTML / Plain Text максимально прост. Самым простым решением было бы сделать меньше работы, но если вам действительно нужна потоковая передача 200 КБ, убедитесь, что транспорт к браузеру сжат, что должно быть настраиваемым в вашем приложении и / или веб-сервере. Gzip-контент (при условии, что вы используете AJAX-дружественный сервис) действительно помогает, особенно с простым текстом.

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

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

Answer 5

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

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

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

Answer 6

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

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

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

Answer 7

Я слышал, что 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 будет отображаться в виде обычного текста, как если бы вы использовали < и >.