HTML5作为新兴领域越来越热。然而在移动设备硬件性能弱于PC的背景下，对性能的需求显得更为重要，而HTML5性能优化前与优化后有着极大的差别，如何优化才能提高性能，对此熟知的人很少。本文以LayaAir引擎为例，通过代码示例详细阐述如何利用引擎对HTML5作出性能的极致优化。 主题包括：
第1节：代码执行基本原理 LayaAir引擎支持AS3、TypeScript、JavaScript三种语言开发，然而无论是采用哪种开发语言，最终执行的都是JavaScript代码。所有看到的画面都是通过引擎绘制出来的，更新频率取决于开发者指定的FPS，例如指定帧频率为60FPS，则运行时每个帧的执行时间为六十分之一秒，所以帧速越高，视觉上感觉越流畅，60帧是满帧。 由于实际运行环境是在浏览器中，因此性能还取决于JavaScript解释器的效率，指定的FPS帧速在低性能解释器中可能不会达到，所以这部分不是开发者能够决定的，开发者能作的是尽可能通过优化，在低端设备或低性能浏览器中，提升FPS帧速。 LayaAir引擎在每帧都会重绘，在性能优化时，除了关注每帧执行逻辑代码带来的CPU消耗，还需要注意每帧调用绘图指令的数量以及GPU的纹理提交次数。 第2节：基准测试 LayaAir引擎内置的性能统计工具可用于基准测试，实时检测当前性能。开发者可以使用laya.utils.Stat类，通过Stat.show() 显示统计面板。具体编写代码如下例所示： Stat.show(0,0); //AS3的面板调用写法 Laya.Stat.show(0,0); //TS与JS的面板调用写法 Canvas渲染的统计信息：
WebGL渲染的统计信息：
统计参数的意义： 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”类型的画布数量”。 CurMem：仅限WebGL渲染，表示内存与显存占用(越低越好)。 Shader：仅限WebGL渲染，表示每帧Shader提交次数。 无论是Canvas模式还是WebGL模式，我们都需要重点关注DrawCall，Sprite，Canvas这三个参数，然后针对性地进行优化。(参见“图形渲染性能”) 第3节：内存优化 对象池 对象池，涉及到不断重复使用对象。在初始化应用程序期间创建一定数量的对象并将其存储在一个池中。对一个对象完成操作后，将该对象放回到池中，在需要新对象时可以对其进行检索。 由于实例化对象成本很高，使用对象池重用对象可减少实例化对象的需求。还可以减少垃圾**器运行的机会，从而提高程序的运行速度。 以下代码演示使用 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++)
{
sp = sprites.pop();
Pool.recover(SPRITE_SIGN, sp);
Laya.stage.removeChild(sp);
}
});调用Pool.recover后，指定的对象会被**至池内。 使用Handler.create 在开发过程中，会经常使用Handler来完成异步回调。Handler.create使用了内置对象池管理，因此在使用Handler对象时应使用Handler.create来创建回调处理器。以下代码使用Handler.create创建加载的回调处理器： Laya.loader.load(urls, Handler.create(this, onAssetLoaded)); 在上面的代码中，回调被执行后Handler将会被对象池收回。此时，考虑如下代码会发生什么事： Laya.loader.load(urls, Handler.create(this, onAssetLoaded), Handler.create(this, onLoading)); 在上面的代码中，使用Handler.create返回的处理器处理progress事件。此时的回调执行一次之后就被对象池**，于是progress事件只触发了一次，此时需要将四个名为once的参数设置为false：
|
本文主要包含HTML5，性能，发挥等相关知识,匿名希望在学习及工作中可以帮助到您
