Способы увеличить производительность, когда установлено большое значение к innerHTML
Пройдитесь по списку, создавая все большее и большее окно от x до y позиций. Когда вы найдете место, где следующее число не является восходящим или достигнет конца, откройте только что закрытое окно и добавьте его в конец списка вывода:
data = [5, 7, 10, 2, 7, 8, 1, 3]
output = []
x = None
for y in range(len(data)):
if y == len(data) - 1 or data[y] >= data[y+1]:
output.extend(data[y:x:-1])
x = y
print(output)
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 , но пользователь сможет продолжать использовать ваш сайт без замечая задержку.
Прежде всего, я бы позаботился о том, чтобы ваш HTML был максимально простым. Минимальная разметка структуры, насколько это возможно. Повсеместно используйте CSS, включая его каскадную функцию, чтобы не устанавливать атрибут класса везде и т. Д.
Затем попробуйте провести дальнейшее исследование лучших методов для каждого браузера. Например, некоторые добиваются большего успеха, создавая объекты DOM, другие устанавливают все это для innerHTML одного узла DOM, не являющегося деревом, затем добавляют его в дерево и т. Д. Я предлагаю вам прочитать тест Quirksmode.org - W3C DOM vs. innerHTML .
Возможно, вы также захотите использовать скрипт, который JimmyP предложил добавить в чанки, поэтому интерфейс браузера не Кажется, чтобы повесить. Несмотря на то, что вы не хотите разбивать его слишком сильно, или вы будете без необходимости запускать слишком много обновлений страниц, когда они вам не нужны.
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?
Сделайте HTML как можно более простым или используйте XML с максимально короткими именами элементов / атрибутов.
Стиль с помощью CSS (Не используйте XML с XSLT, который может оказаться еще медленнее разбирать / строить).
К сожалению, обработка XML в разных браузерах несовместима.
почему бы не перевести ответ в формате json и не обработать его на стороне клиента, например здесь при каждом изменении какой-либо опции навигации выдается большой объем данных, и все строки отображаются клиентом.
Убедитесь, что ваш JSON / HTML / Plain Text максимально прост. Самым простым решением было бы сделать меньше работы, но если вам действительно нужна потоковая передача 200 КБ, убедитесь, что транспорт к браузеру сжат, что должно быть настраиваемым в вашем приложении и / или веб-сервере. Gzip-контент (при условии, что вы используете AJAX-дружественный сервис) действительно помогает, особенно с простым текстом.
Посмотрите на другие вещи, такие как любые циклы, которые можно упростить и т. Д., Но это звучит как уверенность данные готовы, и наиболее эффективная помощь будет состоять в том, чтобы обеспечить эффективную отправку данных по сети.
Если IE больше, и все остальные браузеры работают хорошо, возможно, вам придется двигаться дальше. Вы можете сделать так много, но я подозреваю, что это не главная проблема.
Я слышал, что 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; .