Cocos2d-JS項目之UI界面的優化

測試環境： 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