jQuery efficienza di manipolazione DOM - creazione di un'intera pagina con JavaScript

Question

Ho intenzione di iniziare con una pagina completamente vuota (nessun elemento diverso da html, testa e corpo) e quindi creerò la pagina usando jQuery. Il contenuto della pagina sarà sotto forma di JSON da una richiesta AJAX. I contenuti di JSON non avranno alcun HTML. L'HTML con contenuto verrà creato per diverse sezioni della pagina a seconda della struttura dell'oggetto JSON.

Questa pagina avrà vari slider, modali e altri contenuti "dinamici".

La mia domanda è, sarà più veloce (si consideri IE7 come il minimo comune denominatore) per creare l'HTML come una stringa di grandi dimensioni (utilizzando un generatore di stringhe che è molto più veloce della concatenazione standard) e iniettarlo nel corpo in un modo di massa, cioè

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) 

e poi quando cioè nel DOM, utilizzare jQuery per trovare e applicare plugin per le varie parti dinamiche, cioè

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

O

Sarebbe meglio creare ogni elemento (o alcuni) come una variabile, quindi aggiungere al corpo? cioè

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

poi con questo approccio non ho per interrogare il DOM, devo solo fare questo:

slider.sliderPlugin(options); 

Answer 1

Credo che la costruzione del HTML una volta che è il modo migliore, ricordo vagamente leggendo questo da qualche parte

modifica: Ho letto here con molte altre ottimizzazioni jQuery. una lettura piacevole e consigliata

Answer 2

Il consiglio che ho visto è che è in genere più veloce fornire una singola porzione di codice HTML a .html() e quindi fare affidamento sul parser incorporato nel browser per fare solo il suo esempio.

Tuttavia, se si stanno successivamente manipolando singoli elementi (ad esempio aggiungendo gestori di eventi, ecc.), C'è qualcosa da dire per la creazione di quegli elementi usando il metodo jQuery $('<element>').

Inoltre, dato un valore di attributo come xx"xx (nb: embedded virgolette) è molto più affidabile e sicuro per farlo:

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

che per fare questo:

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

Poiché se foo contiene caratteri HTML speciali che devi sfuggire a te stesso.

Quindi a meno che il contenuto è davvero grande mi piacerebbe dimenticare i problemi di prestazioni e di andare per grandi blocchi di HTML quando c'è HTML statico, ma utilizzare i metodi di creazione di tag se si sta frapponendo stringhe variabili.

Answer 3

Le funzionalità di modello di KnockoutJS sembrano essere davvero adatte all'applicazione.