资源描述:
《《潭州学院》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〃);3.ctx.fo
2、nt=z/20pxArial”;4.varimg^newlmage();5.img.onload=draw;6.img.src=〃CloseNormal.png〃;7.varccc=[];8.var$count=0;1.varfps=0;2.var$time=newDate().getTime():3.for(va;i++){4.x=Math.random()*320-10;5.y=Math.random()*480-10;6.ccc.push({x:x,y:y});7.}8.functiondraw(){9.fo5000;i++){10.varco=ccc[i];11.ctx•d
3、rawlmage(img,0,0,20,20,co.x,co.y,20,20):12.}21.22.$count++;23.varnow=newDate().getTime();24.if(now-$time>1000){25.fps=$count;26.$time=now;27.$count=0;28.}29.ctx.fillText(fps,1,20):22.setTimeout(draw,1):23.}得到测试结果如下结果,裸奔的情况下,显示15000张图片,FPS在28左右。2,createJS测试代码如下1.varcanvas=document.getElementByI
4、d(〃canvas〃);2.varmanifest=[{id:〃s_CloseNormal’’,src:"CloseNormal.png"}];3.varloader=newcreatejs.PreloadJS(false):1.loader.onFileLoad^handleFileLoad;2.loader.onComplete=hand1eComp1ete;3.loader.loadManifest(manifest):4.var_fps,$time,$count=0;5.varimages=[]:6.varstage;7.functionhandleFileLoad(o){
5、8.if(o.type=〃image”){9.images[o.id]=o.result;10.}11.}12.functionhandleComplete(){13.stage=newcreatejs.Stage(canvas):14.ereatejs.Ticker.setFPS(30):15.for(vari++){16.varbitmap=newcreatejs.Bitmap(images[〃s_CloseNormal〃]);17.bitmap.x=Math.random()*320-10;18.bitmap.尸Math,random0*480-10;19.stage.add
6、Child(bitmap):20.}1._fps=newereatejs.Text("0","90016pxArial",;25.stage.addChild(_fps);26.$time=newDate().getTime():27.createjs.Ticker.addEventListener(〃tick〃,tick);28.}29.functiontickO{30.$count++;31.varnow=newDate().getTime():32.if(now-$time>1000){33._fps.text=/zfps:/Z+Math.round($count*10000
7、/(now-$time))/10;34.$time=now;35.$count=0;36.}37.stage,update();38.}得到测试结果如下图结果,createJS显示15000张图片,FPS大约在17左右3,cocos2d-html5测试代码如下1.varMyLayer=cc.Layer,extend({2.isMouseDown:false,3.hellolmg:null,4.helloLabel:null,5.circle:null,6.sprite