jQuery DOM manipulación de la eficiencia - creación de toda la página con JavaScript

Question

Voy a comenzar con una página completamente en blanco (sin elementos que no sean html, cabeza y cuerpo) y luego construir la página usando jQuery. El contenido de la página tendrá el formato de JSON de una solicitud de AJAX. Los contenidos de JSON no tendrán ningún HTML. El HTML con contenido se compilará para diferentes secciones de la página dependiendo de la estructura del objeto JSON.

Esta página tendrá varios controles deslizantes, modales y otro contenido "dinámico".

Mi pregunta es, ¿será más rápido (tome IE7 como el denominador común más bajo) construir el HTML como una cadena grande (utilizando un constructor de cadenas mucho más rápido que la concatenación estándar) e inyectar esto en el cuerpo en de forma a granel, es decir

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) 

y luego, cuando lo que hay en el DOM, utilizar jQuery para encontrar y aplicar plugins a las diversas partes dinámicas, es decir,

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

O

¿Sería mejor crear cada elemento (o algunos) como una variable, y luego agregarlo al cuerpo? es decir

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

entonces con este enfoque no tengo para consultar el DOM, lo único que tiene que hacer esto:

slider.sliderPlugin(options); 

Answer 1

supongo construyendo el código HTML vez es la mejor manera, recuerdo vagamente leyendo esto en algún lugar

editar: Lo leí here con muchas más optimizaciones de jQuery. una buena y recomendada lectura

Answer 2

El consejo que he visto es que, por lo general, es más rápido proporcionar una gran porción de HTML a .html() y luego confiar en el analizador integrado de su navegador para hacer lo suyo.

Sin embargo, si posteriormente va a manipular elementos individuales (por ejemplo, agregar controladores de eventos, etc.), entonces hay algo que decir para crear esos elementos utilizando el método jQuery $('<element>').

Además, dado un valor de atributo como xx"xx (NB: incrustado comillas) es mucho más fiable y segura para hacer:

$('<div>', { attr: foo }) 

de hacer esto:

html += '<div attr="' + foo + '"/>'; 

ya que si foo contiene caracteres HTML especiales que tendrías que escapar tú mismo.

Por lo tanto, a menos que su contenido sea realmente grande Olvidé las preocupaciones sobre el rendimiento y busqué trozos grandes de HTML cuando hay HTML estático, pero utilizo los métodos de creación de etiquetas si está interponiendo cadenas de variables.

Answer 3

Las características de plantilla de KnockoutJS parecen ser una muy buena opción para su aplicación.