innerHTML操作の最適化（コード実行効率の向上）_JavaScriptスキル

例: 達成したい効果は、ユーザーがマウスをクリックすると、古いデータに新しいデータが追加されることです。
標準 DOM を使用する場合、完全なコードは次のとおりです:

コードをコピー コードは次のとおりです:

;

data

document.onmousedown = function() {
for (var i = 0; i < ; 10; i ) {
var p = document.createElement("p");
document.getElementsByTagName('div') )[0];
}
}

注: 構造がより複雑な場合、標準 DOM では長いコードを記述する必要があります。
innerHTML が使用されている場合、コードの一部は次のとおりです:




コードをコピー

コードは次のとおりです:

<script> <span>document.onmousedown = function() { <a style="CURSOR: pointer" data="18068" class="copybut" id="copybut18068" onclick="doCopy('code18068')">var html = ""; <u>for (var i = 0; i html = "< p>" Math.random() "<p>" </u></a>} </span>document.getElementsByTagName('div')[0].innerHTML = html; </div></script&gt ; <div class="codebody" id="code18068"><BR> <BR>注: innerHTML には標準 DOM に appendChild がないため、非効率な "= メソッドが使用されます。 <BR>innerHTML と標準 DOM を組み合わせて使用​​できるため、両方の利点を活用できます。コードの一部は次のとおりです。<BR><BR><BR><BR><BR>コードをコピーします<BR><BR></div> コードは次のとおりです: <BR><BR> <BR><script> <div class="codetitle">document.onmousedown = function() { <span>var html = "" <a style="CURSOR: pointer" data="96042" class="copybut" id="copybut96042" onclick="doCopy('code96042')">; (var i = 0; i html = "<p>" Math.random() "<p>"; </U>var temp = document.createElement ("div"); </a> temp.innerHTML = html; </span>while (temp.firstChild) { </div>document.getElementsByTagName('div')[0].appendChild(temp.firstChild); } <div class="codebody" id="code96042">}; <BR> </script>


注: 要素を作成し、innerHTML を挿入して、その要素に対して標準の DOM 操作を使用します。
まだ終わっていません。非同期 innerHTML はより強力なソリューションを提供します。コードの一部は次のとおりです:




コードをコピー


コードは次のとおりです。

<script> <br>document.onmousedown = function() { <br>var html = "" <div class="codetitle">for (var i = 0; i < 10; i ) { <span>html = "<p>" Math.random() "<p>"; <a style="CURSOR: pointer" data="35563" class="copybut" id="copybut35563" onclick="doCopy('code35563')">var temp = document.createElement('div'); temp.innerHTML = html; <U>var frag = document.createDocumentFragment(); </U>if (temp.firstChild) { </a>frag.appendChild(temp.firstChild); >setTimeout (arguments.callee, 0); </span>} else { </div>document.getElementsByTagName('div')[0].appendChild(frag); <div class="codebody" id="code35563">} <BR>}); >} ; <BR></script>


注: ブラウザーの詰まりを防ぐには setTimeout を使用し、レンダリングの数を減らすには DocumentFragment を使用します。
もう 1 つ: 文字列を結合するときにコードを高速化できます。詳細については、
HTML 文字列を構築する最速の方法
を参照してください。