тест производительности операций DOM через innerHTML - PullRequest
Новая
       1

тест производительности операций DOM через innerHTML

2 голосов
/ 25 июня 2010

В соответствии с духом stackoverflow (благодаря @Bill the Lizard, разъясняющему это), я хотел бы представить небольшое собственное исследование хорошо известного всем разработчикам интерфейсных веб-приложений вопроса.

Как повысить производительность jscript при программировании DHTML, используя операции innerHTML или DOM?

Для тестирования я создал одну HTML-страницу с кнопкой «start test», которая выполняет 5000-кратную пару функций, написанную либо на идеологии innerHTML, либо DOM. (Может быть принято: http://codepad.org/HyiKRsNk)

  • Чтобы не сравнивать результаты процессора, отображаются в процентах, насколько одна функция быстрее другой. Таким образом, если вы видите (17%), это означает, что DOM быстрее innerHTML, если (может быть последним) вы видите (-5%), это означает, что innerHTML быстрее, чем DOM.
  • Чтобы избежать эффекта разрыва памяти, для каждого вызова новая «область тестирования» создается и удаляется сразу после теста (время создания / удаления не встречается).
  • Тесты выполняются под дисплеем: нет деления, чтобы избежать переворачивания и снижения производительности при прокрутке

Я подготовил 3 теста (последний предложен @tomdemuyt)

  1. создать новый DIV и дочерний текст для него

  2. удалить некоторые DIV (чтобы избежать влияния различий в создании, оба теста используют один и тот же способ создания тестового div, но разные для удаления)

  3. добавление обработчика события onclick

  4. Тестирование создания дерева в глубину, тест создания <table><tbody><tr><td><span>text конструкция. Тест DOM использует последовательные вызовы пары createElement / appendChild

  5. Аналогично (4), но созданы 2 строки <tr>. DOM использует специальную вспомогательную функцию для упрощения: 

    treeHelper("table", 
    treeHelper("tbody", 
        treeHelper("tr",

Результаты тестов отслеживаются для разных браузеров.

Итак, дорогие коллеги, пожалуйста, предоставьте: покажите какой-нибудь тест, когда innerHTML быстрее, запустите мой тест в браузерах, не перечисленных в списке.

Ответы [ 2 ]

1 голос
/ 25 июня 2010

Основываясь на комментариях к исходному вопросу, я добавляю здесь ответ, который объясняет, почему прямое сравнение .innerHTML до DOM manipulation очень трудно кратко оценить.

По существу, естьнесколько серьезных проблем:

  1. Ошибки браузера и отсутствующие реализации
  2. Различия в содержимом (что работает лучше в случае A, может не быть лучше в случае B)
  3. Проблемы синхронизации(JavaScript не контролирует и не понимает, когда браузер решает выполнить GC (сборку мусора) или запускать другие потоки / действия

1.) В частности IE (6,7 и в меньшей степени8) имеет множество ошибок браузера, которые вызывают полное тестирование всех сценариев кода.(IE имеет ошибки и не может установить .innerHTML на select, table, thead, tbody, tfoot, tr, пустым элементам с переполнением, установленным на auto, где содержимоеболее 1 "строки" по высоте, pre элементов, в которых содержимое содержит важные пробелы и т. д.)

2.) Количество, тип (порядок) и глубина добавленных дочерних узлов будут влиять на производительностьоперация.Например, добавление таблицы путем добавления тега таблицы, затем tbody, затем tr, затем td, затем содержимого по сравнению с созданием этого по отдельности и выгрузкой на страницу, изменит производительность.

3.)Браузер контролирует, когда он выполняет GC (который на мгновение замедляет работу браузера, пока он выполняет очистку).Аналогично расширению браузера или вызову AJAX на другой вкладке, веб-фрагмент в IE8 опрашивает сервер на наличие обновлений, это повлияет на работу вашей текущей страницы.

Таким образом, если вы хотите полностью протестировать это, вам необходимопротестировать несколько различных комбинаций подструктуры HTML, и я очень надеюсь, что результаты будут разными.

У меня дома есть несколько старых тестов для такого рода вещей, которые я выкопаю и добавлю к этому ответу дляболее сложное тестирование.

1 голос
/ 25 июня 2010

Опера (10,54): 

Test                                Result 
1.insert new element and text         30.00%
2.removeChild vs innerHTML=''         66.67%
3.set event handler                   245.45%
4.test in depth of tree linear        -62.16%
5.test in depth of tree (using helpr) -67.10%

Chrome (5.0.375.70): 

Test                                 Result
1.insert new element and text          318.18%
2.removeChild vs innerHTML=''          53.85%
3.set event handler                    150.00%
4.test in depth of tree linear         41.67%
5.test in depth of tree (using helpr) -33.03%

FireFox (3.6.4): 

Test                                  Result
1.insert new element and text           76.17%
2.removeChild vs innerHTML=''           50.56%
3.set event handler                     1097.44%
4.test in depth of tree linear          32.94%
5.test in depth of tree (using helpr)   9.66%

IE (8): 

Test                                  Result 
1.insert new element and text           46.92%
2.removeChild vs innerHTML=''           26.34%
3.set event handler                     936.17%
4.test in depth of tree linear          -35.42%
5.test in depth of tree (using helpr)   -67.26%

редактируется (1) : Добавлены для каждого браузера 2 строки с тестом построения дерева по глубине (тест по глубине дерева линейный, тест по глубине дерева (с помощью helpr)). Было обнаружено, что большинству браузеров не нравятся значения выделения стека, поскольку линейные appendChild, appendChild ... намного быстрее, чем делают то же самое с treeHelper ('table', treeHelper ('tbody', ....

...