Egret的一些性能优化总结整理 (持续更新2019-08-24)(部分转载 原始链接在文章开头)

(如有需求 请去原始链接下载相关资源)
第一版参考:
https://www.cnblogs.com/gamedaybyday/p/9095545.html
第二版参考
http://developer.egret.com/cn/article/index/id/287
第三版参考
https://blog.csdn.net/u013617851/article/details/97170730

为了方便统计和归纳 自己总结一份

性能统计面板
index.html页面设置data-show-fps=true打开性能面板

1.加载优化

• js加载优化(参考我博客下 egret相关 其余博客)
• 资源动态加载
• 资源压缩,图片合并,减少加载及下载的消耗
• 资源服务器开启GZIP压缩，提高载入速率。

2.内存优化

• 对象池(实现比较简单 如有需求 可自行查找相关代码)
• 减少了实例化对象时的开销，且能让对象反复使用，减少了新内存分配与垃圾回收器运行的机会
• 用了对象池后将减少程序的垃圾对象，有效的提高程序的运行速度和稳定性
• 垃圾回收
• 标记清除、引用计数
• 垃圾回收时间：固定间隔、上限
• 游戏中除了常用的事件监听的移除、对象引用设置为null等等，对于资源加载使用后，也要即时卸载。
• 相关链接可参考:https://www.cnblogs.com/dolphinX/p/3348468.html
• 内存管理
• 相关链接可参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Memory_Management
• 垃圾回收
• 相关链接可参考: http://www.ruanyifeng.com/blog/2017/04/memory-leak.html

3.渲染优化

• 要改进渲染，务必考虑显示列表的嵌套。每个显示对象都是独立，当对象放入显示列表后参与整个渲染过程。
• 绘制过程：由内而外 spr-> 文档类 -> 舞台。
• Egret版本大于2.5，引擎提供了自动的脏矩形，极大提高渲染能力，无需手动设置。
• drawcall
• 尽量保证同图集的图片渲染顺序相邻
• 相关链接可参考:合并图片、EUI顺序、CacheAsBitmap对drawcall影响的测试
• 对于容器内有大量静态内容或者不经常变化的内容（比如按钮），可以对整个容器设置cacheAs属性，能大量减少Sprite的数量，显著提高性能。如果有动态内容，最好和静态内容分开，以便只缓存静态内容。
• Panel内，会针对panel区域外的直接子对象（子对象的子对象判断不了）进行不渲染处理，超出panel区域的子对象是不产生消耗的。

4.CPU优化

• 卡顿瓶颈 可以尝试分桢处理
• 适时使用异步处理 可以优化体验
• 禁用不必要显示对象的触摸交互
• 访问全局变量总是比访问局部变量要慢
• 显示停止定时器，移除enterFrame侦听
• 移除显示列表中的对象，而不是visible=false, 对象仍在父级显示列表，某些功能依然在遍历这个列表。
• 避免一些后台对象参与逻辑，例如一些已经移出显示列的对象，是否需要碰撞检测，距离运算等。
• 适当延长检测时间，例如：碰撞间隔，非需要特别精确的时候使用简单的矩形碰撞。
• 对于简单的动画，序列帧的性能更佳。
• 对于V8虚拟机的优化方法是，避免动态添加属性与修改变量类型，好处是减少创建新类的开销，V8中当试图修改动态变量或属性时，虚拟机会把function类缓存为一个固定的C++类并触发虚拟机的重新编译。当你使用TypeScript显而易见的好处是类型的声明以及语法规范会使你避免这种情况发生。
• 类方法中，将 this 赋值给另外一个临时变量
• 在循环中，尝试改进写法,减少读取次数：for(var i = 0, length = array.length; i < length; ++i)
• 避免双重解释，如eval函数，会使JavaScript创建解析器，产生额外的性能消耗。
• 推荐使用正则表达式处理字符串遍历
• 避免使用[“property”]访问对象属性，改为Object.property
• 创建对象var obj:object={“key”:”value”} > var obj:Object={} > new Object()。
• 字符串类型转换(“” +) > String() > .toString() > new String()。
• 类声明属性不宜过多(<64)，少继承，多引用。
• 代码中Getter ，Setter ，Try-catch会使性能下降。
• 请保持数组中类型的一致，数组中第一个对象类型是确定的会提供性能。
  涉
• 及频繁在Stage添加移除对象并且不关心ADDEDTOSTAGE与REMOVEDFROMSTAGE事件时，可以进行addChild和removeChild优化，减少逻辑判定。
• 显示优化测试
• 稳定的帧率是游戏性能最重要的表现，非动作游戏降低游戏帧率可以大幅提升性能。this.stage.frameRate = 30;//能被60整除的数
• 在适当的时候对多位图容器使用位图缓存功能。
• 减少动态属性查找
• JavaScript中任何对象都是动态的，你可以任意地添加属性。然而，在大量的属性里查找某属性可能很耗时。如果需要频繁使用某个属性值，可以使用局部变量来保存它

foo(){
        var prop=this.target.prop;
        //使用prop
        this.process1(prop);
}

• 根据活动状态改变帧频(好像是Laya的技巧.egret没找到api,晚点研究一下)
• 帧频有三种模式，Stage.FRAME_SLOW维持FPS在30；Stage.FRAME_FAST维持FPS在60；Stage.FRAME_MOUSE则选择性维持FPS在30或60帧。
• 有时并不需要让游戏以60FPS的速率执行，因为30FPS已经能够满足多数情况下人类视觉的响应，但是鼠标交互时，30FPS可能会造成画面的不连贯，于是Stage.FRAME_MOUSE应运而生。
• 使用callLater
• callLater使代码块延迟至本帧渲染前执行。如果当前的操作频繁改变某对象的状态，此时可以考虑使用callLater，以减少重复计算。
• 减少在Timer的循环里创建对象及复杂计算

else:

• 一些小技巧
• 少使用Alpha混合。
• 显式停止计时器，让它们准备好进行垃圾回收。
• 使用事件侦听器并在不需要时删除这些侦听器。
• 在不需要触摸交互性时显式禁用触摸交互性。
• 合理使用dispatchEvents 函数。
• 尽可能重用对象，建立对象池，而不创建对象并对其执行垃圾回收。
• 多次调用类属性时，避免直接使用this.att，建立局部变量赋值。
• Event.ENTER_FRAME数量控制。
• 减少不必要的引用。
• 减少显示对象的旋转缩放。
• 使用SpriteSheet合并的图片尺寸要优于单张图片的总尺寸，尤其是带透明通道的。
• 在Http请求中，加载单个文件速度要优于加载多个文件。
• egret中最好用bitmapLable代替普通Label
• autoSize()与getBounds()需要大量计算，对性能的影响较大，尽量少用。
• 在对Canvas优化时，我们需要注意，在以下场合不要使用cacheAs：
  1 . 对象非常简单，比如一个字或者一个图片，设置cacheAs=bitmap不但不提高性能，反而会损失性能。
  2 . 容器内有经常变化的内容，比如容器内有一个动画或者倒计时，如果再对这个容器设置cacheAs=bitmap，会损失性能。
• 其余优化 一些插件
• 一个高性能的文本控件