HTML5エンジン間の表示効率の比較-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5エンジン間の表示効率の比較

黄舟

Mar 30, 2017 am 09:21 AM

現在、HTML5 を使用して開発しようとする人が増えており、HTML5 エンジンの数も徐々に増えています。開発者はどのようなエンジンを選択すべきでしょうか?今回は個人的にかなり良いと思ういくつかのエンジンの効率を比較してみます。

この比較に参加するエンジン:

1. createJS

www.createjs.com

2. cocos2d -HTML5

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

3.enchant.js

enchantjs.com

lufylegend.com/lufylegend

テストブラウザ: chrome

テストコンテンツ、ページ上にランダムに1500を表示小さな写真。

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

テスト結果は以下の通りです

結果は、ストリーキングの場合、15,000枚の画像が表示され、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では15,000枚の写真が表示され、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 15,000枚の写真を表示、FPSは約25
5、enchant.js

テストコードは以下の通りです

enchant();
window.onload = function(){
    var core = new Game(320, 480);
    core.fps = 30;
    core.preload(&#39;CloseNormal.png&#39;)
    core.onload = function(){
		for(var i=0;i<15000;i++){
	        var bear = new enchant.Sprite(20, 20);
	        bear.image = core.assets[&#39;CloseNormal.png&#39;];
	        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(&#39;enterframe&#39;, function(){
            fps++;
            var newTime = new Date();
            if(newTime.getTime() - oldTime.getTime() >= 1000){
            	text.text = fps + " FPS";
            	fps = 0;
            	oldTime = newTime;
            }
        });
    };
    core.start();
};

テスト結果は以下の通りです

その結果、enchant.js 15,000 枚の画像を表示し、FPS は約 13 です

画像を表示する場合、各エンジンの効率は次のようになります。 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(&#39;enterframe&#39;, 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

注：此结果是canvas下的测试结果，cocos2d-html5同时支持多种渲染，可自动切换到WebGL进行高效渲染，和canvas不是一个档次，不在本次测试比较范围。关于cocos2d-html5开启webgl后的效果看下面截图，为15000张图片渲染结果，满帧显示。

可以看到，使用canvas开发游戏，只要开发方法得当，lufylegend.js在效率上可以完胜其他引擎，当然，各个引擎都有自己的优势，createjs和flash之间的完美转换，cocos2d-html5的JSB绑定，该怎么选，大家各取所需吧。

以上就是HTML5各引擎显示效率比较的内容，更多相关内容请关注PHP中文网（www.php.cn）！

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

H5：Web開発の新機能と機能Apr 29, 2025 am 12:07 AM

H5は多くの新しい機能と機能をもたらし、Webページのインタラクティブ性と開発効率を大幅に改善します。 1。SEOの強化などのセマンティックタグ。 2.マルチメディアサポートは、オーディオとビデオの再生とタグを簡素化します。 3. Canvas Drawingは、動的なグラフィックスの描画ツールを提供します。 4.ローカルストレージは、LocalStorageとSessionStorageを介してデータストレージを簡素化します。 5. Geolocation APIは、ロケーションベースのサービスの開発を促進します。

H5：HTML5の重要な改善Apr 28, 2025 am 12:26 AM

HTML5は5つの重要な改善をもたらします。1。セマンティックタグにより、コードの明確性とSEO効果が向上します。 2.マルチメディアサポートは、ビデオとオーディオの埋め込みを簡素化します。 3。フォームエンハンスメントは、検証を簡素化します。 4.オフラインおよびローカルストレージにより、ユーザーエクスペリエンスが向上します。 5。キャンバスとグラフィック機能は、Webページの視覚化を強化します。

HTML5：標準とWeb開発への影響Apr 27, 2025 am 12:12 AM

HTML5のコア機能には、セマンティックタグ、マルチメディアサポート、オフラインストレージ、ローカルストレージ、フォームエンハンスメントが含まれます。 1。コードの読みやすさとSEO効果を改善するためのセマンティックタグなど。 2.ラベルでマルチメディアの埋め込みを簡素化します。 3。アプリケーションキャッシュやLocalStorageなどのオフラインストレージとローカルストレージは、ネットワークのない操作とデータストレージをサポートします。 4.フォームエンハンスメントでは、処理と検証を簡素化するための新しい入力タイプと検証プロパティを導入します。

H5コードの例：実用的なアプリケーションとチュートリアルApr 25, 2025 am 12:10 AM

H5は、さまざまな新機能と機能を提供し、フロントエンド開発の機能を大幅に向上させます。 1.マルチメディアサポート：メディアを埋め込んで要素を埋め込み、プラグインは必要ありません。 2。キャンバス：要素を使用して、2Dグラフィックとアニメーションを動的にレンダリングします。 3。ローカルストレージ：ユーザーエクスペリエンスを改善するために、ローカルストレージとセッションストレージを介して永続的なデータストレージを実装します。

H5とHTML5の接続：類似性と相違点Apr 24, 2025 am 12:01 AM

H5とHTML5は異なる概念です。HTML5は、新しい要素とAPIを含むHTMLのバージョンです。 H5は、HTML5に基づくモバイルアプリケーション開発フレームワークです。 HTML5はブラウザを介してコードを解析およびレンダリングしますが、H5アプリケーションはコンテナを実行し、JavaScriptを介してネイティブコードと対話する必要があります。

H5コードの構成要素：キー要素とその目的Apr 23, 2025 am 12:09 AM

HTML5の重要な要素には、最新のWebページの構築に使用される、、,,,,などが含まれます。 1.ヘッドコンテンツを定義します。2。リンクをナビゲートするために使用されます。3。独立した記事のコンテンツを表します。4。ページコンテンツを整理します。5。サイドバーコンテンツを表示します。

HTML5およびH5：一般的な使用法の理解Apr 22, 2025 am 12:01 AM

HTML5とHTML5の略語であるHTML5とH5の間に違いはありません。 1.HTML5はHTMLの5番目のバージョンであり、Webページのマルチメディア関数とインタラクティブ機能を強化します。 2.H5は、HTML5ベースのモバイルWebページまたはアプリケーションを参照するためによく使用され、さまざまなモバイルデバイスに適しています。

HTML5：現代のウェブのビルディングブロック（H5）Apr 21, 2025 am 12:05 AM

HTML5は、W3Cによって標準化されたHyperText Markup言語の最新バージョンです。 HTML5は、新しいセマンティックタグ、マルチメディアサポート、フォームの強化、Web構造の改善、ユーザーエクスペリエンス、SEO効果を導入します。 HTML5は、Webページ構造をより明確にし、SEO効果をより良くするために、、、、、、などの新しいセマンティックタグを導入します。 HTML5はマルチメディア要素をサポートしており、サードパーティのプラグインは不要で、ユーザーエクスペリエンスと読み込み速度が向上します。 HTML5はフォーム関数を強化し、ユーザーエクスペリエンスを向上させ、フォーム検証効率を向上させるなどの新しい入力タイプを導入します。

See all articles