創建HTML元素的最快方法？

考慮這個例子代碼：創建HTML元素的最快方法？

function appendText() 
{ 
    var txt1="<p>Text.</p>";    // Create element with HTML 

    var txt2=$("<p></p>").text("Text."); // Create with jQuery 

    var txt3=document.createElement("p"); // Create with DOM 
    txt3.innerHTML="Text."; 

    $("p").append(txt1,txt2,txt3);   // Append the new elements 
}

在上面的代碼中，我創建了使用三種不同的技術段落。我想知道哪一個更快在電話中更有效率&？

來源

2013-05-14 nakul

除了效率相當低的＃2，我認爲＃1和＃3之間的差距會很小;在真實的代碼中，我會使用最清晰的代碼。在這種情況下，這將是＃1。 – icktoofay 2013-05-14 06:04:01

@dystroy不，我只是想知道哪種方法正確，執行速度更快 – nakul 2013-05-14 06:04:49

@icktoofay感謝您的回覆 – nakul 2013-05-14 06:07:05

var txt1="<p>Text.</p>";    // Create element with HTML 
// actually: $('<p>Text.</p>');

在這種情況下，jQuery將創建一個<div>元素，那麼它的.innerHTML屬性設置爲您通過的HTML字符串。這不是特別快。

var txt2=$("<p></p>").text("Text."); // Create with jQuery

這是更快，因爲jQuery進行了優化，這種映射直createElement()和你使用.text()因此不需要額外的解析是必需的。

var txt3=document.createElement("p"); // Create with DOM 
txt3.innerHTML="Text.";

這回避了兩種方法和應該更快的某些部分，但不是因爲你使用.innerHTML其中有獲得第一解析。

最快的將是這樣：

var txt4 = document.createElement('p'); 
txt4.textContent = 'Text.';

Proof

需要注意的是，當我說快，它是基於這個特殊的測試案例的結果;通常你不會達到這個問題的重點。此外，本機版本是如此之快，一個單獨的測試將不得不進行以獲得更準確的結果對其他測試用例:)

來源

2013-05-14 06:17:51

-1

其中最快的是：

var txt3=document.createElement("p"); // Create with DOM 
    txt3.innerHTML="Text.";

因爲當你使用JQuery追加任何元素，它遍歷整個DOM來搜索你想追加的特定ID，而使用本地JS時，它將遍歷，直到它找到你想要追加的元素的第一個出現。

EG：

<div id="a"> 
     <div id="b"> 
      <div id="c"></div> 
     </div> 
</div>

假設你希望將一些文字追加在「B」，jQuery將穿越至「C」，而原生JS會遍歷只能做到「B」 [該ID的第一個實例]

來源

2013-05-14 06:35:18 Janak

這實際上並不是最快的，因爲即使'$（

）.text（'Text。'）'也比這更快;原因是'.innerHTML'的運行速度較慢（無論如何，添加文本通常都是錯誤的）。不確定你答案的第二部分是關於什麼。 – 2013-05-14 06:45:43

創建HTML元素的最快方法？

回答

相關問題