эффективность манипуляции jQuery DOM-построение всей страницы с помощью JavaScript


Я начну с совершенно пустой страницы (никаких элементов, кроме html, head и body), а затем построю страницу с помощью jQuery. Содержимое страницы будет представлено в виде JSON из запроса AJAX. Содержимое из JSON не будет иметь никакого HTML. HTML с содержимым будет построен для различных разделов страницы в зависимости от структуры объекта JSON.

Эта страница будет иметь различные слайдеры, модалы и другой "динамический" контент.

Мой вопрос будет ли быстрее (возьмем IE7 в качестве наименьшего общего знаменателя) построить HTML как одну большую строку (используя строковый конструктор, который намного быстрее, чем стандартная конкатенация) и ввести это в тело в массовом порядке, т. е.

var html = "<div id='content'><p>All markup required for the page, built from the contents of the JSON object</p></div><div id='slider'>...</div>...etc."
$("body").html(html)

А затем, когда это будет в DOM, используйте jQuery для поиска и применения плагинов к различным динамическим частям, т. е.

$("#slider").sliderPlugin(options);

Или

Может быть, лучше создать каждый элемент (или несколько) как переменную, а затем добавить к телу? то есть

var content = $('<div/>', {id: "content"})
var slider =  $('<div/>', {id: "slider", html="<ul><li>...</li></ul>"}).appendTo(content);
$('body').append(content)

Тогда при таком подходе мне не нужно запрашивать DOM, мне нужно только сделать это:

slider.sliderPlugin(options);
3   5   2011-11-24 19:07:47

3 ответа:

Я думаю, что один раз построить HTML-это лучший способ, я смутно помню, что читал это где-то

Edit: я прочитал его здесь со многими другими оптимизациями jQuery. хорошее и рекомендуемое чтение

Совет, который я видел, заключается в том, что обычно быстрее предоставить один большой кусок HTML в .html(), а затем полагаться на встроенный парсер Вашего браузера, чтобы просто сделать свое дело.

Однако если вы собираетесь впоследствии манипулировать отдельными элементами (например, добавлять обработчики событий и т. д.), То есть что-то нужно сказать для создания этих элементов с помощью метода jQuery $('<element>').

Также, учитывая значение атрибута, такое как xx"xx (nb: встроенные кавычки), это намного надежнее и безопасно делать:

$('<div>', { attr: foo })

Чем это сделать:

html += '<div attr="' + foo + '"/>';

Так как если foo содержит специальные HTML-символы, вам придется их экранировать самостоятельно.

Следовательно, если ваш контент не является действительно большим, я бы забыл о проблемах производительности и пошел на большие куски HTML, когда есть статический HTML, но используйте методы создания тегов, если вы вставляете переменные строки.

Шаблонные функции KnockoutJS, похоже, действительно хорошо подходят для вашего приложения.