HTML5作为新的开发语言，目前已经成为行业大热中培教育《基于HTML5的前端开发应用最佳实践》姚老师表示，在移动设备硬件性能弱于PC的背景下，对性能的需求显得更为重要，而HTML5性能优化前与优化后有着极大的差别，如何优化才能提高性能，对此熟知的人很少。姚老师LayaAir引擎为例，通过代码示例详细介绍了6种如何利用引擎对HTML5作出性能的极致优化的方法

(一)：代码执行基本原理

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

由于实际运行环境是在浏览器中，因此性能还取决于JavaScript解释器的效率，指定的FPS帧速在低性能解释器中可能不会达到，所以这部分不是开发者能够决定的，开发者能作的是尽可能通过优化，在低端设备或低性能浏览器中，提升FPS帧速。

LayaAir引擎在每帧都会重绘，在性能优化时，除了关注每帧执行逻辑代码带来的CPU消耗，还需要注意每帧调用绘图指令的数量以及GPU的纹理提交次数。

(二)：基准测试

LayaAir引擎内置的性能统计工具可用于基准测试，实时检测当前性能。开发者可以使用laya.utils.Stat类，通过Stat.show() 显示统计面板。

WebGL下表示渲染提交批次，每次准备数据并通知GPU渲染绘制的过程称为1次DrawCall，在每1次DrawCall中除了在通知GPU的渲染上比较耗时之外，切换材质与shader也是非常耗时的操作。 DrawCall的次数是决定性能的重要指标，尽量限制在100之下。

（三）：内存优化

对象池，涉及到不断重复使用对象。在初始化应用程序期间创建一定数量的对象并将其存储在一个池中。对一个对象完成操作后，将该对象放回到池中，在需要新对象时可以对其进行检索。

由于实例化对象成本很高，使用对象池重用对象可减少实例化对象的需求。还可以减少垃圾**器运行的机会，从而提高程序的运行速度。

资源卸载

游戏运行时总会加载许多资源，这些资源在使用完成后应及时卸载，否则一直残留在内存中。

     关于滤镜、遮罩

尝试尽量减少使用滤镜效果。将滤镜(BlurFilter和GlowFilter)应用于显示对象时，运行时将在内存中创建两张位图。其中每个位图的大小与显示对象相同。将第一个位图创建为显示对象的栅格化版本，然后用于生成应用滤镜的另一个位图

（四）：图形渲染性能

优化Sprite

1.尽量减少不必要的层次嵌套，减少Sprite数量。

2.非可见区域的对象尽量从显示列表移除或者设置visible=false。

3.对于容器内有大量静态内容或者不经常变化的内容(比如按钮)，可以对整个容器设置cacheAs属性，能大量减少Sprite的数量，显著提高性能。如果有动态内容，最好和静态内容分开，以便只缓存静态内容。

4.Panel内，会针对panel区域外的直接子对象(子对象的子对象判断不了)进行不渲染处理，超出panel区域的子对象是不产生消耗的。

　　优化DrawCall

1.对复杂静态内容设置cacheAs，能大量减少DrawCall，使用好cacheAs是游戏优化的关键。

2.尽量保证同图集的图片渲染顺序是挨着的，如果不同图集交叉渲染，会增加DrawCall数量。

3.尽量保证同一个面板中的所有资源用一个图集，这样能减少提交批次。

优化Canvas

在对Canvas优化时，我们需要注意，在以下场合不要使用cacheAs：

1.对象非常简单，比如一个字或者一个图片，设置cacheAs=bitmap不但不提高性能，反而会损失性能。

2.容器内有经常变化的内容，比如容器内有一个动画或者倒计时，如果再对这个容器设置cacheAs=bitmap，会损失性能。

可以通过查看Canvas统计信息的第一个值，判断是否一直在刷新Canvas缓存。

（五）：减少CPU使用量

JavaScript中任何对象都是动态的，你可以任意地添加属性。然而，在大量的属性里查找某属性可能很耗时。如果需要频繁使用某个属性值，可以使用局部变量来保存它：

在相对布局中，很经常需要正确地获取显示对象的边界。获取显示对象的边界也有多种做法，而其间差异很有必要知道。

（六）：其他优化策略

1.减少粒子使用数量，在移动平台Canvas模式下，尽量不用粒子;

2.在Canvas模式下，尽量减少旋转，缩放，alpha等属性的使用，这些属性会对性能产生消耗。(在WebGL模式可以使用);

3.不要在timeloop里面创建对象及复杂计算;

4.尽量减少对容器的autoSize的使用，减少getBounds()的使用，因为这些调用会产生较多计算;

5.尽量少用try catch的使用，被try catch的函数执行会变得非常慢