Cocos2d-JS是整合了Cocos2d-html5和Cocos2d-x JavaScript Bindings(JSB)的游戲引擎，擁有清晰的工作流，提供一致的開發體驗，一次編碼可將游戲同時部署在網頁和原生應用渠道。

JSB腳本綁定跨平臺方案是所有HTML5游戲跨原生平臺解決方案中最高效的，其運行效率比其他類型解決方案更快數十倍、數百倍，接近原生應用的性能表現。不僅如此，在Cocos2d-x JSB在開啟了baseline compiler之后，JSB 在android平臺上的運行效率又有了質的飛躍，實測其性能表現已經超越了Lua，看來github上JS語言強勢流行也不是沒有道理的。

在移動網頁游戲的性能改進方面，Cocos2d-JS團隊經過不懈努力和反復嘗試，終于成功對v3.1版本的圖像渲染進行了更新升級，改進后的Canvas模式渲染效率大幅提升，實測數據顯示其性能相比v2.x版本最大可達到50%的提升幅度。具體測試情況見下圖：

性能測試對比：手機上300個靜態Sprite

性能測試對比：手機上200個Sprite進行縮放、旋轉

v3.1渲染框架更新：更加清晰 更易維護

Cocos2d-JS原v2.x版本中，渲染流程的每一幀都要以樹形遍歷的方式(visit)，將場景中所有節點都訪問到，查詢是否需要調用矩陣變換函數(transform), 并需對子節點進行排序并進一步遍歷之后，才能調用當前節點渲染函數展現在屏幕上。在游戲的層級較多的情況下，這樣的做法可能帶來很大的消耗——本身沒有繪制圖形功能的層、節點、場景容器等需調用下文進行保存與恢復，這些系統API調用將耗費多余的資源——而在實際的游戲應用場景中，多層級是非常普遍的。

針對于此，Cocos2d-JS團隊進行了各種相關的性能實驗，并得出可喜的結果：

➢ 將“全局坐標計算”與“逐層調用矩陣變換函數”方式進行比較后，發現前者耗費的時間僅為后者的一半左右

➢ 在UI較多的游戲中，若將那些不包括變形、旋轉等復雜操作的“路人甲”型元素進行設置全局坐標，可省下重新計算坐標的調用消耗，直接使用渲染圖形的方法即可將它們畫出

根據實驗結果，Cocos2d-JS團隊對渲染框架進行了升級改進(如下圖所示)。可以看出，抽象出統一的渲染層后，v3.1的框架設計更加簡潔，層次更加清晰，更加易于維護。

V2.x(左)與V3.1(右)渲染框架范例圖對比

3.1渲染流程升級：渲染隊列 未來可支持自動批量渲染

根據最新的渲染框架，Cocos2d-JS v3.1對流程設計也進行了優化升級(新舊流程圖對比如下)。

(原版)V2.x渲染流程圖

(新版)V3.1渲染流程圖

新渲染流程主要有以下優勢：

➢ 引入渲染對象與全局坐標計算——只有需要繪制的對象才加入隊列中，采用整體渲染過程更加高效，避免了多余的上下文保存恢復與坐標計算等操作

➢ 避免重復調用遍歷函數——在沒有進行節點添加、節點刪除時，避免調用遍歷函數等不必要的循環與查詢

➢ 方便進行不同渲染模式切換——游戲元素管理與渲染處理層次更加清晰，職責更加分明，方便進行Canvas與WebGL渲染模式切換

在新的渲染設計中，增加了一個渲染命令對象，將代替原來的渲染函數進行繪圖。新的渲染命令可將各個渲染對象加入到渲染隊列，進行統一管理，并提供全局世界坐標。

渲染隊列只在子節點變化時才需要更新隊列，使得執行更加高效，并節省重復計算資源，提升渲染性能。渲染隊列的管理方式可幫助優化渲染算法與碰撞檢測(如紋理自動批量渲染合并等)，可方便地進行瓦片地圖(TileMap)算法改進，提升使用大地圖時的性能表現，未來也可加入單獨的渲染線程。

此外，新圖像渲染設計還可支持WebGL模式的自動批量渲染，為圖形渲染提速奠定了堅實基礎。開發中可避免頻繁的渲染節點添加、刪除動作，通過重用已有節點來進一步提升性能。可重用的對象在不用的時候可以設置隱藏，加入緩存池，等待重用。

通過更加智能、高效渲染模式，Cocos2d-JS v3.1新圖像渲染設計將最大化地降低CPU開銷，幫助節省渲染環節中的CPU消耗。Cocos2d-JS將繼續支持更多的精品HTML5游戲高性能地運行在移動瀏覽器上，致力打造Web平臺最高性能與最多特性的2d游戲引擎。

目前，Cocos2d-JS圖像渲染代碼已合并至https://github.com/cocos2d/cocos2d-html5/tree/Renderer ，歡迎各位開發者下載測試，圖形渲染的改進將在v3.1版本默認集成。

同時，也歡迎各位開發者來測試基于新圖形渲染實現的MoonWarriors打飛機游戲，訪問地址：http://cocos.b0.upaiyun.com/，或掃描下方二維碼快速進入游戲。