《潭州学院》HTML5各引擎显示效率比较_第1页
《潭州学院》HTML5各引擎显示效率比较_第2页
《潭州学院》HTML5各引擎显示效率比较_第3页
已阅读5页,还剩19页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

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

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论