Ngui簡介

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

Ngui的目標(biāo)：在此基礎(chǔ)上開發(fā)GUI應(yīng)用程序可擁有開發(fā)WEB應(yīng)用般簡單與速度同時兼顧Native應(yīng)用程序的性能與體驗。

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

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

• 開源跨平臺移動項目Ngui【視圖與布局系統(tǒng)】

• 開源跨平臺移動項目Ngui【Action動作系統(tǒng)】

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

• Ngui API 文檔

Benchmark

距離項目第一個版本發(fā)布已有一段時間，雖然有做基準(zhǔn)測試，但這段時間忙著找工作與外包的事情，一直沒有向大家報告測試結(jié)果。 總體測試結(jié)果還算比較滿意，基本達(dá)到當(dāng)初開發(fā)這個庫的初衷，但也有不足的地方。 在iPhone6上創(chuàng)建10萬個Div并對相關(guān)屬性進(jìn)行設(shè)置需要10秒以上的時間，但在Android上這個時間會減少到1/2， 因為Android使用的V8，而iOS上是使用的JSC并通過膠水層粘合到V8的API，所以JS性能不如Android。

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

測試主要集中在圖形方面，這包括JS調(diào)用API的時間開銷，圖形繪制的幀率，CPU的運(yùn)行百分占比。對于文件IO以以及網(wǎng)絡(luò)方面的測試相對比較少，這里也不做陳述，因為庫本身是基于NodeJS基本沒有任何改動，相信大家對NodeJS的大名已如雷貫耳。

下面的數(shù)據(jù)是對iPhone6、 Google Nexus6 、iPad mini2的測試結(jié)果。

• 注意下面的時間單位都為毫秒，CPU占比以單核為準(zhǔn)100%表示一個CPU核心滿載運(yùn)行。
• 還有一點(diǎn)需要注意在屏幕沒有任何變化時，CPU占用一般為1%左右。

View

在一個全屏Scroll視圖中創(chuàng)建10萬個Div視圖，然后滾動這個Scroll，這時查看CPU占比以及頻幕刷新率。 Div視圖是自動布局的，所以10萬個Div不會在屏幕中同時出現(xiàn)。這主要測試Dom的操作、視圖排版布局、以及繪圖性能。

• 這是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

在同一屏幕隨機(jī)創(chuàng)建4000個視圖，并隨機(jī)設(shè)置旋轉(zhuǎn)動作，這時查看CPU占用，與屏幕刷新率。這主要測試動作系統(tǒng)性能、同屏繪圖性能，以及設(shè)備的CPU與GPU的性能。CPU占比越低幀數(shù)越高表示性能越好。 可

從數(shù)據(jù)上可以看出Nexus6的單核CPU性能不如iPhone6。

• 下面是iPhone6截圖：

CSS

創(chuàng)建10萬個樣式表所消耗的時間。

這里與Dom操作很類似時間有點(diǎn)長，這是因為對屬性值的解析是通過調(diào)用JS方法完成，如果這個過程在Native中，這個時間會減少很多，這也是以后的版本所需要解決的問題。

Storage

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

End

上面的數(shù)據(jù)只能做大體參考，對這種GUI框架的測試我現(xiàn)在還沒有找到比較好的標(biāo)準(zhǔn)。