Скорость создания DOM элементов выше, чем работа с ним?
Добрый день!
Проводил эксперимент: из HTML с другого сайта нужно получить несколько элементов с определённым классом, эти элементы содержат какие-либо атрибуты. Нужно выдернуть значения этих атрибутов и на моей странице создать некоторые элементы, тоже с вложенными в них другими элементами и присвоить им атрибуты, тоже уже другие, но с выдернутыми из чужого HTML значениями. И если я задавал атрибуты в уже существующие у меня на странице элементы, то скорость была ниже, чем если бы я создавал эти элементы с помощью JS, потом присваивал бы им классы, атрибуты и вкладывал бы их один в другой и в итоге нужный элемент вставлял бы на страницу. Результат меня немного удивил. Это правда так? Есть какие-то объяснения, почему создавать элементы и вкладывать один в другой и назначать им атрибуты, быстрее, чем работать с уже готовыми элементами DOM? P.S: писал на чистом JS, без JQuery и прочего... |
Если я правильно понял, во втором случае вставка некой конструкции в документ случалась однократно, а в первом была серия изменений в документе.
При манипуляции с элементами, которые уже есть на странице, браузер должен сделать кучу действий - пересчитать стили по таблицам, перерисовать где надо... А пока элемент на страницу не добавлен, то это просто замена полей в объекте. |
winston3d,
как вариант перенести элементы в document.createDocumentFragment() и произвести все манипуляции а потом вернуть на страницу DocumentFragment(быстро) или если если элементы в разных местах то то циклом по элементам. (медленнее но с готовыми атрибутами) |
Часовой пояс GMT +3, время: 19:26. |