Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Скорость создания DOM элементов выше, чем работа с ним? (https://javascript.ru/forum/events/63865-skorost-sozdaniya-dom-ehlementov-vyshe-chem-rabota-s-nim.html)

winston3d 05.07.2016 10:01

Скорость создания DOM элементов выше, чем работа с ним?
 
Добрый день!
Проводил эксперимент: из HTML с другого сайта нужно получить несколько элементов с определённым классом, эти элементы содержат какие-либо атрибуты. Нужно выдернуть значения этих атрибутов и на моей странице создать некоторые элементы, тоже с вложенными в них другими элементами и присвоить им атрибуты, тоже уже другие, но с выдернутыми из чужого HTML значениями.
И если я задавал атрибуты в уже существующие у меня на странице элементы, то скорость была ниже, чем если бы я создавал эти элементы с помощью JS, потом присваивал бы им классы, атрибуты и вкладывал бы их один в другой и в итоге нужный элемент вставлял бы на страницу.

Результат меня немного удивил. Это правда так? Есть какие-то объяснения, почему создавать элементы и вкладывать один в другой и назначать им атрибуты, быстрее, чем работать с уже готовыми элементами DOM?

P.S: писал на чистом JS, без JQuery и прочего...

Яростный Меч 05.07.2016 10:32

Если я правильно понял, во втором случае вставка некой конструкции в документ случалась однократно, а в первом была серия изменений в документе.
При манипуляции с элементами, которые уже есть на странице, браузер должен сделать кучу действий - пересчитать стили по таблицам, перерисовать где надо... А пока элемент на страницу не добавлен, то это просто замена полей в объекте.

рони 05.07.2016 11:03

winston3d,
как вариант перенести элементы в document.createDocumentFragment() и произвести все манипуляции а потом вернуть на страницу DocumentFragment(быстро) или если если элементы в разных местах то то циклом по элементам. (медленнее но с готовыми атрибутами)


Часовой пояс GMT +3, время: 19:26.