Самый легкий объект DOM

Question

Хотел узнать, какой самый легкий элемент HTML. У меня есть огромный набор данных JSON, которые я должен отображать в правильном читаемом формате, следовательно, собираюсь перебирать данные и создавать динамические элементы. Это самый легкий элемент HTML, самый легкий из которых занимает меньше всего памяти и легко отображается браузером и т. Д.

РЕДАКТИРОВАТЬ : будет использовать Mootools, так что не беспокойтесь о части создания. Будем использовать обычные. Это то, что я собираюсь сделать

objJson.each(function(j, jCounter)
{
     var elm = new Element('', {'html' : j.value}).injectInside($(document.body));
});

Скажите, какой новый элемент лучше всего создать?

Answer 1

Как упомянул @Kobi, добавление элементов будет гораздо менее ресурсоемким, чем на самом деле анализ большой строки json и ее циклическое выполнение.

Если вы хотите написать эффективный код, не используйте .append () для каждого нового элемента, а скорее создайте строку, а затем добавьте ее. Что-то вроде:

var newElements;

for(i=0; i<objects.length; ++i) {
  newElements += "<div>" + objects[i].name + "</div>"
}

$("#container").append(newElements);

Я использовал div с одной текстовой записью в качестве образца. Это могут быть любые элементы с любым количеством значений. Если у вас есть несколько элементов в каждом объекте json, вы можете сделать приведенный выше код более эффективным, выполнив что-то вроде:

var object;
var newElements;
var objectCount = objects.length;

for(i=0; i<objectCount; ++i) {
  object = objects[i];
  newElements += "<div>" + object.name + ", " + object.size + ", " + object.color + "</div>"
}

$("#container").append(newElements);

Answer 2

Это то, о чем вам не следует беспокоиться. Вместо этого вам следует беспокоиться о том, как вы будете создавать эти динамические элементы.

Например, .innerHTML - самый быстрый способ, но есть некоторые глюки.

Если вы хотите использовать чистый document.createElement('span') способ, вы можете попробовать его, создав первый диапазон, а затем вы можете использовать .cloneNode(true), чтобы клонировать его вместо того, чтобы создавать его каждый раз (фреймворки делают это, и есть хороший количество скорости, которое вы могли бы заработать).

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

---

UPDATE

Я не думаю, что кто-нибудь знает, какой из них лучше всего использовать. Это зависит от браузера, и различия между использованием div или span настолько второстепенные , что вам не стоит об этом беспокоиться.

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

Answer 3

Я бы рассмотрел таблицу или divs. Однако, если у вас есть огромный объем данных для отображения, я полагаю, что вы, возможно, захотите изучить использование прокручиваемой сетки (или таблицы) наряду с подкачкой страниц. Вероятно, вашему пользователю не понравится вручную просматривать множество данных, отображаемых вертикально на странице.

Несколько библиотек JS предоставляют хорошие (прокручиваемые и страничные) решения.

Answer 4

Моя дикая догадка - span, если вы хотите иметь возможность использовать CSS любым удобным для вас способом.

Answer 5

Это очень зависит от браузера, и, вероятно, это неправильный вопрос.
Обычно загрузка данных и анализ JSON-объекта занимают намного больше времени, чем отображение HTML.