Comparison of display efficiency of HTML5 Engines

Now more and more people are trying to use HTML5 for development, and HTML5 engines are also increasing. What kind of engine should Developers choose? This time I will compare the efficiency of several engines I personally think are not bad.

Engines for comparison:

1. createJS

Http://www.createjs.com/

2. cocos2d-HTML5

Http://www.cocos2d-x.org/wiki/Cocos2d-html5

3. enchant. js

Http://enchantjs.com/

4. lufylegend. js

Http://lufylegend.com/lufylegend

Test Browser:Chrome

1. Comparison of image display efficiency

Test content: 15000 small images are randomly displayed on the page.

1. streaking (without any engine ).

The test code is as follows:

var c=document.getElementById("canvas");var ctx=c.getContext("2d");ctx.font="20px Arial";var img = new Image();img.onload = draw;img.src = "CloseNormal.png";var ccc = [];var $count = 0;var fps = 0;var $time = new Date().getTime();for(var i=0;i<15000;i++){x = Math.random()*320 - 10;y = Math.random()*480 - 10;ccc.push({x:x,y:y});}function draw(){for(var i=0;i<15000;i++){var co = ccc[i];ctx.drawImage(img,0,0,20,20,co.x,co.y,20,20);}$count++;var now = new Date().getTime();if( now-$time>1000 ){fps = $count;$time = now;$count = 0;}ctx.fillText(fps,1,20);setTimeout(draw,1);}

The test result is as follows:

As a result, 15000 images are displayed in streaking mode, and the FPS is around 28.

2. createJS

The test code is as follows:

var canvas = document.getElementById("canvas");var manifest = [{id:"s_CloseNormal", src:"CloseNormal.png"}]; var loader = new createjs.PreloadJS(false);loader.onFileLoad = handleFileLoad;loader.onComplete = handleComplete;loader.loadManifest(manifest);var _fps,$time,$count = 0;var images = [];var stage;function handleFileLoad(o){if (o.type == "image") { images[o.id] = o.result;}}function handleComplete(){stage = new createjs.Stage(canvas);createjs.Ticker.setFPS(30);for(var i=0;i<15000;i++){var bitmap = new createjs.Bitmap(images["s_CloseNormal"]);bitmap.x = Math.random()*320 - 10;bitmap.y = Math.random()*480 - 10;stage.addChild(bitmap);}_fps = new createjs.Text("0","900 16px Arial", "#ffffff");stage.addChild(_fps);$time = new Date().getTime();createjs.Ticker.addEventListener("tick", tick);}function tick(){$count++;var now = new Date().getTime();if( now-$time>1000 ){_fps.text = "fps:"+ Math.round( $count*10000 / (now-$time))/10;$time = now;$count = 0;}stage.update();}

The test result is as follows:

As a result, createJS displays 15000 images with an FPS of about 17.

3, cocos2d-html5

The test code is as follows:

var MyLayer = cc.Layer.extend({    isMouseDown:false,    helloImg:null,    helloLabel:null,    circle:null,    sprite:null,    init:function () {        this._super();        var size = cc.Director.getInstance().getWinSize();for(var i=0;i<15000;i++){        var sprite = cc.Sprite.create(s_CloseNormal);        sprite.setPosition(size.width*Math.random(), size.height*Math.random());        this.addChild(sprite, 0);        }    }});var MyScene = cc.Scene.extend({    onEnter:function () {        this._super();        var layer = new MyLayer();        this.addChild(layer);        layer.init();    }});

The test result is as follows:

As a result, the cocos2d-html5 showed 15000 images with FPS around 19

4. lufylegend. js

The test code is as follows:

init(10,"mylegend",320,480,main);function main(){var loader = new LLoader();  loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);  loader.load("CloseNormal.png","bitmapData");  }function loadBitmapdata(event){var bitmapData = new LBitmapData(event.currentTarget);for(var i=0;i<15000;i++){var bitmap = new LBitmap(bitmapData);bitmap.x = Math.random()*LGlobal.width - 10;bitmap.y = Math.random()*LGlobal.height - 10;addChild(bitmap);}var fps = new FPS();addChild(fps);}

The test result is as follows:

As a result, lufylegend. js displays 15000 images with an FPS of about 25.
5. enchant. js

The test code is as follows:

enchant();window.onload = function(){    var core = new Game(320, 480);    core.fps = 30;    core.preload('CloseNormal.png')    core.onload = function(){for(var i=0;i<15000;i++){        var bear = new enchant.Sprite(20, 20);        bear.image = core.assets['CloseNormal.png'];        bear.moveTo(Math.random()*320 - 10, Math.random()*480 - 10);        core.rootScene.addChild(bear);        }                var oldTime = new Date();        var text = new Label();        core.rootScene.addChild(text);        var fps = 0;        core.addEventListener('enterframe', function(){            fps++;            var newTime = new Date();            if(newTime.getTime() - oldTime.getTime() >= 1000){            text.text = fps + " FPS";            fps = 0;            oldTime = newTime;            }        });    };    core.start();};

The test result is as follows:

As a result, 15000 images are displayed in enchant. js, And the FPS is about 13.

It is concluded that the efficiency of each engine on the display image is as follows:

Lufylegend. js> cocos-html5> createJS> enchant. js

2. text display Efficiency Comparison

Test content: 500 text objects are displayed randomly on the page, and their colors and rotation are set randomly.

1. createJS

The test code is as follows:

Var canvas = document. getElementById ("canvas"); var _ fps, $ time, $ count = 0; var stage; test (); function test () {stage = new createjs. stage (canvas); createjs. ticker. setFPS (30); for (var I = 0; I <500; I ++) {var label = new createjs. text ("Comparison of HTML5 engines in efficiency", (10 + 20 * Math. random () + "px Arial", "# ffffff"); label. color = randomColor (); label. rotation = 180 * Math. random ()/Math. PI; label. x = Math. random () * 320-50; label. y = Math. random () * 480; stage. addChild (label);} _ fps = new createjs. text ("0", "900 16px Arial", "#000000"); stage. addChild (_ fps); $ time = new Date (). getTime (); createjs. ticker. addEventListener ("tick", tick);} function tick () {$ count ++; var now = new Date (). getTime (); if (now-$ time> 1000) {_ fps. text = "fps:" + Math. round ($ count * 10000/(now-$ time)/10; $ time = now; $ count = 0;} stage. update ();} function randomColor () {var rand = Math. floor (Math. random () * 0 xFFFFFF ). toString (16); if (rand. length = 6) {return rand;} else {return randomColor ();}};

The test result is as follows:

As a result, createJS displays 500 texts, with an FPS of about 12.

2. enchant. js

The test code is as follows:

Enchant (); window. onload = function () {var core = new Game (320,480); core. fps = 30; core. onload = function () {for (var I = 0; I <500; I ++) {var label = new Label (); label. text = "HTML5 Engine Efficiency Comparison"; label. color = randomColor (); label. font = (10 + 20 * Math. random () + "px Arial"; label. rotation = 180 * Math. random ()/Math. PI; label. x = Math. random () * 320-50; label. y = Math. random () * 480; core. rootScene. addChild (label);} var oldTime = new Date (); var text = new Label (); core. rootScene. addChild (text); var fps = 0; core. addEventListener ('enterframework', function () {fps ++; var newTime = new Date (); if (newTime. getTime ()-oldTime. getTime ()> = 1000) {text. text = Math. round (fps * 10000/(newTime. getTime ()-oldTime. getTime ()/10 + "FPS"; fps = 0; oldTime = newTime ;}}) ;}; core. start () ;}; function randomColor () {var rand = Math. floor (Math. random () * 0 xFFFFFF ). toString (16); if (rand. length = 6) {return rand;} else {return randomColor ();}};

The test result is as follows:

As a result, enchant. js displays 500 texts, with an FPS of about 12.

3. lufylegend. js

The test code is as follows:

Init (10, "mylegend", 320,480, main); function main () {for (var I = 0; I <500; I ++) {var label = new LTextField (); label. text = "HTML5 Engine Efficiency Comparison"; label. size = 10 + 20 * Math. random (); label. color = randomColor (); label. rotate = 180 * Math. random ()/Math. PI; label. x = Math. random () * LGlobal. width-50; label. y = Math. random () * LGlobal. height; addChild (label);} var fps = new FPS (); addChild (fps);} function randomColor () {var rand = Math. floor (Math. random () * 0 xFFFFFF ). toString (16); if (rand. length = 6) {return rand;} else {return randomColor ();}}

The test result is as follows:

As a result, lufylegend. js displays 500 characters, and the FPS is about 21.

4. cocos2d-html5

The test code is as follows:

Var MyLayer = cc. layer. extend ({isMouseDown: false, helloImg: null, helloLabel: null, circle: null, sprite: null, init: function () {this. _ super (); var size = cc. director. getInstance (). getWinSize (); for (var I = 0; I <500; I ++) {this. _ super (); var label = cc. labelTTF. create (); label. setFontName ("Arial"); label. setFontSize (10 + 20 * Math. random (); label. setString ("Comparison of HTML5 engines"); label. setColor (cc. c3b (255 * Math. random (), 255 * Math. random (), 255 * Math. random (); label. setRotation (180 * Math. random ()/Math. PI); this. addChild (label); label. setPosition (size. width * Math. random (), size. height * Math. random () ;}}); var MyScene = cc. scene. extend ({onEnter: function () {this. _ super (); var layer = new MyLayer (); this. addChild (layer); layer. init () ;}}); function randomColor () {var rand = Math. floor (Math. random () * 0 xFFFFFF ). toString (16); if (rand. length = 6) {return rand;} else {return randomColor ();}}

The test result is as follows:

As a result, the cocos2d-html5 displays 500 characters, with FPS around 90.

This result surprised me, cocos2d-html5 reached an astonishing 90fps, you will certainly ask, why?

Wait a moment. Let's make some changes to the lufylegend. js test code to test it again. The test code is as follows.

Init (1, "mylegend", 320,480, main); function main () {for (var I = 0; I <500; I ++) {var sprite = new LSprite (); var label = new LTextField (); label. text = "HTML5 Engine Efficiency Comparison"; label. size = 10 + 20 * Math. random (); label. color = randomColor (); sprite. addChild (label); var bitmapData = new LBitmapData (null, 0, 0, label. getWidth (), label. getHeight (); bitmapData. draw (sprite); var bitmap = new LBitmap (bitmapData); bitmap. rotate = 180 * Math. random ()/Math. PI; bitmap. x = Math. random () * LGlobal. width-50; bitmap. y = Math. random () * LGlobal. height; addChild (bitmap);} var fps = new FPS (); addChild (fps);} function randomColor () {var rand = Math. floor (Math. random () * 0 xFFFFFF ). toString (16); if (rand. length = 6) {return rand;} else {return randomColor ();}}

The test result is as follows:

The results show that when lufylegend. js displays 500 texts, if the text is first converted to an image, the FPS is about 146.

Because Image Display in canvas is much more efficient than text display, you can convert the text into an image and then display it. This method can also be easily implemented in lufylegend. js.

Conclusion: the efficiency of each engine in display text is as follows:

Lufylegend. js (convert text to LBitmapData)> cocos2d-html5> lufylegend. js> createJS = enchant. js

Based on the two tests, the efficiency of each engine is as follows:

Lufylegend. js> cocos2d-html5>CreateJS > Enchant. js

The above tests can be used as a reference. If my testing method is inappropriate, you are welcome to submit it.

We can see that as long as the development method is proper, lufylegend. js In the efficiency can win over other engines, of course, each engine has its own advantage, the perfect conversion between createjs and flash, JSB binding cocos2d-html5, how to choose, we each take the necessary it.

Continue to follow my blog

Reprinted Please note: