Недавно я делал много модальных всплывающих окон, а что нет, для чего я использовал jQuery. Метод, который я использовал для создания новых элементов на странице, в подавляющем большинстве был следующим:
$("<div></div>");
Однако у меня возникает ощущение, что это не лучший или самый эффективный способ сделать это. Каков наилучший способ создания элементов в jQuery с точки зрения производительности?
В этом ответе приведены ориентиры ниже.
Я использую $(document.createElement('div')); Бенчмаркинг показывает, этот метод является самым быстрым. Я предполагаю, что это потому, что jQuery не нужно идентифицировать его как элемент и создать сам элемент.
Вы должны действительно запускать тесты с разными механизмами Javascript и взвешивать свою аудиторию с результатами. Примите решение оттуда.
лично я бы предложил (для читаемости):
$('<div>');
некоторые цифры в предложениях (сафари 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');
Таким образом, вы можете даже использовать обработчики событий для определенного элемента, например
$('<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, используя приведенный выше пример, но используя тот же подход, t установите атрибут 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 (не тестируется во всех более ранних версиях).
BTW, взятый из отчета об ошибке 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, он варьируется в зависимости от версий.
Собственно, если вы выполняете $('<div>'), jQuery также будет использовать document.createElement().
(Посмотрите строка 117).
Существует некоторая служебная нагрузка на функциональные вызовы, но если производительность не является критичной (вы создаете сотни [тысяч] элементов), нет никаких оснований возвращаться к простой DOM.
Просто создание элементов для новой веб-страницы - это, вероятно, случай, когда вы лучше всего будете придерживаться способа jQuery.
Если у вас много контента HTML (больше, чем просто один div), вы можете подумать о создании HTML-страницы на странице в скрытом контейнере, а затем обновить ее и сделать ее видимой при необходимости. Таким образом, большая часть вашей разметки может быть предварительно проанализирована браузером и не будет зависеть от JavaScript при вызове. Надеюсь, это поможет!
Это не правильный ответ на вопрос, но все же я хотел бы поделиться этим...
Используя только document.createElement('div') и пропуская JQuery, вы значительно улучшите производительность, если хотите сделать много элементов "на лету" и добавить в DOM.
Я думаю, что вы используете лучший метод, хотя можете оптимизировать его:
$("<div/>");
Вам не нужна сырая производительность от операции, которую вы будете выполнять крайне редко с точки зрения процессора.
Вам нужно понять, что значение производительности создания элемента не имеет значения в контексте использования jQuery в первую очередь.
Имейте в виду, что нет реальной цели создания элемента, если вы на самом деле его не используете.
У вас может возникнуть соблазн выполнить тест производительности, например $(document.createElement('div')) vs. $('<div>'), и получить отличную производительность от использования $(document.createElement('div')), но это только элемент, который еще не находится в DOM.
Однако, в конце дня, вы захотите использовать элемент в любом случае, поэтому настоящий тест должен включать f.ex..appendTo();
Посмотрим, если вы проверите следующее друг против друга:
var e = $(document.createElement('div')).appendTo('#target');
var e = $('<div>').appendTo('#target');
var e = $('<div></div>').appendTo('#target');
var e = $('<div/>').appendTo('#target');
Вы заметите, что результаты будут разными. Иногда один из способов лучше, чем другой. И это только потому, что количество фоновых задач на вашем компьютере меняется со временем.
Итак, в конце дня вы хотите выбрать наименьший и наиболее читаемый способ создания элемента. Таким образом, по крайней мере, ваши файлы script будут минимальными. Вероятно, это более важный фактор производительности, чем способ создания элемента, прежде чем использовать его в 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);
Время обработки первого кода намного ниже второго кода.
Предположим, что у нас есть сценарий для динамического замены содержимого HTML-тегами для форматирования, мы не можем использовать $('#id').text();, потому что он не примет текст с html, отформатированным как жирный текст, чтобы для этого нам нужно использовать jQuery append, но как альтернативу методу .text() просто пустое время, когда нам нужно обновлять и использовать метод append.
var fileImportStatus;
$('#id').change(function() {
if ($('#id').is(':checked')) {
fileImportStatus = "<strong>ON</strong>";
} else {
fileImportStatus = "<strong>OFF</strong>";
}
});
$('#saveBtn').click(function() {
$('#fileImportStatusTxt').empty();
$('#fileImportStatusTxt').append('File Import is ' + fileImportStatus);
});