《潭州学院》HTML5各引擎显示效率比较

1、HTML5各引擎显示效率比较现在越来越多的人开始尝试使用HTML5开发，HTML5勺引擎也逐渐增多，开发者到底应该选择一款什么样的引擎呢？这一次我来对比一下几个我个人认为还不错的引擎的效率。本次参加对比的引擎：1. createJS2. cocos2d-HTML53. enchant.js4. lufylegend.js测试浏览器：chrome一，图片显示效率比较测试内容，随机在页面上显示15000个小图片。1，裸奔(不用任何引擎)。测试代码如下1. varc=document.getElementById(canvas);2. varctx=c.getContext(2d);20pxAria

2、l;4.varimg=newImage();CloseNormal.png;7. varccc=;8. var$count=0;9. varfps=0;10. var$time=newDate().getTime();11. for(vari=0;i15000;i+)12. x=Math.random()*320-10;13. y=Math.random()*480-10;,y:y);15. 16. functiondraw()17. for(vari=0;i1000)25. fps=$count;26. $time=now;27. $count=0;28. ,1,20);30.setTime

3、out(draw,1);31.得到测试结果如下图结果，裸奔的情况下，显示15000张图片，FPS在28左右2，createJS测试代码如下1. varcanvas=document.getElementById(canvas);2. varmanifest=id:s_CloseNormal,src:CloseNormal.png;3. varloader=newcreatejs.PreloadJS(false);7. var_fps,$time,$count=0;8. varimages=;9. varstage;10. functionhandleFileLoad(o)11.if(o.typ

4、e=image)12.imageso.id=o.result;13. 15. functionhandleComplete()16. stage=newcreatejs.Stage(canvas);18. for(vari=0;i1000)_fps.text=fps:+Math.round($count*10000/(now-$time)/10;33. $time=now;34. $count=0;35. 38.得到测试结果如下图结果，createJS显示15000张图片，FPS大约在17左右3，cocos2d-html5测试代码如下1. varMyLayer=2.isMouseDown:fa

5、lse,3. helloImg:null,4. helloLabel:null,5. circle:null,6. sprite:null,7.init:function()8. this._super();9. varsize=;10. for(vari=0;i15000;i+)11. varsprite=;,size.height*Math.random();,0);14. 15.16.17. );18.19. varMyScene=20.onEnter:function()21. this._super();22. varlayer=newMyLayer();25. 26. );得到测试

6、结果如下图结果，cocos2d-html5显示15000张图片，FPS大约在19左右4，lufylegend.js测试代码如下1.init(10,mylegend,320,480,main);2. functionmain()3. varloader=newLLoader();,loadBitmapdata);CloseNormal.png,bitmapData);7. functionloadBitmapdata(event)8. varbitmapData=newLBitmapData(event.currentTarget);9. for(vari=0;i15000;i+)10. var

7、bitmap=newLBitmap(bitmapData);13. addChild(bitmap);14. 15. varfps=newFPS();16. addChild(fps);17. 得到测试结果如下图结果，lufylegend.js显示15000张图片，FPS大约在25左右5，enchant.js测试代码如下1. enchant();3.varcore=newGame(320,480);7. for(vari=0;i=1000)FPS;23. fps=0;24.oldTime=newTime;25. 26. );27. ;29. ;得到测试结果如下图结果，enchant.js显示1

8、5000张图片，FPS大约在13左右得出结论，在显示图片上，各个引擎的效率如下裸奔lufylegend.jscocos-html5createJSenchant.js二，文字显示效率比较测试内容，随机在页面上显示500个文字对象，并且随机设置它们的颜色和旋转。1，createJS测试代码如下1.varcanvas=document.getElementById(canvas);2. var_fps,$time,$count=0;3. varstage;4. test();5. functiontest()6. stage=newcreatejs.Stage(canvas);8.for(vari

9、=0;i1000)25._fps.text=fps:+Math.round($count*10000/(now-$time)/10;26.$time=now;27. $count=0;28. 30. 31. functionrandomColor()32. varrand=Math.floor(Math.random()*0xFFFFFF).toString(16);33.if(rand.length=6)34. returnrand;35. else36. returnrandomColor();37. 38. ;得到测试结果如下图结果，createJS显示500个文字，FPS大约在12左右

10、2，enchant.js测试代码如下1. enchant();3. varcore=newGame(320,480);6.for(vari=0;i=1000)FPS;26.fps=0;27.oldTime=newTime;28. 29. );32. ;33. functionrandomColor()34. varrand=Math.floor(Math.random()*0xFFFFFF).toString(16);35.if(rand.length=6)36. returnrand;37. else38. returnrandomColor();39. 40. ;得到测试结果如下图结果，e

11、nchant.js显示500个文字，FPS大约在12左右3，lufylegend.js测试代码如下1.init(10,mylegend,320,480,main);2. functionmain()3. for(vari=0;i500;i+)4. varlabel=newLTextField();HTML5各引擎效率比较;11. addChild(label);12. 13. varfps=newFPS();14. addChild(fps);15. 16. functionrandomColor()17. varrand=Math.floor(Math.random()*0xFFFFFF).

12、toString(16);18.if(rand.length=6)19. returnrand;20. else21. returnrandomColor();22. 23. 得到测试结果如下图结果，lufylegend.js显示500个文字，FPS大约在21左右4. cocos2d-html5测试代码如下1. varMyLayer=2.isMouseDown:false,3. helloImg:null,4. helloLabel:null,5. circle:null,6. sprite:null,7.init:function()8. this._super();9. varsize=;

13、10. for(vari=0;i500;i+)11. this._super();12. varlabel=;Arial);HTML5各引擎效率比较);,255*Math.random(),255*Math.random();,size.height*Math.random();20. 21.22.24.25. varMyScene=26.onEnter:function()27.this._super();28.varlayer=newMyLayer();31.32.);33. functionrandomColor()34. varrand=Math.floor(Math.random()

14、*0xFFFFFF).toString(16);35.if(rand.length=6)36. returnrand;37. else38. returnrandomColor();得到测试结果，cocos2d-html5显示500个文字，FPS大约在90左右此结果让我吃了一惊，cocos2d-html5达到了惊人的90fps，你一定会问，为什么？稍等，我们把lufylegend.js的测试代码稍作改动，来再次测试一下，测试代码如下。1.init(1,mylegend,320,480,main);2. functionmain()3. for(vari=0;icocos2d-html5lufylegend.jscreateJS=enchant.js综合两个测试，各引擎效率如下：lufylegend.jscocos2d-html5createJSenchant.js注：此结果是canvas下的测试结果，cocos2d-html5同时支持多种渲染，可自动切换到WebGl进行高效渲染，和ca