Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.07.2016, 10:01
Интересующийся
Отправить личное сообщение для winston3d Посмотреть профиль Найти все сообщения от winston3d
 
Регистрация: 08.02.2013
Сообщений: 17

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

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

P.S: писал на чистом JS, без JQuery и прочего...
Ответить с цитированием
  #2 (permalink)  
Старый 05.07.2016, 10:32
Профессор
Отправить личное сообщение для Яростный Меч Посмотреть профиль Найти все сообщения от Яростный Меч
 
Регистрация: 12.04.2010
Сообщений: 557

Если я правильно понял, во втором случае вставка некой конструкции в документ случалась однократно, а в первом была серия изменений в документе.
При манипуляции с элементами, которые уже есть на странице, браузер должен сделать кучу действий - пересчитать стили по таблицам, перерисовать где надо... А пока элемент на страницу не добавлен, то это просто замена полей в объекте.
Ответить с цитированием
  #3 (permalink)  
Старый 05.07.2016, 11:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,359

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получить список ВСЕХ элементов DOM Почемучкин Events/DOM/Window 7 16.04.2012 10:33