HTML5各引擎顯示效率比較

現在越來越多的人開始嘗試使用HTML5開發，HTML5的引擎也逐漸增多，開發人員到底應該選擇一款什麼樣的引擎呢？這一次我來對比一下幾個我個人認為還不錯的引擎的效率。

本次參加對比的引擎：

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

測試瀏覽器：chrome

一，圖片顯示效率比較

測試內容，隨機在頁面上顯示15000個小圖片。

1，裸奔(不用任何引擎)。

測試代碼如下

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);}

得到測試結果如

結果，裸奔的情況下，顯示15000張圖片，FPS在28左右。

2，createJS

測試代碼如下

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();}

得到測試結果如

結果，createJS顯示15000張圖片，FPS大約在17左右

3，cocos2d-html5

測試代碼如下

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();    }});

得到測試結果如

結果，cocos2d-html5顯示15000張圖片，FPS大約在19左右

4，lufylegend.js

測試代碼如下

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);}

得到測試結果如

結果，lufylegend.js顯示15000張圖片，FPS大約在25左右
5，enchant.js

測試代碼如下

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();};

得到測試結果如

結果，enchant.js顯示15000張圖片，FPS大約在13左右

得出結論，在顯示圖片上，各個引擎的效率如下

裸奔 > lufylegend.js > cocos-html5 > createJS > enchant.js

二，文字顯示效率比較

測試內容，隨機在頁面上顯示500個文字對象，並且隨機設定它們的顏色和旋轉。

1，createJS

測試代碼如下

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("HTML5各引擎效率比較",(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() * 0xFFFFFF).toString(16);if(rand.length == 6){return rand;}else{return randomColor();}};

得到測試結果如

結果，createJS顯示500個文字，FPS大約在12左右

2，enchant.js

測試代碼如下

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各引擎效率比較";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('enterframe', 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() * 0xFFFFFF).toString(16);if(rand.length == 6){return rand;}else{return randomColor();}};

得到測試結果如

結果，enchant.js顯示500個文字，FPS大約在12左右

3，lufylegend.js

測試代碼如下

init(10,"mylegend",320,480,main);function main(){for(var i=0;i<500;i++){var label = new LTextField();label.text = "HTML5各引擎效率比較";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() * 0xFFFFFF).toString(16);if(rand.length == 6){return rand;}else{return randomColor();}}

得到測試結果如

結果，lufylegend.js顯示500個文字，FPS大約在21左右

4.cocos2d-html5

測試代碼如下

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("HTML5各引擎效率比較");        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() * 0xFFFFFF).toString(16);if(rand.length == 6){return rand;}else{return randomColor();}}

得到測試結果如

結果，cocos2d-html5顯示500個文字，FPS大約在90左右

此結果讓我吃了一驚，cocos2d-html5達到了驚人的90fps，你一定會問，為什嗎？

稍等，我們把lufylegend.js的測試代碼稍作改動，來再次測試一下，測試代碼如下。

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各引擎效率比較";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() * 0xFFFFFF).toString(16);if(rand.length == 6){return rand;}else{return randomColor();}}

得到測試結果如

結果顯示，lufylegend.js顯示500個文字時，如果先將文字轉換為圖片，則FPS大約在146左右

因為在canvas中顯示圖片要比文字的效率高很多，所以先把文字轉換為圖片後再顯示，可以讓效果達得到質的飛躍。而這種做法在lufylegend.js裡也可以輕鬆實現。

結論，在顯示文字上，各個引擎的效率如下

 lufylegend.js(將文字轉換為LBitmapData) > cocos2d-html5 > lufylegend.js > createJS = enchant.js

綜合兩個測試，各引擎效率如下：

lufylegend.js > cocos2d-html5 > createJS > enchant.js

以上測試可以給大家當作一個參考，如果我的測試方法不當，歡迎提出。

可以看到，只要開發方法得當，lufylegend.js在效率上可以完勝其他引擎，當然，各個引擎都有自己的優勢，createjs和flash之間的完美轉換，cocos2d-html5的JSB綁定，該怎麼選，大家各取所需吧。

歡迎繼續關注我的部落格

轉載請註明：