jQuery DOM 操作效率 - 使用 JavaScript 构建整个页面

Question

我将从一个完全空白的页面开始(除了 html、head 和 body 之外没有任何元素)，然后使用 jQuery 构建页面。页面内容将采用来自 AJAX 请求的 JSON 形式。 JSON 中的内容不会有任何 HTML。将根据 JSON 对象的结构为页面的不同部分构建包含内容的 HTML。

此页面将包含各种 slider 、模式和其他“动态”内容。

我的问题是，将 HTML 构建为一个大字符串(使用比标准连接快得多的字符串构建器)并将其注入(inject)到正文中会更快吗？批量时尚，即

var html = "<div id='content'><p>All markup required for the page, built from the contents of the JSON object</p></div><div id='slider'>...</div>...etc."
$("body").html(html)

然后当它在 DOM 中时，使用 jQuery 查找插件并将其应用到各个动态部分，即

$("#slider").sliderPlugin(options);

或

将每个元素(或某些)创建为变量，然后附加到正文会更好吗？即

var content = $('<div/>', {id: "content"})
var slider =  $('<div/>', {id: "slider", html="<ul><li>...</li></ul>"}).appendTo(content);
$('body').append(content)

然后使用这种方法我不必查询 DOM，我只需要这样做:

slider.sliderPlugin(options);

Answer 1

我想构建一次 HTML 是最好的方法，我隐约记得在某处读过这篇文章

编辑:我读过here还有更多 jQuery 优化。值得推荐的好读物