it-swarm.com.ru

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

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

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

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

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

417
Darko Z

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

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

304
strager

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

$('<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              
163
Owen

Вопрос:

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

Ответ:

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

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

ДЕМО.

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

$('<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');

ДЕМО.

Но когда вы имеете дело с большим количеством динамических элементов, вам следует избегать добавления события 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');
}

ДЕМО.

Таким образом, если вы создаете и добавляете сотни элементов с одинаковым классом, то есть (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');

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

152
The Alpha

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

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

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

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

37
edwin

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

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

20
Irshad

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

20
Collin Allen

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

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

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

11
yfeldblum

Вы должны понимать, что значение производительности создания элемента не имеет значения в контексте использования 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.

9
Jani Hyytiäinen

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

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

8
Erel Segal-Halevi

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

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

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

7
Tobiah

Я использую 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);

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

3
Marcel GJS