JavaScript ゲーム最適化_JavaScript スキル

1. DocumentFragmentを上手に活用しよう
以前オナニーゲームがありました。次のメソッドを使用して箇条書きを追加します

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

for( var i= 0;ivar Bullet = new Bullet();
document.body.appendChild(bullet);

ここに来ます問題は、私の目標は 5 つの箇条書きを同時に表示することなので、ループ内の本文に 5 つの箇条書きオブジェクトを追加します。これにより、ブラウザが 5 回リフローするという結果が得られます。
しかし、実際には、最初にこれら 5 種類の弾丸を保持するキャリアを見つけてから、それらを一度に本体に追加することで、フローが 1 回だけ表示されるようにすることができます。たくさんの出費を節約しましょう。

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

var df = document.createDocumentFragment();
for(var i=0;ivar bullet();
df.appendChild(bullet);
}
document.body.appendChild (df) ;

DocumentFragment: ドキュメントのフラグメント。タグは生成されず、キャリアのみが生成されます。

2.参照値は空白のままにし、Dom でカスタマイズされた参照値も空白のままにします。
私が書いたコードでは、変数の終了時に多くの参照型の値がクリアされていないことがわかりました。
例:

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

var Bullet = function(){
2 this.dom = null;
3 this.init();
4 }
5 Bullet.prototype = {
6 this.init : function(){
7 this.dom = document.createElement('div');
8 document.body.appendChild(this.dom)
9 }
this.end : function(){
document.body .removeChild(this.dom);
}
}

実際には、これも追加する必要があります。 dom.innerHTML = '' および this.dom = null。
IE シリーズのみ。removeChild メソッドは dom 要素を dom チェーンから切断するだけで、オブジェクトを解放しません。

3. getBoundingClientRect メソッドを使用して、dom の左、上、幅、高さ、その他のパラメーターを取得します。
left、top、width、height などの 2 つ以上のパラメータを取得する必要がある場合は、代わりに getBoundingClientRect メソッドを使用して、上記 4 つのパラメータのオブジェクトを一度に取得し、属性へのアクセスを減らすことができます。
dom 要素。

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

var rect = document.getElementById('test '). getBoundingClientRect();
//rect.width,rect.left,rect.top,rect.height

4. cloneNode メソッドを使用して dom 要素を複製します。
document.createElement メソッドを使用して新しい DOM 要素を頻繁に作成する必要がある場合は、最初に cloneNode メソッドを使用して DOM 要素を複製して保存できます。
次回再度使用する必要がある場合は、直接DOM 要素を作成できます。複製された DOM 要素を使用して、コピーを複製するには、createElement メソッドを使用するよりも cloneNode メソッドを使用する方が高速です。例:

コードをコピーします コードは次のとおりです。 (var i =0;i

var dom = temp?temp.cloneNode():document.createElement('div');

if(!temp)temp = dom.cloneNode ();
//何かをします
}


5.ループ判定にラベルを追加することでDom属性の判定を軽減します。
ゲームのロジックによれば、たとえば、あなたが男性の場合、100 レベル下に降りることになります。
悪役がブロックの上に立っているとき、この時点で他のブロックは悪役が自分のブロックに落ちるかどうかを判断する必要はなくなり、立ち上がるだけで済みます。この方法により、DOM 要素への数百もの
属性アクセスが 1 秒あたりに削減され、オーバーヘッドが削減されます。悪役がボックスから離れると、判定が再び有効になります。合理的な使用。

添付は私が書いたものです:
あなたが男性なら、ポータルの 100 階まで降りてください>


今のところたくさん見つけました。今後も、また書き込んでください。 。 。
著者: cnblogs フロイド