HTML5 中的 Canvas 对文本的渲染(fillText,strokeText)性能都不太好,比如设置字体(font)、文本旋转(rotation),如果绘制较多的文本时,一些交互操作会手动很大的影响,操作起来没那么顺畅,体验将会极其差,这不是我们想要的结果,再进一步和图片的绘制进行比较比较,你会发现,绘制图片和绘制文本在性能上不是一个等级的,在性能上绘制图片会好太多。
我们今天就来谈谈 HT for Web 性能相关的问题。在 HT 中,有很多地方可以设置文本,每个节点上面都可以设置两个 label 和两个 note 文本,如果全开启的话,绘制一个节点就要附带绘制 4 个文本,假如说绘制 文本的性能消耗是绘制图片性能消耗的 3 倍的话,附带绘制 4 个文本,就想当与多出 12 倍的性能消耗,这节点以多的话,可想而知,不管是哪个引擎都不可能 hold 得住这样的性能消耗。
既然绘制文本的性能消耗无法避免,那么我们要如何提高系统的整体性能呢?换个思路,绘制文本会有高性能消耗,导致操作上面的延迟和卡顿,那么我是不是可以在操作时不绘制文本呢,将文本绘制所消耗的性能节省下来,用在其他的性能消耗上,这样是不是就可以解决操作延迟和卡顿的问题呢?
我们不妨来试试,在 GraphView 中添加若干个 node、edge、group 等节点,并且每个节点上都显示文本(包括线条,上图所示),看看拓扑的缩放效果怎么样。没次缩放都要等上两三秒,性能实在是差得不行,这样的应用肯定是不合格的。
我们来看看具体的 Demo,链接:http://www.hightopo.com/demo/labelVisible/visible.html。接下来解析下具体代码的实现。
var init = function() { window.matchMedia('screen and (min-resolution: 2dppx)'). addListener(function() { ht.Default.setDevicePixelRatio(); }); var g2d = new ht.graph.GraphView(), dm = g2d.dm(); g2d.addToDOM(); g2d.getLabel = function(data) { if (data.s('label')) return data.s('label'); if (data instanceof ht.Edge) return 'from:' + data.getSourceAgent().toString() + ' to:' + data.getTargetAgent().toString(); return data.toString(); }; createNodes(dm); var autoLayout = new ht.layout.AutoLayout(g2d); autoLayout.setAnimate(true); autoLayout.layout('symmetric', function() { g2d.fitContent(true); }); createFormPane(g2d, autoLayout); };
上面的代码是页面初始化代码,首先先监听 media 的值变化,防止在不同的 devicePixelRatio 屏幕中切换 而导致页面不清晰,ht.Default.setDevicePixelRatio() 方法会更新 HT 系统中存放 devicePixelRatio 的变量,然后刷新页面上所有的 HT 组件,这样就可以保证页面一定不会不清晰。
接着是常见网络拓扑图 GraphView 组件,并将其添加到 DOM 中,重载 GraphView 的 getLabel 方法设置图元的文本,让每个节点都有文本。
接下来调用 createNodes 方法创建所有的节点,创建完代码后,创建一个 AutoLayout 来自动布局所有节点,自动布局为开发人员节省手动布局的时间,在效率上大大提升,在布局完后,让 GraphView 中的节点自适应屏幕,让所有节点都显示在当前页面中。
最后创建一个 FormPane 放在右上角,用于存放几个控制按钮及几个 ComboBox 选择项,可以让 GraphView 运行在不同的布局模式下,同时这些功能也可以用来检测页面性能,在布局的过程中是否流畅,具体的代码可以通过浏览器的 Sources 查看。
文本始终显示的话,在性能上还是不行的,就如上面所说的,是不合格的。那么我么该如何优化,让性能有质的提升呢?
在文章的开头有提到,我们可以采用在操作交互的过程中不绘制文本,来提升性能,让页面的呈现更加流畅。那么该怎么实现才能让操作交互过程中不绘制文本呢?具体 Demo 链接:http://www.hightopo.com/demo/labelVisible/unvisible.html。看码:
var state = {}; g2d.isLabelVisible = function(data) { return !state.zooming && !state.panning && !state.autoLayout; }; g2d.onAutoLayoutEnded = function() { state.autoLayout = false; }; g2d.onZoomEnded = function() { state.zooming = false; }; var timer = null; g2d.mp(function(e) { if (e.property === 'zoom') { state.zooming = true; if (timer) clearTimeout(timer); timer = setTimeout(function() { timer = null; state.zooming = false; g2d.redraw(); }, 100); } }); g2d.mi(function(e) { if (e.kind === 'beginPan') state.panning = true; if (e.kind === 'endPan') { state.panning = false; g2d.redraw(); } });
GraphView 的 mp(addPropertyChangeListener)方法是监听 GraphView的属性变化,当监听到 zoom 属性变化的时候,将 zooming 状态设置为 true,如果在 zoom 的过程中没有启动动画的话,就不会触发 onZoomEnded 回调,所以需要自己添加计时器,过段时间将 zooming 状态改掉,并且重新绘制下 GraphView。
GraphView 的 mi(addInteractorListener)方法是监听用户对 GraphView 的操作动作,在监听到 beginPan 时将 panning 状态设置为 true ,在监听到 endPan 是将 panning 状态设置为 false,并重绘 GraphView。
在 FormPane 中的一些操作会对 GraphView 中的节点进行自动布局,因此在 FormPane 中会设置 autoLayout 状态,由于代码比较多,我在这边就贴代码了。我们来看看,加上上面的代码后,对 GraphView 操作后的效果图:
上图是在缩放 GraphView 时的效果,可以发现所有的文本都不见了,用户操作起来也不会延迟和卡顿了现象,这样用户操作交互的性能问题也就解决了。
相关推荐
电信网管的网络拓扑图、电力的电网拓扑图、工业控制的监控图、工作流程图、思维脑图等等都可以用 HTML5 的图形化界面来完成,所有这些简称为拓扑图。使用 HT 会让你的开发变得更加快速,快来玩玩吧!
好强大的HTML5拓扑图编辑器,不敢私有,0资源分分享给大家,我是做电力SCADA要编辑电力配网图的,但申请看描述该图形组件也能应用到电信、工控等其他需要图形可视化的领域,以前一直用C++做客户端,今天玩了下...
html5绘图工具 基于 HTML5 的 Canvas 技术,拓扑图是电力和电信的叫法
主要介绍了快速创建 HTML5 Canvas 电信网络拓扑图的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
这个Repository提供的网络拓扑, 是一套完整可用的面向电信级/企业级用户的HTML5网络拓扑图方案. 图形是基于SVG绘制的, 同时配备了一系列UI套件, 使您更直观的了解Topology是如何工作的 指南 因为文件较多, 所以建议...
SEO--网络性能优化 电信网络运维 3本pdf 3个txt文档 我搜集的 绝对物超所值
物联网拓扑图 3G 卫星 SN网关 SN以太 超市 传感器网络 ----------------------- 服 务 物联网图书馆 ࠀࠂࠄࠎࠐࠒࠔࠖ࠘ࠚࠜࠪࠬ࠰ࡢࡤࡦࡨࢠࢢ짤꿤趍趍趍禯浹呥浭测㩥̠퍪阂Ĉ栖௰$䩏䩑ࡕ嘁Ĉ ᘑη 伀͊儀 ...
今天开始我们就从最基础解析如何构建 HTML5 Canvas 拓扑图应用,HT 内部封装了一个拓扑图形组件 ht.graph.GraphView(以下简称 GraphView)是 HT 框架中 2D 功能最丰富的组件,其相关类库都在 ht.graph 包下。...
电信室内CDMA信号网络测试及优化pdf,电信室内CDMA信号网络测试及优化
电信设备抗地震性能检测规范,2005版,是国内唯一电信设备抗地震性能检测规范。
Oracle查询优化技术在电信业务报表系统中的应用
通信概论
基于Oracle数据库电信CRM经营分析系统的性能优化.pdf
上海电信城域网优化网络是为了适应中国电信CN2高质量业务落地和 上海电信多业务承载的要求而建设。
初级电信CDMA 网络优化考试试题及答案
我们在开发应用都知道IO是系统性能的瓶颈,在应用开发中,我们会经常碰到以下问题: 1.系统在不断实时地访问数据库时,一秒钟对同一个表操作几千,几万次以上,导致数据表死锁或则处理太慢; 2.对数据实时计算,...
性能问题不仅仅是技术问题,性能管理甚至重于优化技术本身。通过性能优化这样精细、缜密的工作,不仅能看到事物的本质和规律,更能让有心者对这个大千世界充满感慨。以技术为平台,以轻松、调侃方式抒发作者对IT行业...
2023年电信网络优化协优培训(中级)视频、题库