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

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

《《潭州学院》HTML5各引擎显示效率比较.docx》由会员分享，可在线阅读，更多相关《《潭州学院》HTML5各引擎显示效率比较.docx（21页珍藏版）》请在冰豆网上搜索。

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

　　HTML5各引擎显示效率比较

　　现在越来越多的人开始尝试使用HTML5开发，HTML5的引擎也逐渐增多，开发者到底应该选择一款什么样的引擎呢？

这一次我来对比一下几个我个人认为还不错的引擎的效率。

　　本次参加对比的引擎：

　　1.createJS

　　2.cocos2d-HTML5

　　3.enchant.js

　　4.lufylegend.js

　　测试浏览器：

chrome

　　一，图片显示效率比较

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

　　1，裸奔（不用任何引擎）。

　　测试代码如下

　　1.varc=document.getElementById（"canvas"）;

　　2.varctx=c.getContext（"2d"）;

　　3.ctx.font="20pxArial";

　　4.varimg=newImage（）;

　　5.img.onload=draw;

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

　　7.varccc=[];

　　8.var$count=0;

　　9.varfps=0;

　　10.var$time=newDate（）.getTime（）;

　　11.for（vari=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.functiondraw（）{

　　17.for（vari=0;i<15000;i++）{

　　18.varco=ccc[i];

　　19.ctx.drawImage（img,0,0,20,20,co.x,co.y,20,20）;

　　20.}

　　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）;

　　30.setTimeout（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）;

　　4.loader.onFileLoad=handleFileLoad;

　　5.loader.onComplete=handleComplete;

　　6.loader.loadManifest（manifest）;

　　7.var_fps,$time,$count=0;

　　8.varimages=[];

　　9.varstage;

　　10.functionhandleFileLoad（o）{

　　11.if（o.type=="image"）{

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

　　13.}

　　14.}

　　15.functionhandleComplete（）{

　　16.stage=newcreatejs.Stage（canvas）;

　　17.createjs.Ticker.setFPS（30）;

　　18.for（vari=0;i<15000;i++）{

　　19.varbitmap=newcreatejs.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=newcreatejs.Text（"0","90016pxArial","#ffffff"）;

　　25.stage.addChild（_fps）;

　　26.$time=newDate（）.getTime（）;

　　27.createjs.Ticker.addEventListener（"tick",tick）;

　　28.}

　　29.functiontick（）{

　　30.$count++;

　　31.varnow=newDate（）.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

　　测试代码如下

　　1.varMyLayer=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.varsize=cc.Director.getInstance（）.getWinSize（）;

　　10.for（vari=0;i<15000;i++）{

　　11.varsprite=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.varMyScene=cc.Scene.extend（{

　　20.onEnter:

function（）{

　　21.this._super（）;

　　22.varlayer=newMyLayer（）;

　　23.this.addChild（layer）;

　　24.layer.init（）;

　　25.}

　　26.}）;

得到测试结果如下图

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

　　4，lufylegend.js

　　测试代码如下

　　1.init（10,"mylegend",320,480,main）;

　　2.functionmain（）{

　　3.varloader=newLLoader（）;

　　4.loader.addEventListener（LEvent.COMPLETE,loadBitmapdata）;

　　5.loader.load（"CloseNormal.png","bitmapData"）;

　　6.}

　　7.functionloadBitmapdata（event）{

　　8.varbitmapData=newLBitmapData（event.currentTarget）;

　　9.for（vari=0;i<15000;i++）{

　　10.varbitmap=newLBitmap（bitmapData）;

　　11.bitmap.x=Math.random（）*LGlobal.width-10;

　　12.bitmap.y=Math.random（）*LGlobal.height-10;

　　13.addChild（bitmap）;

　　14.}

　　15.varfps=newFPS（）;

　　16.addChild（fps）;

　　17.}

得到测试结果如下图

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

　　5，enchant.js

　　测试代码如下

　　1.enchant（）;

　　2.window.onload=function（）{

　　3.varcore=newGame（320,480）;

　　4.core.fps=30;

　　5.core.preload（'CloseNormal.png'）

　　6.core.onload=function（）{

　　7.for（vari=0;i<15000;i++）{

　　8.varbear=newenchant.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.varoldTime=newDate（）;

　　15.vartext=newLabel（）;

　　16.core.rootScene.addChild（text）;

　　17.varfps=0;

　　18.core.addEventListener（'enterframe',function（）{

　　19.fps++;

　　20.varnewTime=newDate（）;

　　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

　　测试代码如下

　　1.varcanvas=document.getElementById（"canvas"）;

　　2.var_fps,$time,$count=0;

　　3.varstage;

　　4.test（）;

　　5.functiontest（）{

　　6.stage=newcreatejs.Stage（canvas）;

　　7.createjs.Ticker.setFPS（30）;

　　8.for（vari=0;i<500;i++）{

　　9.varlabel=newcreatejs.Text（"HTML5各引擎效率比较",（10+20*Math.random（））+"pxArial","#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=newcreatejs.Text（"0","90016pxArial","#000000"）;

　　17.stage.addChild（_fps）;

　　18.$time=newDate（）.getTime（）;

　　19.createjs.Ticker.addEventListener（"tick",tick）;

　　20.}

　　21.functiontick（）{

　　22.$count++;

　　23.varnow=newDate（）.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.functionrandomColor（）{

　　32.varrand=Math.floor（Math.random（）*0xFFFFFF）.toString（16）;

　　33.if（rand.length==6）{

　　34.returnrand;

　　35.}else{

　　36.returnrandomColor（）;

　　37.}

　　38.};

得到测试结果如下图

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

　　2，enchant.js

　　测试代码如下

　　1.enchant（）;

　　2.window.onload=function（）{

　　3.varcore=newGame（320,480）;

　　4.core.fps=30;

　　5.core.onload=function（）{

　　6.for（vari=0;i<500;i++）{

　　7.varlabel=newLabel（）;

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

　　9.label.color=randomColor（）;

　　10.label.font=（10+20*Math.random（））+"pxArial";

　　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.varoldTime=newDate（）;

　　18.vartext=newLabel（）;

　　19.core.rootScene.addChild（text）;

　　20.varfps=0;

　　21.core.addEventListener（'enterframe',function（）{

　　22.fps++;

　　23.varnewTime=newDate（）;

　　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.functionrandomColor（）{

　　34.varrand=Math.floor（Math.random（）*0xFFFFFF）.toString（16）;

　　35.if（rand.length==6）{

　　36.returnrand;

　　37.}else{

　　38.returnrandomColor（）;

　　39.}

　　40.};

得到测试结果如下图

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

　　3，lufylegend.js

　　测试代码如下

　　1.init（10,"mylegend",320,480,main）;

　　2.functionmain（）{

　　3.for（vari=0;i<500;i++）{

　　4.varlabel=newLTextField（）;

　　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.varfps=newFPS（）;

　　14.addChild（fps）;

　　15.}

　　16.functionrandomColor（）{

　　17.varrand=Math.floor（Math.random（）*0xFFFFFF）.toString（16）;

　　18.if（rand.length==6）{

　　19.returnrand;

　　20.}else{

　　21.returnrandomColor（）;

　　22.}

　　23.}

得到测试结果如下图

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

　　4.cocos2d-html5

　　测试代码如下

　　1.varMyLayer=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.varsize=cc.Director.getInstance（）.getWinSize（）;

　　10.for（vari=0;i<500;i++）{

　　11.this._super（）;

　　12.varlabel=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.varMyScene=cc.Scene.extend（{

　　26.onEnter:

function（）{

　　27.this._super（）;

　　28.varlayer=newMyLayer（）;

　　29.this.addChild（layer）;

　　30.layer.init（）;

　　31.}

　　32.}）;

　　33.functionrandomColor（）{

　　34.varrand=Math.floor（Math.random（）*0xFFFFFF）.toString（16）;

　　35.if（rand.length==6）{

　　36.returnrand;

　　37.}else{

　　38.returnrandomColor（）;

　　39.}

　　40.}

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

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

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

　　1.init（1,"mylegend",320,480,main）;

　　2.functionmain（）{

　　3.for（vari=0;i<500;i++）{

　　4.varsprite=newLSprite（）;

　　5.varlabel=newLTextField（）;

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

　　7.label.size=10+20*Math.random（）;

　　8.label.color=randomColor（）;

　　9.sprite.addChild（label）;

　　10.

　　11.varbitmapData=newLBitmapData（null,0,0,label.getWidth（）,label.getHeight（））;

　　12.bitmapData.draw（sprite）;

　　13.varbitmap=newLBitmap（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.varfps=newFPS（）;

　　20.addChild（fps）;

　　21.}

　　22.functionrandomColor（）{

　　23.varrand=Math.floor（Math.random（）*0xFFFFFF）.toString（16）;

　　24.if（rand.length==6）{

　　25.returnrand;

　　26.}else{

　　27.returnrandomColor（）;

　　28.}

　　29.}

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

　　因为在canvas中显示图片要比文字的效率高很多，所以先把文字转换为图片后再显示，可以让效果达得到质的飞跃。

而这种做法在lufylegend.js里也可以轻松实现。

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

　　lufylegend.js（将文字转换