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

Ответ 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, но пользователь сможет продолжить работу с вашим сайтом, не заметив задержки.

Ответ 2

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

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

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

Ответ 3

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

Ответ 4

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

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

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

Ответ 5

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

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

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

Ответ 6

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

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

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

Ответ 7

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