[Javascript]3. Improve you speed! Performance Tips

/**
    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 = ["<!DOCTYPE html>", "<html>", "<body>", "<h1>",
                    *** a hundred or more other html elements***,
                    "</script>", "</body>", "</html>"],
     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!!

相关阅读:
Callback2.0
设计模式之Composite
设计模式之Proxy
React Native DEMO for Android
React Native 与夜神模拟器的绑定
 Skipping 'Android SDK Tools, revision 24.0.2'; it depends on 'Android SDK Platform-tools, revision 20' which was not installed.
.ui/qrc文件自动生成.py文件
 简单排序算法
 Big O
设计模式之Adapter
原文地址：https://www.cnblogs.com/Answer1215/p/3908600.html