cocos2d-js 各瀏覽器上的表現

標籤：style   blog   http   os   sp   for   strong   on   2014   

其實這裡只簡單對比3個瀏覽器，估計也足夠代表性了。

結論是：

1、有webgl支援的時候，就可以盡情的耍吧；

2、沒有webgl，能native就native。如果不行，就只能在canvas上做小塊的地區，減少每幀的變化。

 

 

1、PC的Chrome（webgl）

首先看看官方的performance test。

粒子系統達到最大值3000也毫無壓力。

 

 

普通的小人轉啊轉，1000個以內不成問題，超過1000效能開始下滑。

 

再自己寫一個單圖多sprite不斷旋轉的測試。左側是沒有開批處理的情況，1600個小人就開始撐不住了。右側開了批處理，但也好不了多少，也是到1700左右就撐不住了。

這個測試在PC上沒太多意義，因為可能底層自動做了批處理。這個測試主要是為了後邊手機上運行。

 

2、小米1的內嵌瀏覽器（跟google瀏覽器效率類似，應該是內嵌了google瀏覽器）

本來想在手機上跑官方的測試，但發現死活打不開。算了。。。

測試程式尺寸是720*1280，由於尺寸太大，這個也是造成運行不流暢的原因。每幀都要重繪，是有點吃力。

瀏覽器跟Google瀏覽器類似，操作也是類似的（雙擊放大）。純canvas沒有webgl支援，剛開啟還沒放小人就只有50幀了。放50個小人就只有20fps了，原來為了更精確的看看canvas效能，看來不行了。

而開不開SpriteBatchNode是沒什麼差別的，甚至說開了SpriteBatchNode效能還要差一點點（最後的圖）。

 

 

3、小米1的UC瀏覽器

UC也是類似的情況了。

 

 

後邊再測試，發現canvas大小還是很有影響力的（因為canvas機制影響下，只能每幀清空全屏然後重繪）。

如果尺寸改為300*400，那麼50個小人的情況下，還是可以妥妥的30+幀，這還是能接受的。畢竟只是小米1。

如果100個小人，就只能勉強的22幀，這算是底線吧。

cocos2d-js 各瀏覽器上的表現