javascript / dom - насколько дорого стоит создание и перестановка dom-узлов?

Question

Я пытаюсь оптимизировать сортируемую таблицу, которую я написал. Узкое место в манипуляциях с домом. В настоящее время я создаю новые строки таблицы и вставляю их каждый раз, когда сортирую таблицу. Мне интересно, смогу ли я ускорить процесс, просто переставив ряды, не воссоздавая узлы. Чтобы это имело существенное значение, реорганизация dom-узлов должна быть намного более быстрой, чем создание нод. Это тот случай? Спасибо, -Morgan

Answer 1

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

На этой странице предполагается, что быстрее всего будет клонировать текущую таблицу, манипулировать ею по своему усмотрению, а затем заменить таблицу в DOM.

Answer 2

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

Answer 3

Я искал ответ на этот вопрос и решил установить быстрый тест http://jsfiddle.net/wheresrhys/2g6Dn/6/

Он использует jQuery, поэтому не является эталонным тестом и, вероятно, искажен и другими способами. Но в результате получается, что перемещение DOM-узлов происходит в два раза быстрее, чем создание и удаление DOM-узлов каждый раз

Answer 4

если вы можете, лучше делать манипуляцию с dom не как фактическую манипуляцию с dom, а как какой-то метод в вашем скрипте, а затем манипулировать с dom. Таким образом, вместо того, чтобы делать то, что называется перерисовкой на каждом узле, вы объединяете то, что было бы перекрашиванием на каждом узле, в свой собственный метод, а затем присоединяете эти узлы к родительскому элементу, который затем присоединяется к фактическому dom, в результате всего за две перекраски вместо сотен. Я говорю два б / к, вам нужно очистить то, что находится в домике, прежде чем обновлять ваши новые данные.

Answer 5

Эта страница может оказаться полезной для некоторых тестов:

http://www.quirksmode.org/dom/innerhtml.html