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

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

Какие-либо идеи?

11
задан Uwe Keim 12 July 2019 в 04:55
поделиться

7 ответов

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

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

18
ответ дан 3 December 2019 в 03:19
поделиться

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

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

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

5
ответ дан 3 December 2019 в 03:19
поделиться

With a large HTML payload you run the risk of the "Operation Aborted" error in IE 6. Take some time and review the following StackOverflow questions, as the error arises from updating the DOM using innerHTML and to date MS does not have a complete fix in place:

Why Does Asp.net cause the operation aborted error in ie7?

How To Overcome IE Bug When Dynamically Attaching DIV To Body From Script?

1
ответ дан 3 December 2019 в 03:19
поделиться

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

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

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

1
ответ дан 3 December 2019 в 03:19
поделиться

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

2
ответ дан 3 December 2019 в 03:19
поделиться

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

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

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

1
ответ дан 3 December 2019 в 03:19
поделиться

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

0
ответ дан 3 December 2019 в 03:19
поделиться
Другие вопросы по тегам:

Похожие вопросы: