HTML5各引擎显示效率比较

HTML5各引擎显示效率比较

现在越来越多的人开始尝试使用HTML5开发，HTML5的引擎也逐渐增多，开发者到底应该选择一款什么样的引擎呢？这一次我来对比一下几个我个人认为还不错的引擎的效率。

一，图片显示效率比较

测试内容，随机在页面上显示15000个小图片。

1，裸奔(不用任何引擎)。

测试代码如下

[javascript] view plaincopy

1. var c=document.getElementById("canvas");  

2. var ctx=c.getContext("2d");  

3. ctx.font="20px Arial";  

4. var img = new Image();  

5. img.onload = draw;  

6. img.src = "CloseNormal.png";  

7. var ccc = [];  

8. var $count = 0;  

9. var fps = 0;  

10. var $time = new Date().getTime();  

11. for(var i=0;i<15000;i++){  

12.     x = Math.random()*320 - 10;  

13.     y = Math.random()*480 - 10;  

14.     ccc.push({x:x,y:y});  

15. }  

16. function draw(){  

17.     for(var i=0;i<15000;i++){  

18.         var co = ccc[i];  

19.         ctx.drawImage(img,0,0,20,20,co.x,co.y,20,20);  

20.     }  

21.       

22.     $count++;  

23.     var now = new Date().getTime();  

24.     if( now-$time>1000 ){  

25.         fps = $count;  

26.         $time = now;  

27.         $count = 0;  

28.     }  

29.     ctx.fillText(fps,1,20);  

30.     setTimeout(draw,1);  

31. }  

得到测试结果如下图

结果，裸奔的情况下，显示15000张图片，FPS在28左右。

2，createJS

测试代码如下

[javascript] view plaincopy

1. var canvas = document.getElementById("canvas");  

2. var manifest = [{id:"s_CloseNormal", src:"CloseNormal.png"}];   

3. var loader = new createjs.PreloadJS(false);  

4. loader.onFileLoad = handleFileLoad;  

5. loader.onComplete = handleComplete;  

6. loader.loadManifest(manifest);  

7. var _fps,$time,$count = 0;  

8. var images = [];  

9. var stage;  

10. function handleFileLoad(o){  

11.     if (o.type == "image") {   

12.         images[o.id] = o.result;  

13.     }  

14. }  

15. function handleComplete(){  

16.     stage = new createjs.Stage(canvas);  

17.     createjs.Ticker.setFPS(30);  

18.     for(var i=0;i<15000;i++){  

19.         var bitmap = new createjs.Bitmap(images["s_CloseNormal"]);  

20.         bitmap.x = Math.random()*320 - 10;  

21.         bitmap.y = Math.random()*480 - 10;  

22.         stage.addChild(bitmap);  

23.     }  

24.     _fps = new createjs.Text("0","900 16px Arial", "#ffffff");  

25.     stage.addChild(_fps);  

26.     $time = new Date().getTime();  

27.     createjs.Ticker.addEventListener("tick", tick);  

28. }  

29. function tick(){  

30.     $count++;  

31.     var now = new Date().getTime();  

32.     if( now-$time>1000 ){  

33.         _fps.text = "fps:"+ Math.round( $count*10000 / (now-$time))/10;  

34.         $time = now;  

35.         $count = 0;  

36.     }  

37.     stage.update();  

38. }  

得到测试结果如下图

结果，createJS显示15000张图片，FPS大约在17左右

3，cocos2d-html5

测试代码如下

[javascript] view plaincopy

1. var MyLayer = cc.Layer.extend({  

2.     isMouseDown:false,  

3.     helloImg:null,  

4.     helloLabel:null,  

5.     circle:null,  

6.     sprite:null,  

7.     init:function () {  

8.         this._super();  

9.         var size = cc.Director.getInstance().getWinSize();  

10.         for(var i=0;i<15000;i++){  

11.             var sprite = cc.Sprite.create(s_CloseNormal);  

12.             sprite.setPosition(size.width*Math.random(), size.height*Math.random());  

13.             this.addChild(sprite, 0);  

14.         }  

15.   

16.     }  

17. });  

18.   

19. var MyScene = cc.Scene.extend({  

20.     onEnter:function () {  

21.         this._super();  

22.         var layer = new MyLayer();  

23.         this.addChild(layer);  

24.         layer.init();  

25.     }  

26. });  

得到测试结果如下图

结果，cocos2d-html5显示15000张图片，FPS大约在19左右

4，lufylegend.js

测试代码如下

[javascript] view plaincopy

1. init(10,"mylegend",320,480,main);  

2. function main(){  

3.     var loader = new LLoader();    

4.     loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);    

5.     loader.load("CloseNormal.png","bitmapData");    

6. }  

7. function loadBitmapdata(event){  

8.     var bitmapData = new LBitmapData(event.currentTarget);  

9.     for(var i=0;i<15000;i++){  

10.         var bitmap = new LBitmap(bitmapData);  

11.         bitmap.x = Math.random()*LGlobal.width - 10;  

12.         bitmap.y = Math.random()*LGlobal.height - 10;  

13.         addChild(bitmap);  

14.     }  

15.     var fps = new FPS();  

16.     addChild(fps);  

17. }  

得到测试结果如下图

结果，lufylegend.js显示15000张图片，FPS大约在25左右
5，enchant.js

测试代码如下

[javascript] view plaincopy

1. enchant();  

2. window.onload = function(){  

3.     var core = new Game(320, 480);  

4.     core.fps = 30;  

5.     core.preload('CloseNormal.png')  

6.     core.onload = function(){  

7.         for(var i=0;i<15000;i++){  

8.             var bear = new enchant.Sprite(20, 20);  

9.             bear.image = core.assets['CloseNormal.png'];  

10.             bear.moveTo(Math.random()*320 - 10, Math.random()*480 - 10);  

11.             core.rootScene.addChild(bear);  

12.         }  

13.           

14.         var oldTime = new Date();  

15.         var text = new Label();  

16.         core.rootScene.addChild(text);  

17.         var fps = 0;  

18.         core.addEventListener('enterframe', function(){  

19.             fps++;  

20.             var newTime = new Date();  

21.             if(newTime.getTime() - oldTime.getTime() >= 1000){  

22.                 text.text = fps + " FPS";  

23.                 fps = 0;  

24.                 oldTime = newTime;  

25.             }  

26.         });  

27.     };  

28.     core.start();  

29. };  

得到测试结果如下图

结果，enchant.js显示15000张图片，FPS大约在13左右

得出结论，在显示图片上，各个引擎的效率如下

裸奔 > lufylegend.js > cocos-html5 > createJS > enchant.js

二，文字显示效率比较

测试内容，随机在页面上显示500个文字对象，并且随机设置它们的颜色和旋转。

1，createJS

测试代码如下

[javascript] view plaincopy

1. var canvas = document.getElementById("canvas");  

2. var _fps,$time,$count = 0;  

3. var stage;  

4. test();  

5. function test(){  

6.     stage = new createjs.Stage(canvas);  

7.     createjs.Ticker.setFPS(30);  

8.     for(var i=0;i<500;i++){  

9.         var label = new createjs.Text("HTML5各引擎效率比较",(10 + 20*Math.random())+"px Arial", "#ffffff");  

10.         label.color = randomColor();  

11.         label.rotation = 180*Math.random()/Math.PI;  

12.         label.x = Math.random()*320 - 50;  

13.         label.y = Math.random()*480;  

14.         stage.addChild(label);  

15.     }  

16.     _fps = new createjs.Text("0","900 16px Arial", "#000000");  

17.     stage.addChild(_fps);  

18.     $time = new Date().getTime();  

19.     createjs.Ticker.addEventListener("tick", tick);  

20. }  

21. function tick(){  

22.     $count++;  

23.     var now = new Date().getTime();  

24.     if( now-$time>1000 ){  

25.         _fps.text = "fps:"+ Math.round( $count*10000 / (now-$time))/10;  

26.         $time = now;  

27.         $count = 0;  

28.     }  

29.     stage.update();  

30. }  

31. function randomColor(){  

32.     var rand = Math.floor(Math.random() * 0xFFFFFF).toString(16);  

33.     if(rand.length == 6){  

34.         return rand;  

35.     }else{  

36.         return randomColor();  

37.     }  

38. };  

得到测试结果如下图

结果，createJS显示500个文字，FPS大约在12左右

2，enchant.js

测试代码如下

[javascript] view plaincopy

1. enchant();  

2. window.onload = function(){  

3.     var core = new Game(320, 480);  

4.     core.fps = 30;  

5.     core.onload = function(){  

6.         for(var i=0;i<500;i++){  

7.             var label = new Label();  

8.             label.text = "HTML5各引擎效率比较";  

9.             label.color = randomColor();  

10.             label.font = (10 + 20*Math.random())+"px Arial";  

11.             label.rotation = 180*Math.random()/Math.PI;  

12.             label.x = Math.random()*320 - 50;  

13.             label.y = Math.random()*480;  

14.             core.rootScene.addChild(label);  

15.         }  

16.           

17.         var oldTime = new Date();  

18.         var text = new Label();  

19.         core.rootScene.addChild(text);  

20.         var fps = 0;  

21.         core.addEventListener('enterframe', function(){  

22.             fps++;  

23.             var newTime = new Date();  

24.             if(newTime.getTime() - oldTime.getTime() >= 1000){  

25.                 text.text = Math.round( fps*10000 / (newTime.getTime() - oldTime.getTime()))/10 + " FPS";  

26.                 fps = 0;  

27.                 oldTime = newTime;  

28.             }  

29.         });  

30.     };  

31.     core.start();  

32. };  

33. function randomColor(){  

34.     var rand = Math.floor(Math.random() * 0xFFFFFF).toString(16);  

35.     if(rand.length == 6){  

36.         return rand;  

37.     }else{  

38.         return randomColor();  

39.     }  

40. };  

得到测试结果如下图

结果，enchant.js显示500个文字，FPS大约在12左右

3，lufylegend.js

测试代码如下

[javascript] view plaincopy

1. init(10,"mylegend",320,480,main);  

2. function main(){  

3.     for(var i=0;i<500;i++){  

4.         var label = new LTextField();  

5.         label.text = "HTML5各引擎效率比较";  

6.         label.size = 10 + 20*Math.random();  

7.         label.color = randomColor();  

8.         label.rotate = 180*Math.random()/Math.PI;  

9.         label.x = Math.random()*LGlobal.width - 50;  

10.         label.y = Math.random()*LGlobal.height;  

11.         addChild(label);  

12.     }  

13.     var fps = new FPS();  

14.     addChild(fps);  

15. }  

16. function randomColor(){  

17.     var rand = Math.floor(Math.random() * 0xFFFFFF).toString(16);  

18.     if(rand.length == 6){  

19.         return rand;  

20.     }else{  

21.         return randomColor();  

22.     }  

23. }  

得到测试结果如下图

结果，lufylegend.js显示500个文字，FPS大约在21左右

4.cocos2d-html5

测试代码如下

[javascript] view plaincopy

1. var MyLayer = cc.Layer.extend({  

2.     isMouseDown:false,  

3.     helloImg:null,  

4.     helloLabel:null,  

5.     circle:null,  

6.     sprite:null,  

7.     init:function () {  

8.         this._super();  

9.         var size = cc.Director.getInstance().getWinSize();  

10.         for(var i=0;i<500;i++){  

11.             this._super();  

12.             var label = cc.LabelTTF.create();  

13.             label.setFontName("Arial");  

14.             label.setFontSize(10 + 20*Math.random());  

15.             label.setString("HTML5各引擎效率比较");  

16.             label.setColor(cc.c3b(255*Math.random(), 255*Math.random(), 255*Math.random()));  

17.             label.setRotation(180*Math.random()/Math.PI);  

18.             this.addChild(label);  

19.             label.setPosition(size.width*Math.random(), size.height*Math.random());  

20.         }  

21.   

22.     }  

23. });  

24.   

25. var MyScene = cc.Scene.extend({  

26.     onEnter:function () {  

27.         this._super();  

28.         var layer = new MyLayer();  

29.         this.addChild(layer);  

30.         layer.init();  

31.     }  

32. });  

33. function randomColor(){  

34.     var rand = Math.floor(Math.random() * 0xFFFFFF).toString(16);  

35.     if(rand.length == 6){  

36.         return rand;  

37.     }else{  

38.         return randomColor();  

39.     }  

40. }  

得到测试结果如下图

结果，cocos2d-html5显示500个文字，FPS大约在90左右

此结果让我吃了一惊，cocos2d-html5达到了惊人的90fps，你一定会问，为什么？

稍等，我们把lufylegend.js的测试代码稍作改动，来再次测试一下，测试代码如下。

[javascript] view plaincopy

1. init(1,"mylegend",320,480,main);  

2. function main(){  

3.     for(var i=0;i<500;i++){  

4.         var sprite = new LSprite();  

5.         var label = new LTextField();  

6.         label.text = "HTML5各引擎效率比较";  

7.         label.size = 10 + 20*Math.random();  

8.         label.color = randomColor();  

9.         sprite.addChild(label);  

10.           

11.         var bitmapData = new LBitmapData(null,0,0,label.getWidth(),label.getHeight());  

12.         bitmapData.draw(sprite);  

13.         var bitmap = new LBitmap(bitmapData);  

14.         bitmap.rotate = 180*Math.random()/Math.PI;  

15.         bitmap.x = Math.random()*LGlobal.width - 50;  

16.         bitmap.y = Math.random()*LGlobal.height;  

17.         addChild(bitmap);  

18.     }  

19.     var fps = new FPS();  

20.     addChild(fps);  

21. }  

22. function randomColor(){  

23.     var rand = Math.floor(Math.random() * 0xFFFFFF).toString(16);  

24.     if(rand.length == 6){  

25.         return rand;  

26.     }else{  

27.         return randomColor();  

28.     }  

29. }  

得到测试结果如下图

结果显示，lufylegend.js显示500个文字时，如果先将文字转换为图片，则FPS大约在146左右

因为在canvas中显示图片要比文字的效率高很多，所以先把文字转换为图片后再显示，可以让效果达得到质的飞跃。而这种做法在lufylegend.js里也可以轻松实现。

结论，在显示文字上，各个引擎的效率如下

 lufylegend.js(将文字转换为LBitmapData) > cocos2d-html5 > lufylegend.js > createJS = enchant.js

综合两个测试，各引擎效率如下：

lufylegend.js > cocos2d-html5 > createJS > enchant.js

注：此结果是canvas下的测试结果，cocos2d-html5同时支持多种渲染，可自动切换到WebGL进行高效渲染，和canvas不是一个档次，不在本次测试比较范围。关于cocos2d-html5开启webgl后的效果看下面截图，为15000张图片渲染结果，满帧显示。

以上测试可以给大家当作一个参考，如果我的测试方法不当，欢迎提出。

可以看到，使用canvas开发游戏，只要开发方法得当，lufylegend.js在效率上可以完胜其他引擎，当然，各个引擎都有自己的优势，createjs和flash之间的完美转换，cocos2d-html5的JSB绑定，该怎么选，大家各取所需吧。