H5游戏性能优化系列-----UI相关优化

作为一个前端，有很大部分时间都在拼UI，当然豪横的公司会专门配策划来拼UI，或者搞类似PSD2UI的工具，但是无论怎样最后可能还是需要前端去看下UI的合理性。

本期说下在编辑器中布局UI时需要注意的事项

• 新开一个功能模块的时候，我们会把这个模块独有的资源放在一起统一进行图集管理，用到公用库中的资源，直接引用公用库即可
• 在进行Ui布局时，常用的编辑器比如Laya和CocosCreator都有参考图功能，尽量把参考图用上，避免应为几个像素的问题和策划纠结
• 避免图集之间交叉使用，在无遮挡的情况下，尽量把使用同一个图集的组件摆放在一起，中间不要穿插文本或者使用其他图集的组件
• 动静分离，将不经常改变的组件放在同一个父容器下，在父容器上使用类似cacheAsBitmap等缓存手段
• 去除不必要的层级嵌套，这个会增加矩阵相关计算，能省就省
• 去除不必要的布局，比如上下左右对齐，有时候仅仅是在布局Ui的时候方便快速定位的，实际运行时不需要布局属性，在Ui界面拼完成之后记得删除
• 滤镜尽量少用，比如发光，阴影，颜色滤镜等等，能美术出图解决的优先用美术图
• mask遮罩相关，这个会打断合批，增加DrawCall

图集交叉这个，某些编辑器做的很人性化，比如Laya1.x的编辑器，不同图集会在层级列表用不同原色的小圆点表示，有没有交叉使用，从层级列表控件名字前面的圆点颜色一眼可知，现在最新版的3.x编辑器是否还有这个功能，各位自己去看看哈