js顏色生成器及性能分析

js顏色生成器

比較for循環方法和正則匹配截斷方法生成顏色（RGB）的效率

---

工具函數

//DJB算法
function genHash (str){
    var hash = 5381;
    str = str || '';
    for(var i=0, len=str.length; i<len; ++i){
        hash += (hash << 5) + str.charAt(i).charCodeAt();
    }
    return hash & 0x7fffffff;
}

//補齊或截取九位長度
function cut(num){
    return (genHash(num)+ "000000000").slice(0, 9);
}

顏色生成器

• 1、for循環方法

//創建RGB顏色
function createRGBColor(num){
    var uin = cut(num);
    var rgb = [];
    for(var i = 0 ; i < uin.length ; i+=3 ){
        var rgbnum = uin.substr(i,3) % 255;
        if(rgbnum < 64) rgbnum += 64;
        rgb.push(rgbnum);
    }
    return 'rgb(' + rgb.join(',') + ')';
}

timeline錄製耗時

• 1、正則替換方法

function createRGBColor(num){
    var colorString = "#" + (cut(num).replace(/(\d{3})/g, function($0) {
        var c = $0 % 255;
        if(c < 64) c += 64;
        return c.toString(16);
    }));
    return colorString;
}

timeline錄製耗時

• 大量計算測試（百萬次）

//創建rgb(96,145,215)顏色

function createRGBColor(num){

    var uin = cut(num);
    var rgb = [];
    for(var i = 0 ; i < uin.length ; i+=3 ){
        var rgbnum = uin.substr(i,3) % 255;
        if(rgbnum < 64) rgbnum += 64;
        rgb.push(rgbnum);
    }
    var ret = 'rgb(' + rgb.join(',') + ')'

    return ret;
}

//創建#12F5V2顏色
function createRGBColorReg(num){
    var colorString = "#" + (cut(num).replace(/(\d{3})/g, function($0) {
        var c = $0 % 255;
        if(c < 64) c += 64;
        return c.toString(16);
    }));
    return colorString;
}

var TIMES = 1000;
var data = [,,,,,,];//省略，上千數據的數組

var startCreateRGBColorReg = function() {
    var ret = [];
    console.time("createRGBColorReg");
    for(var i = TIMES;i>0; i--) {

        data.forEach(function(appid){
            createRGBColorReg(appid);
        });

    }
    console.timeEnd("createRGBColorReg");
    return 1;
};

var startCreateRGBColor = function() {
    var ret = [];
    console.time("createRGBColor");
    for(var i = TIMES;i>0; i--) {
        data.forEach(function(appid){
        createRGBColor(appid);
    });
}
    console.timeEnd("createRGBColor");
    return 1;
};


var init = function() {

    startCreateRGBColorReg();
    startCreateRGBColor();

};

init();

測試證明：截斷操作使用循環的效率快於正則