Cocos2d-JS项目之四：UI界面的优化

概述测试环境： iphone4、iOS6.1.2、chrome 37.2062.60，Cocos2d-js 3.6   之前写了不少，实际项目也按这个去优化了，也有效果，但到最后才发现，尼玛，之前都搞错了，之所以有效果是歪打正着。。。。这次就直接总结一些得到的结论算了吧   0、pc 端浏览器大部分都支持 webGL，移动端浏览器大部分都还是 canvas 渲染模式，最新的 iPhone6以上（ios @H_403_0@

@H_403_0@

@H_403_0@

测试环境： iphone4、iOS6.1.2、Chrome 37.2062.60，Cocos2d-Js 3.6

之前写了不少，实际项目也按这个去优化了，也有效果，但到最后才发现，尼玛，之前都搞错了，之所以有效果是歪打正着。。。。这次就直接总结一些得到的结论算了吧

0、pc 端浏览器大部分都支持 webGL，移动端浏览器大部分都还是 canvas 渲染模式，最新的 iPhone6以上（ios8+）、小米4等一些搭载着最新系统的移动端才支持 webGL。最简单的测试当前环境是否支持 webGL 的方法：项目里 project.Json 文件里 renderMode 改成2，然后看游戏是否正常运行。

1、能用sprite就别用imageVIEw。

2、尽量减少UI的数量，使用合图。

3、没有背景色的容器不渲染，sprite 渲染一次， imagevIEw 要渲染两次， button 要渲染四次。。。需要点击效果的采用 button，否则可以用 imagevIEw 或者 sprite+Layout 来代替。

4、 canvas 模式下，别在滑动控件里使用带有九宫格的 UI ，否则滑动时一个九宫格会变成九个精灵，使用的 button 也要把九宫格效果取消掉，因为 canvas 模式没有批渲染。

5、滑动容器的内容很多时，对于现实范围外的控件，手动处理设置不可见。

6、不需要交互的 Widget 的 可交互性 全部设为 否。

7、webGL 模式：支持 webGL 的移动端都是比较新的，性能也很强大，应该没有什么性能瓶颈的，最多在大量精灵时使用批渲染即可，需要注意的时，3.x 的自动批处理在 Js 版本里是没有的，studio 里也没法用，需要手动代码处理。canvas 模式：目前大部分移动端都还是 canvas 吧，除了1~6点外，使用 bake 可以极大提高 canvas 渲染的效率：http://www.cocos2d-x.org/docs/manual/framework/HTML5/v3/bake-layer/zh

@H_403_0@

@H_403_0@

@H_403_0@

@H_403_0@

@H_403_0@转：http://www.cnblogs.com/zouzf/p/4524822.HTML

总结

以上是内存溢出为你收集整理的Cocos2d-JS项目之四：UI界面的优化全部内容，希望文章能够帮你解决Cocos2d-JS项目之四：UI界面的优化所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。