aikunaibao

JavaScript performance comparison

Test case created by aikunaibao

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
ss

(function(){    
    if     (!("Prototype" in window)){
        Prototype={emptyFunction:function(){}};
        Class ={
            create: function(){return function(){this.initialize.apply(this, arguments)}}
        };        
        $ = function(element){
            return typeof(element)=="string"?document.getElementById(element):element
        };
        $A= function(arrLike){
            for(var i=0,ret=[];i<arrLike.length;i++) ret[i]=arrLike[i];
            return ret
        };    
         
        Number.prototype.toColorPart =function(){return String("00"+this.toString(16)).slice(-2)};        
        Function.prototype.bind = function() {
             var __method = this, args = $A(arguments), object = args.shift();
            return function(){return __method.apply(object, args.concat($A(arguments)))}
        }

        Position={  
             cumulativeOffset: function(element) {
                var valueT = 0, valueL = 0;
                do {
                  valueT += element.offsetTop  || 0;
                  valueL += element.offsetLeft || 0;
                  element = element.offsetParent;
                } while (element);
                return [valueL, valueT];
            }
        }        
    }
})()

/**//*
    1.读取/设置 透明度,
    2.如果只传了一个参数element,则返回 element的透明度 (0<value<1)
    3.如果传了两个参数 element和value 则把element的透明度设置为value  value范围 0-1
*/

function Opacity(element,value){
    var ret;
    if (value===undefined){   //读取
        if (!/msie/i.test(navigator.userAgent))
            if (ret=element.style.opacity) return parseFloat(ret);          
        try{return element.filters.item('alpha').opacity/100}catch(x){return 1.0}
    }else{                   //设置        
        value=Math.min(Math.max(value,0.00001),0.999999)    //这句修复一些非ie浏览器opacity不能设置为1的bug
        if (/msie/i.test(navigator.userAgent)) return element.style.filter="alpha(opacity="+value*100+")"
        return element.style.opacity=value        
    }
}


Effect        =Class.create();
Effect.Fn    =new Object();
Effect.Init =new Object();

Effect.prototype={
    initialize: function(element,options) {
        this.element  = $(element);
                this.options  = options || {};
                this.duration = (this.options.duration || 2) * 1000;   //效果执行时间
        this.fps      = this.options.fps || 40;                 //频率
                this.steps    = Math.floor(this.duration/this.fps);   //当前步长,注: 这个变量是递减的,当它0的时候意味着整个效果结束
        this.maxSteps = this.steps;             //整个效果的步长
        this.setting  = new Object();  
        this.timer    = null;        

                if (this.options.delay){    // 延时处理
                        var _this=this;
                        setTimeout(function(){
                        _this.setup(_this);
                        (_this.options.onStart || Prototype.emptyFunction)(_this);
                        _this.run();
                        }, _this.options.delay*1000);
        }else{
            this.setup(this);
            (this.options.onStart || Prototype.emptyFunction)(this);        
            this.run();      
        }
   },
   run: function() {
        if (this.isFinished())  return (this.options.onComplete || Prototype.emptyFunction)(this);
        if (this.timer)   clearTimeout(this.timer);
        this.duration -= this.fps;
        this.steps--;                            
        var pos=1-this.steps/this.maxSteps    ;    //总进度的百分比
        this.loop(this,pos);    
        (this.options.onUpdate || Prototype.emptyFunction)(this,pos);      
        this.timer = setTimeout(this.run.bind(this), this.fps);
   },
   isFinished: function() {  
           return this.steps <= 0;
   },
   setup:function(effect){       //初始化设置所有效果单元
           for(var key in Effect.Init){
            if (typeof(Effect.Init[key])!="function") continue;
            try{Effect.Init[key](this)}catch(x){}
        }
    },
   loop:function(effect,pos){           //执行所有效果单元
        for(var key in Effect.Fn){
            if (typeof(Effect.Fn[key])!="function") continue;
            try{Effect.Fn[key](effect,pos)}catch(x){}
        }
   }
}

Effect.Init.opacity=function(effect){
    if (effect.options.opacity===undefined) return;
    effect.setting.opacity=Opacity(effect.element);    
}

Effect.Fn.opacity=function(effect,pos){
    if (effect.options.opacity===undefined) return;
    Opacity(effect.element,effect.setting.opacity+(effect.options.opacity-effect.setting.opacity)*pos);    
}



     
var foo1=function(){     //最简单的调用方式
    new Effect("div1",{opacity:0.2})
}
var foo2=function(){
    new Effect("div1",{opacity:0.2,delay:3})  //延迟3秒
}
var foo3=function(){
        new Effect("div1",{opacity:0.2,duration:5})  //效果执行5秒,默认是2秒的
}
var foo4=function(){   //自定义函数
        new Effect("div1",{
            opacity:0.2,
            onStart:function(eff){alert("效果运行时注意document.title,运行后注意div内的文字")},
            onUpdate:function(eff,p){document.title=p.toFixed(2)},
            onComplete:function(eff){eff.element.innerHTML="运行完毕"}
        })  
}
var foo5=function(){    //先变淡后变深
        new Effect("div1",{opacity:0.2,onComplete:function(eff){
            new Effect(eff.element,{opacity:1,delay:1})
        }})  
}
     
function a() {
    console.log(this);
}
a.call(null);

function foo(){    
    new Effect("div1",{opacity:1,duration:1})
}


 
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 comments

Add a comment