HTML5高性能拓扑图 - 十万图元渲染


本文的话题是:性能,HTML5、JS、Qunee组件的性能和效率问题

历史回顾

以往提到Javascript,联想到的是缓慢的、容易出错的小东西,一种脚本语言,现在浏览器的发展,js引擎的优化,js已经今非昔比,无论在浏览器端还是服务器端,都有一席之地,结合HTML5开发企业级应用变得切合实际,以往要在浏览器中实现丰富的图形效果,通常会选择flex富客服端解决方案,也有些Web2.0时代的组件,比如Extjs,以及各种图表组件,但性能上并不理想,随着HTML5的普及,Web组件有了新的思路,抛弃老IE浏览器,了却后顾之忧,实现真正的高性能,这一点Qunee图形组件已经将Flex远远抛到脑后,实现上万图元,流畅操作

静态拓扑图性能

首先是常规的性能参数,拓扑图加载时间,通过对连线的简化,使用Qunee开发版本,可以两秒内渲染一万图元,而且平移缩放,节点移动,框选都非常流畅,甚至我们测试过十万数量级,五年前的老机器上测试,可以在二十多秒渲染,而且依然可以操作,导出2亿像素的超大图也没问题,详情可参看后面的视频效果

Qunee拓扑图加载时间报表

Qunee拓扑图加载时间报表

动态拓扑图性能

还有一种动态图的情况,通过动画或者不停的更改图元样式,或者增减操作,拓扑图频繁刷新,我们选择一个弹簧布局来测试这种场景下qunee组件的表现,结果是两千数量级时表现流畅,六千数量级时依旧可用,详情参看视频后半段

HTML5高性能拓扑图 - 十万图元渲染

大数据量下弹簧布局

Qunee性能测试

十万级图元拓扑图的考验,oschina不支持HTML5视频,没办法只能贴上youku的flash,原文使用HTML5 video: 

http://blog.qunee.com/?p=4676

你可能感兴趣的:(html5,性能测试,拓扑图,qunee)