[Javascript]3.Improve you speed!Performance Tips
9739 ワード
/**
Let inheritance help with memory efficiency
*/
function SignalFire(ID, startingLogs){
this.fireID = ID;
this.logsLeft = startingLogs;
}
SignalFire.prototype = {
addLogs: function(numLogs){
this.logsLeft += numLogs;
}
lightFire: function(){
alert("Whooosh!");
}
smokeSignal: function(message){
if(this.logsLeft < this.message.length / 10){
alert("Not enough");
}else{
this.lightFire();
var x = this.message.length;
for(var i = 0; i < x; i++){
alert("((("+this.message[i]+")))");
if(i % 10 == 0 && i != 0){
this.logsLeft--;
}
}
}
}
}
var fireOne = new SignalFire(1, 20);
var fireTwo = new SignalFire(2, 18);
var fireThree = new SignalFire(3, 14);
fireOne.addLogs(8);
fireTwo.addLogs(10);
fireThree.addLogs(14);
fireThree.smokeSignal("Goblins!");
//The addLogs method is found in one useful place, instead of being
//replicated across all signalFires.
/**
Adding individual dom elements ain't always speedy
*/
//
//**BAD**
//
var list = document.getElementById("kotwList");
var kotw = ["Jenna Rangespike",
"Neric Farthing",
"Darkin Stonefield"];
for(var i = 0, x = kotw.length; i < x; i++){
var element = document.creatElement('li');
element.appendChild(document.createTextNode(kotw[i]));
list.appendChild(element);
}
//appendChild(); function each time this list is appened, we access the DOM
//and cause an entire document reflow. Not as speedy as we'd like, especially
//if we list was huge...
/*
Improve: Use a document fragment to insert additions all at once
*/
var list = document.getElementById("kotwList");
var kotw = ["Jenna Rangespike",
"Neric Farthing",
"Darkin Stonefield"];
var fragment = document.createDocumentFragment();
for(var i = 0, x = kotw.length; i < x; i++){
var element = document.creatElement('li');
element.appendChild(document.createTextNode(kotw[i]));
fragment.appendChild(element);
}
list.appendChild(fragment);
/*
Improve: declare variables as few times as possible
*/
//
//**GOOD**
//
var list = document.getElementById("kotwList"),
kotw = ["Jenna Rangespike",
"Neric Farthing",
"Darkin Stonefield"],
fragment = document.createDocumentFragment(),
element;
for(var i = 0, x = kotw.length; i < x; i++){
element = document.creatElement('li');
element.appendChild(document.createTextNode(kotw[i]));
fragment.appendChild(element);
}
list.appendChild(fragment);
/**
Efficient choices for string concatenation
*/
//
//**OK**
//
var knight = "Jenna Rangespike",
action = " strikes the dragon with a ",
weapon = "Halberd",
turn = "";
turn += knight;
turn += action;
turn += weapon;
//It is ok because the code is short and clear
//
//**NOT GOOD ENOGUTH
//
var newPageBuild = ["", "", "", "",
*** a hundred or more other html elements***,
"", "", ""],
page = "";
for(var i = 0, x = newPageBuild.length; i < x; i++){
page += newPageBuild[i];
}
//
//**GOOD**
//
page = newPageBuild.join("
");
//Using join is much faster than using '+=' and looks simple and clear!!