jQuery: добавить индивидуально или сразу + селекторы?

Question

Я создаю виджет jQuery UI и при инициализации создаю несколько элементов div, якорей, входов. Я читал, что быстрее создать целую строку HTML и затем добавить ее в DOM, чем добавлять каждый отдельный элемент DOM.

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

Что вообще быстрее?

например:.

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

или

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

Answer 1

Я также предлагаю прочитать эти два сообщения в блоге

43 439 причин для правильного использования append ()

5 простых советов о том, как повысить производительность кода с помощью огромных наборов данных в jQuery

Answer 2

Это создаст DOM-фрагмент, который будет довольно быстрым, а создание многих из них будет медленнее.

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

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

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

И, наконец, добавить в DOM Это приложение медленно, потому что вызывает перерисовку браузера.

<dom element>.append(html);

Это даст вам желаемое, без необходимости создавать несколько фрагментов DOM, которые будут работать медленнее.