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

Question

Я начну с полностью пустой страницы (без элементов, кроме 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);

OR

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

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

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

slider.sliderPlugin(options);

Answer 1

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

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

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

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

, чем сделать это:

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

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

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

Answer 2

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

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

Answer 3

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