我可以使用JavaScript編寫更有效的代碼嗎？
[英]Can I make more efficient code in javascript?
問題描述
for (var i = 0; i < 1000; i += 1) {
var el = document.createElement('div');
el.appendChild(document.createTextNode('Node ' + (i + 1)));
document.getElementById('nodeHolder').appendChild(el);
}
Javascript代碼使用純語法是這樣的，請問有人能做出更高效的邏輯嗎？
5 個解決方案
解決方案1
4 2014-03-04 09:46:19
您會在每次迭代中觸發瀏覽器重排，這會大大降低性能，而應該這樣做：
var docFragment = document.createDocumentFragment(); // creates empty fragment
for (var i = 1; i <= 1000; ++i) {
var el = document.createElement('div');
el.innerHTML = 'Node ' + i;
docFragment.appendChild(el);
}
document.getElementById('nodeHolder').appendChild(docFragment);
這樣，您只需修改一次dom。
嘗試測量執行時間，您會發現巨大的差異。
這是一篇有關優化Javascript Dom操作的有趣文章 。
解決方案2
1 2014-03-04 09:42:54
您應該僅獲得一次nodeHolder，每個循環中的document.getElementById都是不必要的
var nodeHolder = document.getElementById('nodeHolder')
for (var i = 0; i < 1000; i += 1) {
var el = document.createElement('div');
el.innerHTML = 'Node ' + (i + 1);
nodeHolder.appendChild(el);
}
解決方案3
1 2014-03-04 09:46:19
編輯：
編輯以添加div。
通常，它可以更快地構建一個字符串，然后一次性將其附加到您的文檔中。 這樣，您只需觸摸一次DOM。
var html = "";
for (var i = 0; i < 1000; i++) {
html += "<div>Node " + (i + 1) + "</div>";
}
document.getElementById('nodeHolder').innerHTML = html;
在這里更新了Fiddle： http : //jsfiddle.net/paull3876/cGAhq/
編輯2：
根據評論，我對片段答案和答案做了一些性能測試。
在Firefox和Chrome瀏覽器中，片段答案的速度明顯更快。 在Internet Explorer（10）中，這里的字符串答案稍快一些。 我僅在一台機器上進行了測試，對於較慢的較慢機器和不同的瀏覽器版本，可能會有所不同。
此處的性能測試： http : //jsfiddle.net/paull3876/596cq/1/
解決方案4
1 2014-03-04 10:09:31
如果您確實想從代碼中獲得每一項性能，則只應使用document.getElementById一次，並修改一次文檔。 另外， Node.prototype.cloneNode似乎比Document.prototype.createElement快一點。
var nodeHolder = document.getElementById("nodeHolder"),
fragment = document.createDocumentFragment(), // Create a fragment to avoid repetitive manipulation of the document
templateNode = document.createElement("div"), // Create a template div
el,
i;
for (i = 1; i < 1001; i += 1) {
// Clone the node instead of using createElement
el = templateNode.cloneNode();
el.appendChild(document.createTextNode("Node " + i));
// Append to the fragment
fragment.appendChild(el);
}
// Append the fragment to the holder
nodeHolder.appendChild(fragment);
如果我錯過了什么，請隨時告訴我。
編輯：
“將i的開始和結束值移動1以消除(i + 1) ” – Xotic750
解決方案5
0 2014-03-04 13:19:03
您可以使用其文本節點克隆原始div，因此可以使用數字來更新文本，而不必在每次迭代時創建和添加文本。
<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>Small Page</title>
</head>
<body>
<h1>Spawning divs</h1>
<script>
var el, i=0,
pa=document.createDocumentFragment(),
div= document.createElement('div');
div.appendChild(document.createTextNode('Node '));
while(i<1000){
var el = div.cloneNode(true);
el.firstChild.data+=' '+(++i);
pa.appendChild(el);
}
document.body.appendChild(pa);
</script>
</body>
</html>
如何使用Javascript或jQuery使此代碼更有效？
[英]How can I make this code more effective using Javascript or jQuery?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.