Хромы "appendChild" действительно такие медленные?

Question

У меня есть платформа, которая полностью генерирует DOM приложения, используя document.createElement и document.appendChild.Теперь, когда приложение становится все больше и больше, я заметил, что Chrome требуется значительно больше времени для сборки DOM, чем для других браузеров.

Итак, я создал следующий тест производительности:

window.onload = function(){
    var now = new Date().getTime();
    for(var i = 0; i < 10000; i++){
        document.body.appendChild(document.createElement("div"));
    }
    setTimeout(function(){
        console.log(new Date().getTime() - now);
    },0);

}

Результатыэтого теста очень интересны:

• Chrome 16: 700 +
• Firefox 9: 560
• IE 9: 210
• Opera 11.60:51

Chrome занял в 14 раз больше времени, чем Opera.И это не просто бессмысленный ориентир!Я действительно чувствую эту разницу в своем приложении.

Это нормально, что Chrome так медлит при DOM-операциях?Есть ли способ ускорить его?

Спасибо!

Answer 1

Обновление 2

Вот хакерское решение, которое может стоить небольшого обнаружения в браузере.Это снижает производительность в моем тестировании до менее чем ¹ / ₁₀ того, что было.

Вы можете display='none' контейнер до добавления, затем показатьэто снова после.Вы можете получить небольшую вспышку, но это, вероятно, лучше, чем длительная задержка.

window.onload = function(){

    var content = String.fromCharCode(Math.floor(Math.random() * 1000));

       // cache it in case it is already set
    var disp = document.body.style.display;

    document.body.style.display = 'none';

    var now = new Date().getTime();

    for(var i = 0; i < 10000; i++){
        document.body.appendChild(document.createElement("div"))
          .appendChild(document.createTextNode( content ));
    }

    setTimeout(function(){
        console.log(new Date().getTime() - now);
        document.body.style.display = disp || ''; // restore it
    },0);
};

Такого увеличения производительности я бы ожидал от documentFragment.

---

Обновление

После запуска модифицированной версии из @ Esailija jsFiddle для включения documentFragment , в Chrome (или Opera в этом отношении) нет никакой разницы, поэтому кажется, что Chrome просто медленнее.

---

«Есть ли способ ускорить его?»

Я предполагаю, что вы получите более высокую производительность, если вы используете documentFragment, а затем добавляете в DOM содин .appendChild.

window.onload = function(){
    var now = new Date().getTime();

      // create a documentFragment
    var frag = document.createDocumentFragment();

    for(var i = 0; i < 10000; i++){
        frag.appendChild(Div());  // append to the documentFragment
    }

      // append the documentFragment (which is emptied)
    document.body.appendChild(frag);

    setTimeout(function(){
        console.log(new Date().getTime() - now);
    },0);

    function Div(){
        var This = document.createElement("div");
        return This;
    }
}

Answer 2

Ваш тест кажется ошибочным. Если вы выполните чистый appendChild тест, Chrome выйдет далеко вперед:

http://jsperf.com/appendchild-from-so

Answer 3

Я думаю, это нормально ....

То же самое относится к манипулированию объектами HTML (ширина, высота и непрозрачность), особенно если вы используете CSS3.

Я запрограммировал слайд-шоу (не используя jQuery, я его ненавижу), которое работает гладко ... в FF, IE, Opera, Safari, ... но не в Chomre. В Chrome это невероятно медленно (только в более новых версиях Chrome, в старых, как v12, это было быстрее).