在jQuery中創建和添加元素的方式更快？

我需要附加一些div元素到我的頁面。有兩種方法：路1（追加一個完整的字符串）：在jQuery中創建和添加元素的方式更快？

$('#page123').append("<div id='foo' class='checkbox' data-quesid='foofaa'><label class='control-label'>Question<span class='quesNo'>"+ quesNo +"</span>: <span class='q'>" + title +"</span></label></div>")

路2（克隆html元素，填充它，然後追加）：

var question = $('div.sampleQuestionLayOut').first().clone(true); 
question.removeClass('sampleQuestionLayOut'); 
question.removeAttr('style'); 

question.attr('id', 'foo'); 
question.attr('data-quesid', 'foofaa'); 
......so on 

$('#page123').append(question);

顯然，在方式2，我我正在編寫一個示例html元素來選擇它並填充它並追加。在我的HTML文件：

<div id='' class='checkbox sampleQuestionLayOut' data-quesid='' style='display:none'> 
    <label class='control-label'> 
    Question 
    <span class='quesNo'></span>: 
    <span class='q'></span> 
    </label> 
</div>

現在，我可以在我的網頁上附加這樣的問題20倍。上述哪一種方法在性能方面更高效，哪種方法更好？

來源

2016-05-03 Nitin Aggarwal

我如何發現它？ –

第一種方法應該快一點，因爲它處理DOM較少。

這裏是一個小測試使用performance.now()來衡量執行時間：

$(function() { 

    var s1 = performance.now(); 
    $('#page123').append("<div id='foo' class='checkbox' data-quesid='foofaa'><label class='control-label'>Question<span class='quesNo'>2</span>: <span class='q'>2</span></label></div>") 
    var e1 = performance.now(); 
    console.log('StringAppend: ' + (e1 - s1) + ' ms'); 

    var s2 = performance.now(); 
    var question = $('div.sampleQuestionLayOut').first().clone(true); 
    question.removeClass('sampleQuestionLayOut'); 
    question.removeAttr('style'); 
    question.attr('id', 'foo'); 
    question.attr('data-quesid', 'foofaa'); 
    question.html("<label class='control-label'>Question<span class='quesNo'>1</span>: <span class='q'>1</span></label>") 
    $('#page123').append(question); 
    var e2 = performance.now(); 
    console.log('CloneAndAppend: ' + (e2 - s2) + ' ms'); 

})

https://jsfiddle.net/s1odw6pg/1/

我想補充一點，一般來說，你應該儘量從而最小化append()方法和調用次數DOM操作操作。如果你的元素需要一個接一個出現，你可以建立一個大的HTML字符串並將它們一起附加。一個有趣的資源，看到不同的方法是這樣的：http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly

來源

2016-05-03 08:41:53 Danilo

-1

事實上，第一種方法應該稍微快一點，因爲它不會首先查找模板元素。至於最佳做法，我不確定。我更喜歡第二個，但它可以變得非常主觀。

[錯誤]第二種方法應該更快，因爲它不需要解析標記。

編輯 - 我應該更加關注。我很快瀏覽了它，並認爲你是在方法2中從頭開始創建它。（這將是最快的方式）

來源

2016-05-03 08:16:52 overburn

你如何確定速度？ –

只是這種類型的事情的一般經驗。在任何情況下，如果你想確切地知道它，你可以使用chrome的分析器來找出具體的差異。應該是我所說的話。無論如何，這種過早優化的氣味：D – overburn

在這種情況下，使用jQuery實現最佳性能的最佳方式是創建整個標記（使用字符串）並且只調用一次（選項＃1）.append（字符串）。這樣做，你只需要使用DOM一次（Javascript的速度較慢）而不是多次/多次（選項＃2）。

來源

2016-05-03 08:33:26 Hernas

在jQuery中創建和添加元素的方式更快？

回答

相關問題