JavaScript game optimization_javascript skills

1. Make good use of DocumentFragment
There was a masturbation game before. I add bullets using the following method

Copy code The code is as follows:

for(var i= 0;i<5;i ){
var bullet = new Bullet();
document.body.appendChild(bullet);
}

Here comes the problem, My goal is to have 5 bullets appear at the same time, so I add 5 bullet objects to the body in a loop, which will lead to a result: the browser reflows 5 times.
But you can actually find a carrier to hold these five bullet types first, and then add them to the body at once, so that the flow will only appear once. Save a lot of expenses.

Copy code The 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: Document fragment, it does not generate any tags, just a carrier.

2. Leave the reference value blank, and the Dom-customized reference value also be left blank.
I found that in the code I wrote, many reference type values ​​were not cleared when the variable ended.
For example:

Copy code The 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, it simply removes the dom object. In fact, you also need to add this.dom.innerHTML = '' and this.dom = null.
Only for the IE series, because the removeChild method only disconnects the dom element from the dom chain and does not release the object.

3. Use the getBoundingClientRect method to obtain the left, top, width, height and other parameters of the dom.
When you need to obtain two or more parameters such as left, top, width, height, etc., use the getBoundingClientRect method instead. You can obtain an object of the above four parameters at one time and reduce attribute access to the
dom element. .

Copy code The code is as follows:

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

4. Use cloneNode method to clone dom elements.
For new DOM elements that need to be created frequently using the document.createElement method, you can first clone and save a DOM element using the cloneNode method.
When you need to use it again next time, you can directly use the cloned DOM element. To clone a copy, using the cloneNode method is faster than using the createElement method. Example:

Copy code The 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 labels to loop judgments to reduce Dom attribute judgments.
According to the logic of the game, for example, if you are a man, you will go down one hundred levels.
When the villain is standing on a block, at this time, other blocks no longer need to judge whether the villain will fall to their own block, they only need to rise up. In this way, hundreds of
attribute accesses to DOM elements can be reduced per second, reducing overhead. When the villain leaves the box, the judgment takes effect again. Reasonable use.
Attached is what I wrote: If you are a man, go down to the 100th floor of the portal>>

I have found so much for now. If you find more in the future, please write again. . .
Author: cnblogs Floyd