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

StackOverflow https://stackoverflow.com/questions/554128

  •  23-08-2019
  •  | 
  •  

Вопрос

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

Нет правильного решения

Другие советы

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

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

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

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top