JavaScript game Optimization

1. Use DocumentFragment
There was a plane-hitting game. I used the following method to add a bullet:
Copy codeThe Code is as follows:
For (var I = 0; I <5; I ++ ){
Var bullet = new Bullet ();
Document. body. appendChild (bullet );
}

The problem arises. My goal is to have 5 bullets at the same time, so I cyclically add 5 bullet objects to the body, which leads to a result: the browser reflow 5 times.
But in fact, you can find a carrier to first install these five bullet classes, and then add them to the body at one time, so that only one flow will appear. Saves a lot of expenses.
Copy codeThe Code is as follows:
Var df = document. createDocumentFragment ();
For (var I = 0; I <5; I ++ ){
Var bullet = new Bullet ();
Df. appendChild (bullet );
}
Document. body. appendChild (df );

DocumentFragment: A File Fragment. It does not generate any tags, but is just a carrier.

2. Set the reference value to null, and the reference value customized by Dom to null.
I found that many reference type values in the code I wrote were not left blank at the end of the variable.
For example:
Copy codeThe Code is as follows:
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 );
}
}

At the end, we simply remove the dom object. In fact, we also need to remove this. dom. innerHTML = ''and this. dom = null.
Only for the IE series, because the removeChild method only disconnects dom elements from the dom chain and does not release objects.

3. Use the getBoundingClientRect method to obtain left, top, width, height, and other dom parameters.
To obtain two or more left, top, width, height, and other parameters, use the getBoundingClientRect method to obtain an object of the preceding four parameters at a time, reducing the number
Dom element attribute access.
Copy codeThe Code is as follows:
Var rect = document. getElementById ('test'). getBoundingClientRect ();
// Rect. width, rect. left, rect. top, rect. height


4. Use cloneNode to clone dom elements.
To frequently use the doucment. createElement method to create dom elements, you can clone and save a dom element by using the cloneNode method,
The next time you need to use it again, you can clone it directly with the cloned dom element. The cloneNode method is faster than the createElement method. Example:
Copy codeThe Code is as follows:
Var temp;
For (var I = 0; I <100; I ++ ){

Var dom = temp? Temp. cloneNode (): document. createElement ('div ');
If (! Temp) temp = dom. cloneNode ();
// Do something
}

5. Add an identifier to the loop judgment to reduce Dom attribute judgment.
Based on the game logic, for example, a man has a lower layer of one hundred.
When the villain is standing on a square, this time, other squares, you do not need to judge whether the villain will fall to their own square, just to go up. In this way, it can be reduced several hundred times in one second.
Access the attributes of dom elements to reduce overhead. When the villain leaves the square, the judgment takes effect again. Reasonable Use.
Attached to the self-written: men are next layer 100 portal>

So much is found for the time being. If you find more in the future, write it again...
Author: cnblogs Floyd