如何将HTML5性能发挥到极致

HTML5作为新兴范畴越来越热。然而在移动设备硬件机能弱于PC的背景下，对机能的需求显得更为重要，而HTML5机能优化前与优化后有着极大年夜的差别，若何优化才能进步机能，对此熟知的人很少。本文以LayaAir引擎为例，经由过程代码示例具体阐述若何应用引擎对HTML5作出机能的极致优化。

主题包含：

代码履行基来源基本理
基准测试
内存优化
图形衬着机能
削减CPU应用量
其他优化策略

第1节：代码履行基来源基本理

LayaAir引擎支撑AS3、TypeScript、JavaScript三种说话开辟，然而无论是采取哪种开辟说话，最终履行的都是JavaScript代码。所有看到的画面都是经由过程引擎绘制出来的，更新频率取决于开辟者指定的FPS，例如指定帧频率为60FPS，则运行时每个帧的履行时光为六十分之一秒，所以帧速越高，视觉上感到越流畅，60帧是满帧。

第2节：基准测试

LayaAir引擎内置的机能统计对象可用于基准测试，及时ｌ测当前机能。开辟者可以应用laya.utils.Stat类，经由过程Stat.show() 显示统计面板。具体编写代码如下例所示：

Stat.show(0,0); //AS3的面板调用写法
Laya.Stat.show(0,0); //TS与JS的面板调用写法

Canvas衬着的统计信息：

急鹞鲼

WebGL衬着的统计信息：

若何将 HTML5 机能发挥到极致

统计参数的意义：

FPS：

每秒出现的帧数(数字越高越好)。
应用canvas衬着时，描述字段显示为FPS(Canvas)，应用WebGL衬着时，描述字段显示为FPS(WebGL)。

Sprite：

衬着节点数量(数字越低越好)。
Sprite统计所有衬着节点(包含容器)，这个数字的大年夜小会影响引擎节点遍历，数据组织和衬着的次数。

DrawCall：

DrawCall在canvas和WebGL衬着下代表不合的意义(越少越好)。
Canvas下表示每帧的绘制次数，包含图片、文字、矢量图。尽量限制在100之下。
WebGL下表示衬着提交批次，每次预备数据并通知GPU衬着绘制的过程称为1次DrawCall，在每1次DrawCall中除了在通知GPU的衬着上比较耗时之外，切换材质与shader也是异常耗时的操作。 DrawCall的次数是决定机能的重要指标，尽量限制在100之下。

Canvas：

三个数值 —— 每帧重绘的画布数量 / 缓存类型为“normal”类型的画布数量 / 缓存类型为“bitmap”类型的画布数量”。

Shader：仅限WebGL衬着，表示每帧Shader提交次数。

无论是Canvas模式照样WebGL模式，我们都须要重点存眷DrawCall，Sprite，Canvas这三个参数，然后针对性地进行优化。(拜见“图形衬着机能”)

第3节：内存优化

LayaAir引擎在每帧都邑重绘，在机能优化时，除了存眷每帧履行逻辑代码带来的CPU消费，还须要留意每帧调用画图指令的数量以及GPU的纹理提交次数。

对象池

因为实例化对象成本很高，应用对象池重用对象可削减实例化对象的需求。还可以削减垃圾收受接收器运行的机会，大年夜而进步法度榜样的运行速度。

以下代码演示应用

Laya.utils.Pool：

图片/图集加载

ar SPRITE_SIGN = 'spriteSign'; 
var sprites = []; 
function initialize() 
{ 
    for (var i = 0; i < 1000; i++) 
    { 
        var sp = Pool.getItemByClass(SPRITE_SIGN, Sprite) 
        sprites.push(sp); 
        Laya.stage.addChild(sp); 
    } 
} 
initialize();

在initialize中创建大年夜小为1000的对象池。

以下代码在当单击鼠标时，将删除显示列表中的所有显示对象，并在今后的其他义务中反复应用这些对象：

Laya.stage.on("click", this, function() 
{ 
    var sp; 
    for(var i = 0, len = sprites.length; i < len; i++) 	
			 1/6    1 2 3 4 5 6 下一页 尾页	
			

　　推荐阅读
　　Android注解快速入门和实用解析
            
            起首什么是注解?@Override就是注解，它的感化是：    检查是否精确的重写了父类中的办法。    标明代码，这是一个重写的办法。1、表如今于：检查子类重写的办法名与参数类型是否精确;检查>>>详细阅读


本文标题：如何将HTML5性能发挥到极致
地址：http://www.17bianji.com/lsqh/37701.html
 1/2    1