[Javascript]3. Improve you speed! Performance Tips

最新推荐文章于 2024-05-30 11:27:58 发布

weixin_33973600

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量82

点赞数

文章标签： javascript ViewUI

/**
    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("\n");
//Using join is much faster than using '+=' and looks simple and clear!!

weixin_33973600

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[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...
复制链接

扫一扫