如何将 HTML5 性能发挥到极致

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

　　应用滤镜时内存中的两个位图

　　当修改滤镜的某个属性或者显示对象时，内存中的两个位图都将更新以创建生成的位图，这两个位图可能会占用大量内存。此外，此过程涉及CPU计算，动态更新时将会降低性能(参见“图形渲染性能 – 关于cacheAs)。

　　ColorFiter在Canvas渲染下需要计算每个像素点，而在WebGL下的GPU消耗可以忽略不计。

　　最佳的做法是，尽可能使用图像创作工具创建的位图来模拟滤镜。避免在运行时中创建动态位图，可以帮助减少CPU或GPU负载。特别是一张应用了滤镜并且不会在修改的图像。

　　第4节：图形渲染性能

　　优化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缓存。

　　关于cacheAs

　　设置cacheAs可将显示对象缓存为静态图像，当cacheAs时，子对象发生变化，会自动重新缓存，同时也可以手动调用reCache方法更新缓存。 建议把不经常变化的复杂内容，缓存为静态图像，能极大提高渲染性能，cacheAs有”none”，”normal”和”bitmap”三个值可选。

　　1.默认为”none”，不做任何缓存。

　　2.当值为”normal”时，canvas下进行画布缓存，webgl模式下进行命令缓存。