文档章节

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

nosand
 nosand
发布于 2014/06/13 01:35
字数 745
阅读 3677
收藏 61


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

历史回顾

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

静态拓扑图性能

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

Qunee拓扑图加载时间报表

Qunee拓扑图加载时间报表

动态拓扑图性能

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

大数据量下弹簧布局

Qunee性能测试

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

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

© 著作权归作者所有

共有 人打赏支持
nosand
粉丝 80
博文 40
码字总数 33601
作品 0
徐汇
私信 提问
加载中

评论(3)

nosand
nosand

引用来自“多多de棉花糖”的评论

开源吗?
没想到好的开源模式,所以没有这方面的计划
多多de棉花糖
多多de棉花糖
开源吗?
ihuotui
ihuotui
厉害。
HTML5版的String Avoider小游戏

HTML5版的String Avoider小游戏 http://www.newgrounds.com/portal/view/300760 蛮简单也蛮考验耐心,从游戏起始点移动鼠标到终点位置,鼠标移动过程绘制出移动轨迹的String平滑曲线,整个过...

xhload3d
2014/12/28
0
1
基于HTML5实现的Heatmap热图3D应用

Heatmap热图通过众多数据点信息,汇聚成直观可视化颜色效果,热图已广泛被应用于气象预报、医疗成像、机房温度监控等行业,甚至应用于竞技体育领域的数据分析。 已有众多文章分享了生成Heatm...

xhload3d
2014/09/12
0
35
快速开发基于 HTML5 网络拓扑图应用

采用 HT 开发网络拓扑图非常容易,例如《入门手册》的第一个小例子麻雀虽小五脏俱全:http://www.hightopo.com/guide/guide/core/beginners/examples/example_overview.html 该例子展示了如何...

xhload3d
2016/09/27
290
0
基于HT for Web的Web SCADA工控移动应用

在电力、油田燃气、供水管网等工业自动化领域Web SCADA的概念已经提出了多年,早先年的Web SCADA前端技术大部分还是基于Flex、Silverlight甚至Applet这样的重客户端方案,在HTML5流行前VML和...

xhload3d
2015/03/18
0
2
基于HTML5的在线地图 - 加载TopoJSON数据

Qunee for HTML5有许多地图的示例,包括地铁图,基于SVG数据的地图,结合leaflet的地图等,每个示例都是单独的实现,代码也各有不同,于是我们想,是否能将这些方案统一起来,实现一种地图解...

nosand
2015/03/29
0
2

没有更多内容

加载失败,请刷新页面

加载更多

大数据教程(8.3)wordcount程序运行过程的解析

上一篇博客分享了wordcount的源码编写、原理实现,本节将对wordcount在hadoop内部运行过程进行解析。 运行流程图如下: 上图中说明:mr appmaster启动后,会根据任务分配规则进行任务的启动,...

em_aaron
26分钟前
1
0
Zookeeper安装(LINUX环境)

一、上传安装包 二、解压安装包 mkdir -p /usr/lib/jvm tar -zxvf zookeeper-3.4.10.tar.gz -C /usr/lib/jvm 三、修改配置文件 复制zoo_sample.cfg改名zoo.cfg 给zoo.cfg赋权 chmod 777 zoo.......

开源中国首席碉堡了
48分钟前
2
0
【面试必问】支撑百万并发的"IO多路复用"技术你了解吗?

多路复用其实并不是什么新技术,它的作用是在一个通讯连接的基础上可以同时进行多个请求响应处理。对于网络通讯来其实不存在这一说法,因为网络层面只负责数据传输;由于上层应用协议的制订问...

Java干货分享
51分钟前
3
0
Rotate Array(leetCode189)

Given an array, rotate the array to the right by k steps, where k is non-negative. Example 1: Input: [1,2,3,4,5,6,7] and k = 3Output: [5,6,7,1,2,3,4]Explanation:rotate 1 s......

woshixin
今天
1
0
给女朋友讲解什么是Optional【JDK 8特性】

前言 只有光头才能变强 前两天带女朋友去图书馆了,随手就给她来了一本《与孩子一起学编程》的书,于是今天就给女朋友讲解一下什么是Optional类。 至于她能不能看懂,那肯定是看不懂的。(学到...

Java3y
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部