Каков наиболее эффективный способ создания элементов HTML с использованием jQuery?

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

$("<div></div>");

Однако у меня возникает ощущение, что это не самый лучший или самый эффективный способ сделать это. Каков наилучший способ создания элементов в jQuery с точки зрения производительности?

Этот ответ имеет ориентиры для предложений ниже.

Я использую $(document.createElement('div')); Бенчмаркинг, показывает, что эта техника самая быстрая. Я предполагаю, что это потому, что jQuery не должен идентифицировать его как элемент и создать сам элемент.

Вы должны действительно запустить тесты с различными движками Javascript и взвесить аудиторию с результатами. Примите решение оттуда.

лично я бы предложил (для удобства чтения):

$('<div>');

некоторые цифры в предложениях (safari 3.2.1 / mac os x):

var it = 50000;

var start = new Date().getTime();
for (i = 0; i < it; ++i)  {
  // test creation of an element 
  // see below statements
}
var end = new Date().getTime();
alert( end - start );                

var e = $( document.createElement('div') );  // ~300ms
var e = $('<div>');                          // ~3100ms
var e = $('<div></div>');                    // ~3200ms
var e = $('<div/>');                         // ~3500ms              

Вопрос:

Каков наиболее эффективный способ создания элементов HTML с использованием jQuery?

Ответ:

Так как дело в том, jQueryя думаю, что лучше использовать этот (чистый) подход (вы используете)

$('<div/>', {
    'id':'myDiv',
    'class':'myClass',
    'text':'Text Only',
}).on('click', function(){
    alert(this.id); // myDiv
}).appendTo('body');

DEMO.

Таким образом, вы даже можете использовать обработчики событий для конкретного элемента, такого как

$('<div/>', {
    'id':'myDiv',
    'class':'myClass',
    'style':'cursor:pointer;font-weight:bold;',
    'html':'<span>For HTML</span>',
    'click':function(){ alert(this.id) },
    'mouseenter':function(){ $(this).css('color', 'red'); },
    'mouseleave':function(){ $(this).css('color', 'black'); }
}).appendTo('body');

DEMO.

Но когда вы имеете дело с большим количеством динамических элементов, вам следует избегать добавления события handlersв конкретный элемент, вместо этого вы должны использовать делегированный обработчик события, например

$(document).on('click', '.myClass', function(){
    alert(this.innerHTML);
});

var i=1;
for(;i<=200;i++){
    $('<div/>', {
        'class':'myClass',
        'html':'<span>Element'+i+'</span>'
    }).appendTo('body');
}

DEMO.

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

Обновление: так как мы можем использовать следующий подход для создания динамического элемента

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    'size': '30'
}).appendTo("body");

Но sizeатрибут не может быть установлен с использованием этого подхода, используя jQuery-1.8.0или позже, и вот старый отчет об ошибке , посмотрите на этот пример, использующий, jQuery-1.7.2который показывает, что sizeатрибут установлен на 30примере выше, но используя тот же подход, который мы не можем установить sizeс помощью атрибута jQuery-1.8.3, здесь является нерабочей скрипкой . Итак, чтобы установить sizeатрибут, мы можем использовать следующий подход

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    attr: { size: "30" }
}).appendTo("body");

Или этот

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    prop: { size: "30" }
}).appendTo("body");

Мы можем передать в attr/propкачестве дочернего объекта , но он работает в jQuery-1.8.0 and laterверсиях проверить этот пример , но он не будет работать в jQuery-1.7.2 or earlier(не тестируется во всех предыдущих версиях).

Кстати, взято из jQueryсообщения об ошибке

Есть несколько решений. Первый - вообще не использовать его, поскольку он не экономит место, а это улучшает ясность кода:

Они посоветовали использовать следующий подход ( работает и в более ранних , проверено в 1.6.4)

$('<input/>')
.attr( { type:'text', size:50, autofocus:1 } )
.val("Some text").appendTo("body");

Так что лучше использовать этот подход, ИМО. Это обновление сделано после того, как я прочитал / нашел этот ответ и в этом ответе показывает, что если вы используете 'Size'(capital S)вместо этого, 'size'то он будет работать нормально , даже вversion-2.0.2

$('<input>', {
    'type' : 'text',
    'Size' : '50', // size won't work
    'autofocus' : 'true'
}).appendTo('body');

Также читайте о проп , потому что есть разница Attributes vs. Properties, она варьируется в зависимости от версии.

На самом деле, если вы делаете $('<div>'), JQuery также будет использовать document.createElement().

(Просто посмотрите на строку 117 ).

Существуют некоторые накладные расходы при вызове функций, но если производительность не критична (вы создаете сотни [тысяч] элементов), нет особых причин возвращаться к простому DOM .

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

Если у вас много HTML-контента (больше, чем просто один div), вы можете подумать о встраивании HTML-кода в страницу в скрытом контейнере, а затем об обновлении и отображении его при необходимости. Таким образом, большая часть вашей разметки может быть предварительно проанализирована браузером и избежать срыва JavaScript при вызове. Надеюсь это поможет!

Это не правильный ответ на вопрос, но все же я хотел бы поделиться этим ...

Использование Just document.createElement('div')и пропуск JQuery значительно улучшит производительность, если вы хотите создавать множество элементов на лету и добавлять в DOM.

Я думаю, что вы используете лучший метод, хотя вы можете оптимизировать его для:

 $("<div/>");

Вам не нужна грубая производительность от операции, которую вы будете выполнять крайне редко с точки зрения процессора.

Вы должны понимать, что значение производительности создания элемента не имеет значения в контексте использования jQuery в первую очередь.

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

Вы можете захотеть тестирование производительности что - то вроде $(document.createElement('div'))против прогноза $('<div>')и получить большой прирост производительности от использования , $(document.createElement('div'))но это только элемент , который не в DOM еще.

Однако, в конце концов, вы все равно захотите использовать элемент, поэтому реальный тест должен включать f.ex. .добавить к();

Давайте посмотрим, если вы проверяете следующее друг против друга:

var e = $(document.createElement('div')).appendTo('#target');
var e = $('<div>').appendTo('#target');
var e = $('<div></div>').appendTo('#target');
var e = $('<div/>').appendTo('#target');

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

Проверьте себя здесь

Итак, в конце концов, вы хотите выбрать самый маленький и самый читаемый способ создания элемента. Таким образом, по крайней мере, ваши файлы скриптов будут минимально возможными. Вероятно, более существенный фактор с точки зрения производительности, чем способ создания элемента перед его использованием в DOM.

Кто-то уже сделал эталонный тест: эквивалент jQuery document.createElement?

$(document.createElement('div')) большой победитель

Один момент заключается в том, что это может быть проще сделать:

$("<div class=foo id=bar style='color:white;bgcolor:blue;font-size:12pt'></div>")

Затем сделать все это с помощью вызовов jquery.

Я использую jquery.min v2.0.3. Для меня лучше использовать следующее:

var select = jQuery("#selecter");
jQuery("`<option/>`",{value: someValue, text: someText}).appendTo(select);

следующим образом:

var select = jQuery("#selecter");
jQuery(document.createElement('option')).prop({value: someValue, text: someText}).appendTo(select);

Время обработки первого кода намного меньше, чем второго кода.