Как делать нельзя. Работа с DOM

Обычно, работу JavaScript кода можно ускорить. Способов оптимизации много, но сегодня я скажу пару слов о вставке данных в объект DOM.

Во время работы с чужими скриптами часто приходится сталкиваться с кодом, в котором функции .append() .prepend() .after() и .wrap() данных выполняются в цикле. Это серьезно нагружает интерпретатор.

Рассмотрим это на простом примере. Вам нужно сделать какой-то список из 1000 элементов. Так делать нельзя:

1
2
3
4
5
var myList = $('#myList');

for (i=0; i<1000; i++){
myList.append('This is list item ' + i);
}

Это выполняется за 216 мили секунд. Кажется, всего лишь 5-я часть секунды, – пользователь не почувствует. Так и есть. Но если элементов больше, или таких операций на странице добрая сотня, спасибо вам никто не скажет.

Так делать надо:

1
2
3
4
5
6
7
8
9
10
var myList = $('.myList');
var myListItems = '';

for (i = 0; i < 1000; i++) {
myListItems += '
  <li>This is list item ' + i + '</li>
';
}

myList.html(myListItems);

Новый вариант работает на 31 мили секунду быстрее.

Спасибо.


Метки: , ,
Связанные записи:
Свои выделяемые шрифты
  • Опубликовано: Сентябрь 12th, 2009
  • Категория:/ JavaScript /
Rss Commenti

Нет ответов

Оставить комментарий





О проекте

Publications feed