В этот раз оптимизация касается «любимого» всеми браузера IE. По какой-то причине конкатенация строк в ослике тотально медленная, поэтому приходится мудрить.
Кто сталкивался с динамическим обновлением контента (ajax), эта функция в той или иной конфигурации очень знакома.
Итак посмотрим на время выполнения скрипта.
Mozilla: 31ms;
Opera: 16ms (как всегда радует);
IE6: 230ms (никуда не годится…);
IE7: 67ms (немного лучше);
Выход из этой ситуации есть, он довольно прост и неожидан.
Mozilla: 47ms (тут пришлось немного пожертвовать скоростью);
Opera: 16ms ;
IE6: 31ms (другое дело);
IE7: 32ms (и тут получше);
Как, я уже писал никогда не пишите … el.innerHTML += '<li>' … даже если операций совсем немного, присваивайте к innerHTML уже готовый результат.
Кто сталкивался с динамическим обновлением контента (ajax), эта функция в той или иной конфигурации очень знакома.
function createList(){
var el = document.getElementById('list');
var html = '<ul>';
for (var i = 1; i <= 1000; i++) {
html += '<li>Element';
html += i;
html += '</li>';
}
html += '</ul>';
el.innerHTML = html;
}
Итак посмотрим на время выполнения скрипта.
Mozilla: 31ms;
Opera: 16ms (как всегда радует);
IE6: 230ms (никуда не годится…);
IE7: 67ms (немного лучше);
Выход из этой ситуации есть, он довольно прост и неожидан.
function createList(){
var html = [];
html.push('<ul>');
for (var i = 1; i <= 1000; i++) {
html.push('<li>Element');
html.push(i);
html.push('</li>');
}
html.push('<ul>');
var el = document.getElementById('list');
el.innerHTML = html.join('');
}
Mozilla: 47ms (тут пришлось немного пожертвовать скоростью);
Opera: 16ms ;
IE6: 31ms (другое дело);
IE7: 32ms (и тут получше);
Как, я уже писал никогда не пишите … el.innerHTML += '<li>' … даже если операций совсем немного, присваивайте к innerHTML уже готовый результат.
3 комментария:
Так будет чуть быстрей:
function createList(){
var html = [];
html[html.length] = '<ul>';
for (var i = 1; i <= 1000; i++) {
html[html.length] = '<li>Element';
html[html.length] = i;
html[html.length] = '</li>';
}
html[html.length] = '<ul>';
var el = document.getElementById('list');
el.innerHTML = html.join('');
}
Да точно, спасибо темболее сам об этом писал
Вот, что значит знать как правильно делать и при этом делать по привычке.
Плохая черта во всех отношениях :).
Отправить комментарий