Ngui簡(jiǎn)介

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

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

• 開(kāi)源跨平臺(tái)移動(dòng)項(xiàng)目Ngui【簡(jiǎn)介】

• 開(kāi)源跨平臺(tái)移動(dòng)項(xiàng)目Ngui【入門】

• 開(kāi)源跨平臺(tái)移動(dòng)項(xiàng)目Ngui【視圖與布局系統(tǒng)】

• 開(kāi)源跨平臺(tái)移動(dòng)項(xiàng)目Ngui【Action動(dòng)作系統(tǒng)】

• 開(kāi)源跨平臺(tái)移動(dòng)項(xiàng)目Ngui【CSS樣式表規(guī)則及用法】

• Ngui API 文檔

Benchmark

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

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

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

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

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

View

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

• 這是iPhone6截圖：

• 下面是主要的測(cè)試源碼:

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個(gè)視圖，并隨機(jī)設(shè)置旋轉(zhuǎn)動(dòng)作，這時(shí)查看CPU占用，與屏幕刷新率。這主要測(cè)試動(dòng)作系統(tǒng)性能、同屏繪圖性能，以及設(shè)備的CPU與GPU的性能。CPU占比越低幀數(shù)越高表示性能越好。 可

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

• 下面是iPhone6截圖：

CSS

創(chuàng)建10萬(wàn)個(gè)樣式表所消耗的時(shí)間。

這里與Dom操作很類似時(shí)間有點(diǎn)長(zhǎng)，這是因?yàn)閷?duì)屬性值的解析是通過(guò)調(diào)用JS方法完成，如果這個(gè)過(guò)程在Native中，這個(gè)時(shí)間會(huì)減少很多，這也是以后的版本所需要解決的問(wèn)題。

Storage

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

End

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