文档章节

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

nosand
 nosand
发布于 2014/06/13 01:35
字数 745
阅读 3630
收藏 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
粉丝 78
博文 40
码字总数 33601
作品 0
徐汇
加载中

评论(3)

nosand
nosand

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

开源吗?
没想到好的开源模式,所以没有这方面的计划
多多de棉花糖
多多de棉花糖
开源吗?
ihuotui
ihuotui
厉害。
用html5实现一个高性能GIS地图可视化

以瓦片形式的栅格图像格式(PNG或JPEG图像)绘制地图的传统方法通常是今天在网络上传递地理空间数据的方式。这是通过在服务器上生产瓦片图像,并将它们提供给地图客户端。这种技术已被许多W...

wuwulh
2012/11/09
0
0
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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Linux环境搭建 | VMware下共享文件夹的实现

在进行程序开发的过程中,我们经常要在主机与虚拟机之间传递文件,比如说,源代码位于虚拟机,而在主机下阅读或修改源代码,这里就需要使用到 「共享文件」 这个机制了。本文介绍了两种共享文...

良许Linux
57分钟前
4
0
JUC锁框架——AQS源码分析

JUC锁介绍 Java的并发框架JUC(java.util.concurrent)中锁是最重要的一个工具。因为锁,才能实现正确的并发访问。而AbstractQueuedSynchronizer(AQS)是一个用来构建锁和同步器的框架,使用A...

长头发-dawn
今天
1
0
docker中安装了RabbitMQ后无法访问其Web管理页面

在官网找了"$ docker run -d --hostname my-rabbit --name some-rabbit -p 8080:15672 rabbitmq:3-management"这条安装命令,在docker上安装了RabbitMQ,,结果输入http://localhost:8080并不......

钟然千落
今天
4
1
spring-cloud | 分布式session共享

写在前面的话 各位小伙伴,你们有福了,这一节不仅教大家怎么实现分布式session的问题,还用kotlin开发,喜欢kotlin的小伙伴是不是很开心! 以前在写Android的时候,就对客户端请求有一定的认...

冯文议
今天
3
0
c语言之内存分配笔记

先看一个数组: short array[5] = {1,2} // 这儿定义的一个int类型的数组,数组第1和第2个元素值是1和2.其余后面默认会给值为0; 或者 short array[] = {1,2};//这儿数组第1和第2个元素,数组...

DannyCoder
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部