1. Make good use of documentfragment
There was a game of playing airplanes before. I'm adding bullets in the following way
Copy Code code as follows:
for (Var i=0;i<5;i++) {
var bullet = new Bullet ();
Document.body.appendChild (bullet);
}
The problem is, my goal is to have 5 bullets at the same time, so I loop 5 bullets to the body, which leads to a result: the browser reflow 5 times.
But in fact can find a carrier, to first put the 5 bullets, and then add to the body once again, so that only one flow. Save a lot of expenses.
Copy Code code 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 fragmentation, it does not produce any labels, just a carrier.
2. The reference value is empty, and the DOM custom reference value is also empty.
Find yourself writing code, many reference types of values, are not at the end of the variable empty.
For example:
Copy Code code 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 of the day simply remove the DOM object and actually need to This.dom.innerHTML = ' and this.dom = null.
Just for the IE series, because the RemoveChild method simply interrupts the DOM element from the DOM chain and does not release the object.
3. Use the Getboundingclientrect method to get parameters such as the DOM's left,top,width,height.
When you need to get two or more of the parameters such as left,top,width,height, use the Getboundingclientrect method to get one object of the above four parameters at once, reducing the
Property access for DOM elements.
Copy Code code as follows:
var rect = document.getElementById (' Test '). Getboundingclientrect ();
Rect.width,rect.left,rect.top,rect.height
4. Clones a DOM element using the CloneNode method.
For DOM elements that need to be created frequently using the Doucment.createelement method, you can first save a DOM element with a CloneNode method clone,
The next time you need to use it, you can clone it directly with a cloned DOM element, using the CloneNode method faster than the CreateElement method. Example:
Copy Code code as follows:
var temp;
for (Var i=0;i < 100;i++) {
var dom = Temp?temp.clonenode ():d ocument.createelement (' div ');
if (!temp) temp = Dom.clonenode ();
Do something
}
5. The circular judgment is labeled to reduce the DOM attribute judgment.
According to the logic of the game, for example, men are down 100 floors.
When the villain standing in a box above, this time, the other squares, you can no longer need to judge whether the villain will fall to their own box, just to go up on the line. That way, you can cut it down hundreds of times a second.
Property access to DOM elements to reduce overhead. When the villain leaves the box, judgment comes into effect again. Reasonable use.
Attach yourself: It's men. 100-Storey Portal >>
Temporarily found so much, later found more words, then write it ...
Author: cnblogs Floyd
