Qual è il modo più efficiente per creare elementi HTML usando jQuery?

Recentemente ho fatto molti pop-up modali e cosa no, per i quali ho usato jQuery. Il metodo che ho usato per creare i nuovi elementi nella pagina è stato in gran parte sulla falsariga di:

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

Tuttavia, ho la sensazione che questo non sia il metodo migliore o più efficiente per farlo. Qual è il modo migliore per creare elementi in jQuery dal punto di vista delle prestazioni?

Questa risposta ha i parametri di riferimento ai suggerimenti seguenti.

Uso il $(document.createElement('div')); benchmarking dimostra che questa tecnica è la più veloce. Immagino che sia perché jQuery non deve identificarlo come elemento e creare l'elemento stesso.

Dovresti davvero eseguire benchmark con diversi motori Javascript e valutare il tuo pubblico con i risultati. Prendi una decisione da lì.

personalmente suggerirei (per leggibilità):

$('<div>');

alcuni numeri sui suggerimenti finora (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              

Domanda:

Qual è il modo più efficiente per creare elementi HTML usando jQuery?

Risposta:

Dato che si tratta jQueryquindi penso che sia meglio usare questo approccio (pulito) (che stai usando)

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

DEMO.

In questo modo, puoi persino usare i gestori di eventi per l'elemento specifico come

$('<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.

Ma quando hai a che fare con molti elementi dinamici, dovresti evitare di aggiungere un evento handlersin un particolare elemento, invece, dovresti usare un gestore di eventi delegato, come

$(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.

Pertanto, se si creano e accodano centinaia di elementi con la stessa classe, ovvero ( myClass), verrà consumata meno memoria per la gestione degli eventi, poiché sarà presente un solo gestore per fare il lavoro per tutti gli elementi inseriti dinamicamente.

Aggiornamento: poiché possiamo utilizzare il seguente approccio per creare un elemento dinamico

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

Ma l' sizeattributo non può essere impostato usando questo approccio usando jQuery-1.8.0o successivamente e qui c'è una vecchia segnalazione di bug , guarda questo esempio usando jQuery-1.7.2quale mostra che l' sizeattributo è impostato 30sull'esempio sopra ma usando lo stesso approccio non possiamo impostare l' sizeattributo usando jQuery-1.8.3, qui è un violino non funzionante . Quindi, per impostare l' sizeattributo, possiamo usare il seguente approccio

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

O questo

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

Siamo in grado di passare attr/propcome un oggetto figlio ma funziona in jQuery-1.8.0 and laterversioni controllare questo esempio , ma non funzionerà in jQuery-1.7.2 or earlier(non testato in tutte le versioni precedenti).

A proposito, tratto dal jQuerybug report

Esistono diverse soluzioni. Il primo è di non usarlo affatto, poiché non ti fa risparmiare spazio e questo migliora la chiarezza del codice:

Hanno consigliato di usare il seguente approccio ( funziona anche in quelli precedenti , testato in 1.6.4)

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

Quindi, è meglio usare questo approccio, IMO. Questo aggiornamento viene effettuato dopo aver letto / trovato questa risposta e in questa risposta mostra che se si utilizza 'Size'(capital S)invece di 'size'allora funzionerà correttamente , anche inversion-2.0.2

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

Leggi anche su prop , perché c'è una differenza, Attributes vs. Propertiesvaria attraverso le versioni.

In realtà, se lo stai facendo $('<div>'), anche jQuery utilizzerà document.createElement().

(Dai un'occhiata alla linea 117 ).

Esiste un overhead di chiamata di funzione, ma a meno che le prestazioni non siano critiche (si stanno creando centinaia [migliaia] di elementi), non ci sono molte ragioni per tornare al semplice DOM .

La semplice creazione di elementi per una nuova pagina Web è probabilmente un caso in cui ti atterrai al modo jQuery di fare le cose.

Se disponi di molti contenuti HTML (più di un singolo div), potresti prendere in considerazione l'idea di creare l'HTML nella pagina all'interno di un contenitore nascosto, quindi aggiornarlo e renderlo visibile quando necessario. In questo modo, gran parte del markup può essere pre-analizzato dal browser ed evitare di impantanarsi con JavaScript quando viene chiamato. Spero che sia di aiuto!

Questa non è la risposta corretta alla domanda, ma vorrei comunque condividere questo ...

L'uso di document.createElement('div')JQuery e il solo salto miglioreranno notevolmente le prestazioni quando si desidera creare molti elementi al volo e aggiungere al DOM.

Penso che tu stia utilizzando il metodo migliore, anche se potresti ottimizzarlo per:

 $("<div/>");

Non hai bisogno di prestazioni grezze da un'operazione che eseguirai estremamente raramente dal punto di vista della CPU.

Dovrai capire che il significato delle prestazioni di creazione degli elementi è irrilevante nel contesto dell'utilizzo di jQuery in primo luogo.

Tieni presente che non esiste un vero scopo per creare un elemento a meno che non lo utilizzerai effettivamente.

Potresti essere tentato di testare le prestazioni in modo simile a $(document.createElement('div'))vs. $('<div>')e ottenere grandi guadagni in termini di prestazioni dall'utilizzo, $(document.createElement('div'))ma questo è solo un elemento che non è ancora nel DOM.

Tuttavia, alla fine della giornata, ti consigliamo di utilizzare comunque l'elemento, quindi il vero test dovrebbe includere f.ex. .appendTo ();

Vediamo, se testate quanto segue l'uno contro l'altro:

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

Noterai che i risultati varieranno. A volte un modo è più performante dell'altro. E questo solo perché la quantità di attività in background sul tuo computer cambia nel tempo.

Mettiti alla prova qui

Quindi, alla fine, vuoi scegliere il modo più piccolo e più leggibile per creare un elemento. In questo modo, almeno, i file di script saranno i più piccoli possibili. Probabilmente un fattore più significativo sul punto di prestazione rispetto al modo di creare un elemento prima di utilizzarlo nel DOM.

Qualcuno ha già fatto un punto di riferimento: jQuery document.createElement equivalente?

$(document.createElement('div')) è il grande vincitore.

Un punto è che potrebbe essere più semplice fare:

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

Quindi fare tutto questo con le chiamate jquery.

Sto usando jquery.min v2.0.3. Per me è meglio usare quanto segue:

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

come segue:

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

Il tempo di elaborazione del primo codice è molto inferiore al secondo codice.