点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

HTML5各引擎显示效率比较

来源：动视网责编：小采时间：2020-11-27 15:12:19

HTML5各引擎显示效率比较

HTML5各引擎显示效率比较:现在越来越多的人开始尝试使用HTML5开发，HTML5的引擎也逐渐增多，开发者到底应该选择一款什么样的引擎呢？这一次我来对比一下几个我个人认为还不错的引擎的效率。本次参加对比的引擎：1. createJSwww.createjs.com2. cocos2d-HTML5www.c

推荐度：

点击下载本文 文档为doc格式

导读HTML5各引擎显示效率比较:现在越来越多的人开始尝试使用HTML5开发，HTML5的引擎也逐渐增多，开发者到底应该选择一款什么样的引擎呢？这一次我来对比一下几个我个人认为还不错的引擎的效率。本次参加对比的引擎：1. createJSwww.createjs.com2. cocos2d-HTML5www.c

现在越来越多的人开始尝试使用HTML5开发，HTML5的引擎也逐渐增多，开发者到底应该选择一款什么样的引擎呢？这一次我来对比一下几个我个人认为还不错的引擎的效率。

本次参加对比的引擎：

1. createJS

www.createjs.com

2. cocos2d-HTML5

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

3. enchant.js

enchantjs.com

4. lufylegend.js

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

得到测试结果如下图