Скорость / эффективность нескольких DOM appendChild - PullRequest
Новая
       7

Скорость / эффективность нескольких DOM appendChild

5 голосов
/ 07 марта 2012

Мне нужно создать семь элементов div в одном попадании - контейнере A, который содержит A1, A2, A3 и A4, а затем A2a и A2b в A2.Я использую несколько вызовов для этой маленькой функции: 

function u1(t,i,c,p){ // type,id,class_name,parent_id
    var tag=document.createElement(t); // Create node to be appended
    tag.id=i;
    tag.className=c;
    document.getElementById(p).appendChild(tag);
}

Мой вопрос: есть ли более эффективный по времени способ объединить семерку, а затем просто добавить один DOM?Или innerHTML хороший вариант?

Спасибо :))

1 Ответ

10 голосов
/ 07 марта 2012

Вы можете просто использовать .innerHTML.Альтернативой может быть использование фрагмента документа: 

var fragment = document.createDocumentFragment();

function u1(t, i, c){ // type,id,class_name
    var tag = document.createElement(t); // Create node to be appended
    tag.id = i;
    tag.className = c;
    fragment.appendChild(tag); // will use `fragment` from the outer scope
}

// call u1() seven times

// then insert all the elements into the DOM all at once
document.getElementById('foo').appendChild(fragment);

Фрагменты документа создаются немного медленно, но могут в долгосрочной перспективе сохранить производительность.В этом случае, например, вы переходите от 7 вставок DOM к одной.(Все, что связано с DOM - это медленно в JavaScript.)

Если вы хотите сравнить свой конкретный вариант использования, используя оба подхода, создайте тестовый пример jsPerf .

...