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

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

此页面将包含各种滑块，模态和其他“动态”内容。

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

var html = "
All markup required for the page, built from the contents of the JSON object
...
...etc." $("body").html(html) 

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

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

要么

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

 var content = $('
', {id: "content"}) var slider = $('
', {id: "slider", html="
...
"}).appendTo(content); $('body').append(content) 

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

 slider.sliderPlugin(options); 

Answer 1

我想构建HTML一次是最好的方法，我依旧记得在某处读它

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

Answer 2

我看到的建议是，通常可以更快地向.html()提供单个大块HTML，然后依靠浏览器的内置解析器来完成它的工作。

但是，如果您将要随后操作单个元素（例如添加事件处理程序等），那么可以使用jQuery $('' ）方法创建这些元素。

此外，给定一个属性值，如xx"xx （nb：嵌入的引号），它更可靠，更安全：

 $('
', { attr: foo }) 

而不是这样做：

 html += '
'; 

因为如果foo包含特殊的HTML字符，你必须自己逃避它们。

因此，除非您的内容非常大，否则我会忘记性能问题，并在存在静态HTML时使用大块HTML，但如果您插入变量字符串，则使用标记创建方法。

Answer 3

KnockoutJS的模板function似乎非常适合您的应用程序。