jQuery：单独添加还是一次追加+选择器？

Question

我正在构建一个jQuery UI小部件，当我初始化时，我创建了几个div，锚点，输入。我已经读过，构建一个完整的HTML字符串然后将其附加到DOM比附加每个DOM元素更快。

但是，我稍后需要访问这些元素，所以我也倾向于单独构建它们然后追加它们，所以我已经将它们缓存而不是在我追加所有HTML之后选择它们。

什么通常更快？

e.g：

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 reasons to use append() correctly

5 easy tips on how to improve code performance with huge data sets in 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片段。