最近、ページに新しい要素を追加するという js の効率の問題に遭遇しました。 次のようなページがあるとします。 コードをコピーします コードは次のとおりです: Web ページに要素を追加するときに次のコードを使用できることを知ってください: <BR>//メソッド 1 <BR>div1.innerHTML = '<a href="" >テスト</a>'; <br>または: <br>//メソッド2 <br>var a = document.createElement('a'); <br>a.innertText = 'テスト'; div1.appendChild(a); </div>インターネットで検索すると、js の効率について説明した記事を見つけました。おそらく、方法 2 の方が効率的であると考えられます。<br><br><br><br><br>コードをコピー<br><br><br> コードは次のとおりです: <br><br> <div class="codetitle">// メソッド 1 <span>function init(){ <a style="CURSOR: pointer" data="44084" class="copybut" id="copybut44084" onclick="doCopy('code44084')">var staDate = new Date(); <u>var doc = window.document; </u>for (var i=0;ivar str="<div id='div_'" i "' style='width:100px; height:20px;background-color:#eee' >test</div>"; </a></span>container.innerHTML = str; </div>} <div class="codebody" id="code44084">alert(新しい日付 - staDate); <br>} <br>//メソッド 2 <br>function init(){ <br>var staDate = new Date(); <br>var doc = window.document; =0;ivar oDiv = doc.createElement( "div"); <br>var oText = doc.createTextNode("text"); <br>container.appendChild(oDiv); <br>oDiv.style.id = " div_" i; <br>oDiv.style.width = "100px"; <br>oDiv.style.height = "20px"; <br>oDiv.style.backgroundColor = "#eee"; <br>} <br>alert(new Date - staDate) <br>} <br><br> <br>ページには次のものが含まれます: <br>< ;div id="container"></div> <br><input type="button" value="start" onclick="init();" <BR>実行効果から判断すると、オプション 2 はオプション 1 よりも約 10 倍高速です。これは本当ですか?実際、上記のテスト コードには疑問の余地があります。方法 1 のループ コードを見てみましょう: <BR><BR><BR><BR><BR>コードをコピー<BR></div><BR>コードは次のとおりです:<BR><BR> <BR>for(var i=0;i<100;i ){ <BR>var str="<div id='div_'" i "' style=' width:100px; height: 20px;background-color:#eee'>test</div>"; <div class="codetitle">container.innerHTML = str; <span>} <a style="CURSOR: pointer" data="83605" class="copybut" id="copybut83605" onclick="doCopy('code83605')"><u> </u>たくさんあります文字列の接続に加えて、= 演算子も使用されます。これが問題です。JavaScript で文字列を操作するこの方法は、効率に大きく影響します。そのため、createEmenent と の効率をテストするには、上記の方法を使用します。 innerHTML は不公平です。これに基づいて、文字列操作が innerHTML のパフォーマンスを消費している可能性があるため、次のテスト コードを作成しました。 </a> </span> </div> <div class="codebody" id="code83605"> <br><br> <br><br> <br> </div> <br> <br><div class="htmlarea"> <textarea id="runcode74396"> <input type="button" value="测试1" onclick="test1()"> <input type="text" readonly id="t1"> <input type="button" value="测试2" onclick="test2()">[Ctrl A すべて選択 注: <input type="text" readonly id="t2">外部 Js を導入する必要がある場合は、<input type="button" value="清空" onclick="div1.innerHTML = ''; div2.innerHTML = ''; t1.value=''; t2.value = '';"> を実行するために更新する必要があります]<div id="div1"> </div>テストの結果、次のことが判明しました。 <div id="div2">1. 作成されたオブジェクトが少ない場合 (0 ~ 10 個)、innerHTML と createElement はほぼ同じ効率であり、テスト値は不確実です。</div>2. 20 を超えるオブジェクトが作成される場合、 innerHTML は createElement よりもはるかに効率的であり、平均テスト時間は createElement のほぼ 2 倍です。 要約: 実際、効率は、使用可能な API の効率を理解した上で、コードをどのように記述するかによっても決まります。そうしないと、上記のコードのように、実行効率が反映されません。インターネットから、事実に反する結論を引き出します。</textarea> </div> </div>