HTML5 网络拓扑图性能优化

  • 时间:
  • 浏览:3

GraphView 的 mp(addPropertyChangeListener)最好的法律措施是监听 GraphView的属性变化,当监听到 zoom 属性变化的前一天,将 zooming 情況设置为 true,可能在 zoom 的过程中没办法 启动动画语录,就不用触发 onZoomEnded 回调,统统 不用 另一方换成计时器,过段时间将 zooming 情況改掉,以后 重新绘制下 GraphView。

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

在文章的开头有提到,其他人不用 采用在操作交互的过程中不绘制文本,来提升性能,让页面的呈现更加流畅。没办法 该为社 在么在实现不用 让操作交互过程中不绘制文本呢?具体 Demo 链接:http://www.hightopo.com/demo/labelVisible/invisible.html。看码:

上图是在缩放 GraphView 时的效果,不用 发现所有的文本都在见了,用户操作起来统统 会延迟和卡顿了问题图片,前一天用户操作交互的性能问题图片也就除理了。

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

其他人今天就来谈谈 HT for Web 性能相关的问题图片。在 HT 中,有统统 地方不用 设置文本,每个节点里边都不用 设置前一天 label 和前一天 note 文本,可能全开启语录,绘制前一天节点就要附带绘制 4 个文本,若果说绘制 文本的性能消耗是绘制图片性能消耗的 3 倍语录,附带绘制 4 个文本,就想当与多出 12 倍的性能消耗,这节点以多语录,可想而知,不管是哪个引擎都可能 hold 得住前一天的性能消耗。

在 FormPane 中的其他操作会对 GraphView 中的节点进行自动布局,以后 在 FormPane 中会设置 autoLayout 情況,可能代码比较多,我在这边就贴代码了。其他人来看看,换成里边的代码后,对 GraphView 操作后的效果图:

首先 GraphView 提供了 isLabelVisible  的最好的法律措施,让用户重载自定义文本的显示与否,state 变量是用来标记当前的操作情況,zooming 代表当前的 GraphView正在缩放,panning 代表当前的 GraphView 正在移动整个场景,autoLayout 代表正在做自动布局操作。

最后创建前一天 FormPane 装进右上角,用于存放好多个控制按钮及好多个 ComboBox 选折 项,不用 让 GraphView 运行在不同的布局模式下,一齐哪几种功能只是用 用来检测页面性能,在布局的过程中与否流畅,具体的代码不用 通过浏览器的 Sources 查看。

文本始终显示语录,在性能上还是不行的,就如里边所说的,是不合格的。没办法 我么该怎么优化,让性能有质的提升呢?

既然绘制文本的性能消耗无法除理,没办法 其他人要怎么提高系统的整体性能呢?换个思路,绘制文本会有高性能消耗,由于操作里边的延迟和卡顿,没办法 我是都在不用 在操作时不绘制文本呢,将文本绘制所消耗的性能节省下来,用在其他的性能消耗上,前一天是都在就不用 除理操作延迟和卡顿的问题图片呢?

GraphView 的 mi(addInteractorListener)最好的法律措施是监听用户对 GraphView 的操作动作,在监听到 beginPan 时将 panning 情況设置为 true ,在监听到 endPan 是将 panning 情況设置为 false,并重绘 GraphView。

接着是常见网络拓扑图 GraphView 组件,并将其换成到 DOM 中,重载 GraphView 的 getLabel 最好的法律措施设置图元的文本,让每个节点都在文本。

其他人来看看具体的 Demo,链接:http://www.hightopo.com/demo/labelVisible/visible.html。接下来解析下具体代码的实现。

其他人不妨来试试,在 GraphView 中换成若干个 node、edge、group 等节点,以后 每个节点上都显示文本(包括线条,上图所示),看看拓扑的缩放效果为社 在么在样。没次缩放都在等上两三秒,性能嘴笨 是差得不行,前一天的应用肯定是不合格的。

里边的代码是页面初始化代码,首先先监听 media 的值变化,除理在不同的 devicePixelRatio 屏幕中切换 只由于页面不清晰,ht.Default.setDevicePixelRatio() 最好的法律措施会更新 HT 系统中存放 devicePixelRatio 的变量,以后 刷新页面上所有的 HT 组件,前一天就不用 保证页面一定不用不清晰。