跨平台开源项目 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 的操作、视图排版布局、以及绘图性能。

• 这是 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 占比越低帧数越高表示性能越好。
可

从数据上可以看出 Nexus6 的单核 CPU 性能不如 iPhone6。

• 下面是 iPhone6 截图：

CSS

创建 10 万个样式表所消耗的时间。

这里与 Dom 操作很类似时间有点长，这是因为对属性值的解析是通过调用 JS 方法完成，如果这个过程在 Native 中，这个时间会减少很多，这也是以后的版本所需要解决的问题。

Storage

下面分别是调用 20 万次 storage.set()、20 万次 storage.get()、20 万次 storage.del() 消耗的时间。

End

上面的数据只能做大体参考，对这种 GUI 框架的测试我现在还没有找到比较好的标准。