Улучшение эффективности JavaScript на методе appendChild - PullRequest
Новая
       22

Улучшение эффективности JavaScript на методе appendChild

3 голосов
/ 16 августа 2011

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

for(var i = 0; i < 1000; i += 1){
                var el = document.createElement('div');
                el.appendChild(document.createTextNode('Node ' + (i + 1)));
                document.getElementById('nodeHolder').appendChild(el);
}

В идеале было бы признательно, если бы была указана причина этого.

Любая идея будет очень признательна.

Ответы [ 3 ]

7 голосов
/ 16 августа 2011

Создайте фрагмент документа и добавьте к нему, затем выполните одно добавление для всего набора. 

var frag = document.createDocumentFragment();

for(var i = 0; i < 1000; i += 1){
    var el = document.createElement('div');
    el.appendChild(document.createTextNode('Node ' + (i + 1)));
    frag.appendChild(el);
}

document.getElementById('nodeHolder').appendChild( frag );

Теперь ваш getElementById должен быть запущен только один раз, иОбновление DOM необходимо выполнить только один раз.

Фрагмент документа является универсальным контейнером.При добавлении его в DOM контейнер просто исчезает, и к нему добавляется только его содержимое.

Вы можете немного сжать код, если хотите:

Пример: http://jsfiddle.net/7hagb/

var frag = document.createDocumentFragment();

for(var i = 0; i < 1000; i += 1){
    frag.appendChild(document.createElement('div'))
        .appendChild(document.createTextNode('Node ' + (i + 1)));
}

document.getElementById('nodeHolder').appendChild( frag );

Кроме того, очень незначительной оптимизацией будет избавление от i + 1 и изменение цикла for для получения нужных значений.

Пример: http://jsfiddle.net/7hagb/1/

var frag = document.createDocumentFragment();

for(var i = 1; i <= 1000; i += 1){
    frag.appendChild(document.createElement('div'))
        .appendChild(document.createTextNode('Node ' + i));
}

document.getElementById('nodeHolder').appendChild( frag );
1 голос
/ 16 августа 2011

Вы можете использовать DocumentFragment, облегченный контейнер узлов, который предотвращает обновление и перекомпоновку DOM при добавлении узлов в него. 

var nodeHolder = document.createElement('div'),
    fragment = document.createDocumentFragment();
for (var i = 0; i < 1000; i ++ ) {
    var el = document.createElement('div');
    el.innerHTML = 'Node ' + (i + 1);
    fragment.appendChild(el);
}
nodeHolder.appendChild(fragment);
0 голосов
/ 16 августа 2011

не используйте DOM, просто используйте html.например, вместо createElement используйте 

  abc = ""
  for(...){
  abc += "<div>Text " + i + "</div>";
  }

и затем добавьте к цели.Это некрасиво, я согласен, но должно работать намного быстрее

...