《潭州学院》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（将文字转换
升级会员 