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

本文的话题是：性能，HTML五、JS、Qunee组件的性能和效率问题

历史回顾

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

静态拓扑图性能

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

Qunee拓扑图加载时间报表

动态拓扑图性能

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

大数据量下弹簧布局

Qunee性能测试

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

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