跨平臺開源項目Ngui【基準性能測試報告】

Ngui簡介

這是一個GUI的排版顯示引擎和跨平臺的GUI應用程序開發框架，基於NodeJS/OpenGL，這也是第一個在移動端Android/iOS融合NodeJS的前端GUI項目，至此JavaScript成爲了真正意義上先後端通吃的語言。

Ngui的目標：在此基礎上開發GUI應用程序可擁有開發WEB應用般簡單與速度同時兼顧Native應用程序的性能與體驗。

• 開源跨平臺移動項目Ngui【簡介】

• 開源跨平臺移動項目Ngui【入門】

• 開源跨平臺移動項目Ngui【視圖與佈局系統】

• 開源跨平臺移動項目Ngui【Action動做系統】

• 開源跨平臺移動項目Ngui【CSS樣式表規則及用法】

• Ngui API 文檔

Benchmark

距離項目第一個版本發佈已有一段時間，雖然有作基準測試，但這段時間忙着找工做與外包的事情，一直沒有向你們報告測試結果。
整體測試結果還算比較滿意，基本達到當初開發這個庫的初衷，但也有不足的地方。
在iPhone6上建立10萬個Div並對相關屬性進行設置須要10秒以上的時間，但在Android上這個時間會減小到1/2，
由於Android使用的V8，而iOS上是使用的JSC並經過膠水層粘合到V8的API，因此JS性能不如Android。

對於2d繪圖GPU不是主要瓶頸，主要瓶頸集中在CPU，但可優化的空間還很大。

測試主要集中在圖形方面，這包括JS調用API的時間開銷，圖形繪製的幀率，CPU的運行百分佔比。對於文件IO以以及網絡方面的測試相對比較少，這裏也不作陳述，由於庫自己是基於NodeJS基本沒有任何改動，相信你們對NodeJS的大名已如雷貫耳。

下面的數據是對iPhone6、 Google Nexus6 、iPad mini2的測試結果。

• 注意下面的時間單位都爲毫秒，CPU佔比以單核爲準100%表示一個CPU核心滿載運行。
• 還有一點須要注意在屏幕沒有任何變化時，CPU佔用通常爲1%左右。

View

在一個全屏Scroll視圖中建立10萬個Div視圖，而後滾動這個Scroll，這時查看CPU佔比以及頻幕刷新率。
Div視圖是自動佈局的，因此10萬個Div不會在屏幕中同時出現。這主要測試Dom的操做、視圖排版佈局、以及繪圖性能。

設備	Div數量	建立時間	Fsp	CPU佔比
iPhone6	10000	1257	60	45%
Nexus6	10000	670	60	48%
iPad mini2	10000	1269	60	60%
iPhone6	20000	2457	60	58%
Nexus6	20000	1265	60	70%
iPad mini2	20000	2460	60	90%
iPhone6	50000	6162	48	97%
Nexus6	50000	2987	39	97%
iPad mini2	50000	5959	42	97%
iPhone6	100000	12647	25	97%
Nexus6	100000	5859	20	97%
iPad mini2	100000	11964	22	97%

• 這是iPhone6截圖：

• 下面是主要的測試源碼:

new GUIApplication({ multisample: 2 }).start(
    <Root backgroundColor="#000">
        <Scroll width="full" height="full">
            ${
                Array.from({length:100000}, ()=>{
                    var color = new Color(random(0, 255), 
                        random(0, 255), random(0, 255), 255);
                    return <Div backgroundColor=color class="item" />;
                })
            }
        </Scroll>
    </Root>
)

Action

在同一屏幕隨機建立4000個視圖，並隨機設置旋轉動做，這時查看CPU佔用，與屏幕刷新率。這主要測試動做系統性能、同屏繪圖性能，以及設備的CPU與GPU的性能。CPU佔比越低幀數越高表示性能越好。
可

設備	數量	Fsp	CPU佔比
iPhone6	1000	60	54%
Nexus6	1000	60	65%
iPad mini2	1000	60	90%
iPhone6	2000	60	98%
Nexus6	2000	40	110%
iPad mini2	2000	40	88%
iPhone6	4000	30	104%
Nexus6	4000	20	110%
iPad mini2	4000	25	104%

從數據上能夠看出Nexus6的單核CPU性能不如iPhone6。

• 下面是iPhone6截圖：

CSS

建立10萬個樣式表所消耗的時間。

設備	建立時間
iPhone6	14699
Nexus6	10381
iPad mini2	14808

這裏與Dom操做很相似時間有點長，這是由於對屬性值的解析是經過調用JS方法完成，若是這個過程在Native中，這個時間會減小不少，這也是之後的版本所須要解決的問題。

Storage

下面分別是調用20萬次storage.set()、20萬次storage.get()、20萬次storage.del()消耗的時間。

設備	set()	get()	del()
iPhone6	4381	3821	3547
Nexus6	7178	6539	6567
iPad mini2	4951	4256	4179

End

上面的數據只能作大致參考，對這種GUI框架的測試我如今尚未找到比較好的標準。