jQuery DOM操作效率 - 使用JavaScript構建整個頁面

我將從一個完全空白的頁面開始（沒有HTML，head和body之外的元素），然後使用jQuery構建頁面。頁面內容將以AJAX請求中的JSON形式出現。來自JSON的內容不會有任何HTML。包含內容的HTML將根據JSON對象的結構爲頁面的不同部分構建。jQuery DOM操作效率 - 使用JavaScript構建整個頁面

此頁面將有各種滑塊，模式和其他「動態」內容。

我的問題是，它會更快（讓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);

來源

2011-11-24 Fergal

你爲什麼要這樣做？如果你打算在JavaScript中將標記作爲字符串變量發出，爲什麼不直接在body中創建呢？ – tvanfosson

我沒有看到「你爲什麼要這樣做」的問題。但是，總結一下，平臺限制，JSON內容是可變的，所以不同的JSON =不同的頁面輸出，標記不包含在JSON中，只是頁面的每個區域的內容，標記是根據JSON結構生成的。將來，這將允許爲相同的JSON使用不同的標記，因此可以升級佈局而無需重新格式化源內容。 – Fergal

夠公平的。我只是好奇而已。我可能會通過AJAX而不是JSON提供部分HTML視圖，並從服務器上的模型構建HTML。不過，我想，有些情況下數據服務器與Web服務器不一樣。我發現從字符串構建HTML是相當乏味和容易出錯的。你可能要考慮使用http://knockoutjs.com – tvanfosson

我猜構建HTML曾經是最好的方式，我依稀記得讀這個地方

編輯：我讀了here與更多的jQuery優化。一個很好的建議閱讀

來源

2011-11-24 15:11:13 alonisser

我看到的建議是，提供一個單一的大塊HTML到.html()，然後依靠你的瀏覽器的內置解析器來做它的事情通常更快。但是，如果你打算隨後操縱各個元素（例如添加事件處理程序等），那麼使用jQuery $('<element>'）方法創建這些元素有一定的意義。

此外，由於屬性值如xx"xx（注：嵌入式引號），它更可靠和安全的事：

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

不是要做到這一點：

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

因爲如果foo包含特殊的HTML字符，您必須自己將其轉義出來。

因此，除非你的內容是真的大我會忘記性能問題，並在有靜態HTML時使用大塊HTML，但如果插入可變字符串時使用標記創建方法。

來源

2011-11-24 15:12:07 Alnitak

KnockoutJS的模板功能似乎非常適合您的應用程序。

來源

2011-11-24 15:40:47 tvanfosson

jQuery DOM操作效率 - 使用JavaScript構建整個頁面

回答

相關問題