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

Question

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

此页面将包含各种滑块,模态和其他"动态"内容.

我的问题是,它是否会更快(让IE7作为最低标准)将HTML构建为一个大字符串(使用比标准连接快得多的字符串构建器)并以批量方式将其注入到正文中,即

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 是最好的方法，我隐约记得在某处读过这篇文章

编辑：我在这里阅读了更多 jQuery 优化。一本不错的推荐读物