HTML5 网络拓扑图性能优化

  • 时间:
  • 浏览:1
  • 来源:UU直播快三官方_大发UU直播快3

文本始终显示语句,在性能上还是不行的,就如上方所说的,是不合格的。那末我么该如可优化,让性能有质的提升呢?

最后创建从前 FormPane 放上右上角,用于存放几个 控制按钮及几个 ComboBox 确定项,才能让 GraphView 运行在不同的布局模式下,一同哪几种功能也才能用来检测页面性能,在布局的过程中算不算流畅,具体的代码才能通过浏览器的 Sources 查看。

GraphView 的 mp(addPropertyChangeListener)土法律法律依据是监听 GraphView的属性变化,当监听到 zoom 属性变化的前一天,将 zooming 情况汇报设置为 true,前一天在 zoom 的过程中那末启动动画语句,就不不触发 onZoomEnded 回调,什么都时需个人添加计时器,过段时间将 zooming 情况汇报改掉,可是 重新绘制下 GraphView。

GraphView 的 mi(addInteractorListener)土法律法律依据是监听用户对 GraphView 的操作动作,在监听到 beginPan 时将 panning 情况汇报设置为 true ,在监听到 endPan 是将 panning 情况汇报设置为 false,并重绘 GraphView。

亲戚当当我门 歌词 今天就来谈谈 HT for Web 性能相关的问题图片。在 HT 中,有什么都地方才能设置文本,每个节点上方都才能设置从前 label 和从前 note 文本,前一天全开启语句,绘制从前节点就要附带绘制 4 个文本,假使 说绘制 文本的性能消耗是绘制图片性能消耗的 3 倍语句,附带绘制 4 个文本,就想当与多出 12 倍的性能消耗,这节点以多语句,可想而知,不管是哪个引擎时需前一天 hold 得住从前的性能消耗。

在文章的开头有提到,亲戚当当我门 歌词 才能采用在操作交互的过程中不绘制文本,来提升性能,让页面的呈现更加流畅。那末该为社 么实现才能让操作交互过程中不绘制文本呢?具体 Demo 链接:http://www.hightopo.com/demo/labelVisible/invisible.html。看码:

首先 GraphView 提供了 isLabelVisible  的土法律法律依据,让用户重载自定义文本的显示算不算,state 变量是用来标记当前的操作情况汇报,zooming 代表当前的 GraphView正在缩放,panning 代表当前的 GraphView 正在移动整个场景,autoLayout 代表正在做自动布局操作。

亲戚当当我门 歌词 来看看具体的 Demo,链接:http://www.hightopo.com/demo/labelVisible/visible.html。接下来解析下具体代码的实现。

在 FormPane 中的某些操作会对 GraphView 中的节点进行自动布局,可是 在 FormPane 中会设置 autoLayout 情况汇报,前一天代码比较多,我在这边就贴代码了。亲戚当当我门 歌词 来看看,添加上方的代码后,对 GraphView 操作后的效果图:

接着是常见网络拓扑图 GraphView 组件,并将其添加到 DOM 中,重载 GraphView 的 getLabel 土法律法律依据设置图元的文本,让每个节点时需文本。

既然绘制文本的性能消耗无法处里,那末亲戚当当我门 歌词 要如可提高系统的整体性能呢?换个思路,绘制文本会有高性能消耗,原困操作上方的延迟和卡顿,那末我是时需才能在操作时不绘制文本呢,将文本绘制所消耗的性能节省下来,用在某些的性能消耗上,从前是时需就才能处里操作延迟和卡顿的问题图片呢?

接下来调用 createNodes 土法律法律依据创建所有的节点,创建完代码后,创建从前 AutoLayout 来自动布局所有节点,自动布局为开发人员节省手动布局的时间,在速率单位单位 上大大提升,在布局前一天,让 GraphView 中的节点自适应屏幕,让所有节点都显示在当前页面中。

上图是在缩放 GraphView 时的效果,才能发现所有的文本时需见了,用户操作起来可是 会延迟和卡顿了问题图片,从前用户操作交互的性能问题图片也就处里了。

亲戚当当我门 歌词 不妨来试试,在 GraphView 中添加若干个 node、edge、group 等节点,可是 每个节点上都显示文本(包括线条,上图所示),看看拓扑的缩放效果为社 么样。没次缩放时需等上两三秒,性能我我其实是差得不行,从前的应用肯定是不合格的。

HTML5 中的 Canvas 对文本的渲染(fillText,strokeText)性能时需太好,比如设置字体(font)、文本旋转(rotation),前一天绘制较多的文本时,某些交互操作会手动很大的影响,操作起来没那末顺畅,体验前一天极其差,这时需亲戚当当我门 歌词 你还还都能能的结果,再进一步和图片的绘制进行比较比较,我能 发现,绘制图片和绘制文本在性能上时需从前等级的,在性能上绘制图片会好那末来不多。

上方的代码是页面初始化代码,首先先监听 media 的值变化,处里在不同的 devicePixelRatio 屏幕中切换 而原困页面不清晰,ht.Default.setDevicePixelRatio() 土法律法律依据会更新 HT 系统中存放 devicePixelRatio 的变量,可是 刷新页面上所有的 HT 组件,从前就才能保证页面一定不不不清晰。