jQuery DOM操作効率 - JavaScriptでページ全体を構築する

Question

私は完全に空白のページ（html、head、body以外の要素はありません）から始め、jQueryを使用してページを構築します。ページの内容は、AJAXリクエストからのJSON形式になります。 JSONのコンテンツにはHTMLはありません。コンテンツを含むHTMLは、JSONオブジェクトの構造に応じて、ページの異なるセクション用に構築されます。

このページには、さまざまなスライダ、モーダルなどの「ダイナミック」コンテンツがあります。

私の質問は、（標準連結よりもはるかに速い文字列ビルダーを使用して）HTMLを1つの大きな文字列として構築するために、IE7を最小公約数として利用できるようになります。バルクファッション、すなわち

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); 

OR

各要素（またはいくつか）を変数として作成し、本文に追加する方が良いでしょうか？私は漠然と覚えて、私は一度HTMLを構築する最良の方法だと思い

slider.sliderPlugin(options); 

Answer 1

：すなわち

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

その後、私はDOMを照会する必要はありません、このアプローチでは、私はこれをしなければなりませんこれをどこかで読んでください

編集：私はもっと多くのjQuery最適化を使ってhereを読んでいます。いいえ、お勧めの読書

Answer 2

私が見たアドバイスは、通常、HTMLの単一の大きな塊を.html()に供給してから、ブラウザの組み込みパーサーに依存しているだけです。

個々の要素を後で操作する場合（イベントハンドラの追加など）は、jQuery $('<element>'）メソッドを使用してこれらの要素を作成するための何かがあります。また

、このようxx"xx（NB：埋め込まれた引用符）などの属性値を与え、それが何をはるかに信頼性と安全性です：

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

これを行うにより：

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

た場合導入をfooには特別なHTML文字が含まれていますので、自分でエスケープする必要があります。したがって

あなたのコンテンツは、私は、パフォーマンス上の問題を忘れて、静的なHTMLがあるときHTMLの大きな塊のために行くが、あなたは、変数の文字列を介在している場合、タグの作成方法を使用したい本当に大きくなければ。

Answer 3

KnockoutJSのテンプレート機能は、アプリケーションに適しているようです。