egret，laya，pixi性能测试

最近的一个微信小游戏项目对性能的要求比较高，在老大的推荐接触了pixi，便简单测试一下pixi和两款常见的国产引擎的性能差异。
本次测试将从三个方面进行：
1. 文本
2. 序列帧
3. spine动画

1.文本

egret：

private testTextField() {
        for (let i = 0; i < 1000; i++) {
            let tf: egret.TextField = new egret.TextField();
            tf.text = "测试";
            tf.size = 20;
            tf.x = this.stage.width * Math.random();
            tf.y = this.stage.height * Math.random();
            egret.Tween.get(tf, { loop: true })
                .to({ rotation: 360 }, 2000)
                .call(() => {
                    tf.rotation = 0;
                })
            this.stage.addChild(tf);
        }
    }

pixi：

private testTextField() {
        for (let i = 0; i < 10000; i++) {
            let tf: PIXI.Text = new PIXI.Text("测试");
            tf.x = Main.App.stage.width * Math.random();
            tf.y = Main.App.stage.height * Math.random();
            createjs.Tween.get(tf, { loop: -1 })
                .to({ rotation: 360 }, 2000)
                .call(() => {
                    tf.rotation = 0;
                });
            Main.App.stage.addChild(tf);
        }
        console.log("end")
    }

laya：

for(let i = 0;i<10000;i++){
			var test:Laya.Text = new Laya.Text();
		test.text = "测试";
		test.color =" #ffffff";
		test.pos(Laya.stage.width*Math.random(),Laya.stage.height*Math.random());
		 Laya.Tween.to(test,{rotation:360},2000,Laya.Ease.linearNone, Laya.Handler.create(this,this.changeRotation,[test]),0,true,true).repeat = 0;
		Laya.stage.addChild(test);
		}

private changeRotation(text:Laya.Text) {
		text.rotation = 0;
	}

测试结果如下：

2.序列帧

egret：

private testMovieClip() {
        let json = RES.getRes("mcTest_json");
        let png = RES.getRes("mcTest_png");
        let mcdf = new egret.MovieClipDataFactory(json, png);
        for (let i = 0; i < 1000; i++) {
            let mc = new egret.MovieClip(mcdf.generateMovieClipData());
            mc.x = this.stage.width * Math.random();
            mc.y = this.stage.height * i/1000;
            mc.width = 25;
            mc.height = 25;
            this.stage.addChild(mc);
            mc.play(-1);
        }
    }

pixi：

 private testXLZ() {
        PIXI.loader.add("pixitest", "resource/pixitest.json", { loadType: PIXI.loaders.Resource.LOAD_TYPE.XHR, xhrType: PIXI.loaders.Resource.XHR_RESPONSE_TYPE.JSON })
            .on("complete", () => {
                console.log(PIXI.loader.resources);
                const textures = [];
                let i;
                for (i = 0; i < 8; i++) {
                    const framekey = `IMG0000${i}.bmp`;
                    const texture = PIXI.Texture.from(framekey);
                    const time = 20;
                    textures.push({ texture, time });
                }
                for (let i = 0; i < 20000; i++) {
                    let anim = new PIXI.extras.AnimatedSprite(textures);
                    anim.width = 50;
                    anim.height = 50;
                    anim.loop = true;
                    anim.x = Main.App.stage.width * Math.random();
                    anim.y = Main.App.stage.height * Math.random();
                    anim.play();
                    Main.App.stage.addChild(anim);
                }

            }, this)
            .load();
    }

laya：

for(let i = 0;i<1000;i++){
			let anim:Laya.Animation = new Laya.Animation();
			anim.loadAtlas("res/atlas/anim.atlas",Laya.Handler.create(this,this.anim,[anim]));
		}

private anim(ani:Laya.Animation){
		ani.pos(Laya.stage.width*Math.random(),Laya.stage.height*Math.random());
		Laya.stage.addChild(ani);
		ani.play(0,true);
	}

测试结果如下：

3.spine动画

egret：

pixi：

private testSpine() {

        PIXI.loader.add("spineboy", "resource/spineboy/spineboy.json", { loadType: PIXI.loaders.Resource.LOAD_TYPE.XHR, xhrType: PIXI.loaders.Resource.XHR_RESPONSE_TYPE.JSON })
            .on("complete", () => {
            //    console.log(PIXI.loader.resources);
            for(let i = 0;i<1000;i++){
                console.log("1");
                var animation = new PIXI.spine.Spine(PIXI.loader.resources["spineboy"].spineData);
                Main.App.stage.addChild(animation);
                //  console.log(animation);
                 animation.x = Math.floor( Main.App.stage.width * i/1000);
                    animation.y =  Math.floor(Main.App.stage.height * i/450);
                    animation.scale = new PIXI.Point(0.2,0.2);
                    // animation.state.st
                     animation.state.addAnimationByName(0, 'jump', true, 0); 
            }
                
            })
            .load();
    }

laya：

测试结果如下：
emmmm，，egret和laya的没时间去测了（其实我是懒得去转spine的格式），大家有兴趣可以自己试试。

总结：

egret的性能在常见的几款h5游戏引擎中并不算是很好，但是胜在方便，有一套完整的工具链；laya作为部分人口中的“性能之王”有些言过其实，在动画的处理上并不出彩；pixi说它是最快的webgl渲染“引擎”实至名归，但是对国内的开发者并不友好，网上的中文教程很少，想体验pixi的推荐学习phaser点我，这算是世界上最火的h5引擎了，内核是pixi。
本次测试所有代码已上传到百度云：点我