jQuery: acrescentar individualmente ou ao mesmo tempo + seletores? - jquery, performance

Estou construindo um widget de interface do usuário do jQuery e quandoinicializo crio várias divs, âncoras, entradas. Li que é mais rápido criar uma string HTML inteira e depois anexá-la ao DOM do que anexar cada elemento DOM individual.

No entanto, preciso acessar esses elementos posteriormente,então também estou inclinado a construí-los individualmente e depois anexá-los para que eu já os tenha em cache em vez de selecioná-los depois de anexar todo o HTML.

O que geralmente é mais rápido?

por exemplo.:

var html = $("<div id="container">.....several more divs, anchors and inputs all with IDs......</div>");

<dom element>.append(html);
this.container = $("#container");
this.search = $("#search");
...and so on

ou

this.container = $("<div id="container"></div>");
this.search = $("<input .... id="search" />");
...and the rest of the divs, anchors and inputs then...

<dom element>.append(this.container).append(this.search) ..... and so on

Respostas:

4 para resposta № 1

Sugiro também a leitura dessas duas postagens no blog

43.439 razões para usar append () corretamente

5 dicas fáceis sobre como melhorar o desempenho do código com enormes conjuntos de dados no jQuery

---

0 para resposta № 2

Isso cria um fragmento DOM que é bastante rápido, pois criar muitos deles será mais lento.

var html = $("<div id="container">.....several more divs, anchors and inputs all with IDs......</div>");

você pode acelerar os seletores, fornecendo a ele o contexto limitado em que você sabe que os elementos estão.

this.container = html; //since #container is the top div in html, html = #container
this.search = html.find("#search");

E, finalmente, adicione ao DOM Esse é o anexo lento, porque faz com que o navegador seja redesenhado.

<dom element>.append(html);

Isso fará com que você queira, sem precisar criar vários fragmentos DOM, que serão mais lentos.

---