信息系统实践手记6-JS调用Flex的性能问题一例

说明:信息系统实践手记系列是系笔者在平时研发中先后遇到的大小的问题,也许朴实和细微,但往往却是经常遇到的问题。笔者对其中比较典型的加以收集,描述,归纳和分享。

摘要:此文描述了笔者接触过的部分信息系统或平台之间的对接构型和情况,挂一漏万的总结分享之。

正文

系列随笔目录:信息系统实践手记 (http://www.cnblogs.com/taichu/p/5305603.html

作者:太初

转载说明:请指明原作者,连接,及出处。

正文

在笔者实践中,越到有些情况下(比如开发GIS地图应用),客户端的JS代码往往要调用GIS地图引擎的API。

有些API提供JS接口(版本),那是最方便的,有些提供诸如FLEX编程接口的API,让你在JS中调用,也是可以,但遇到如下情况,分享之。

我们的客户端是基于GIS地图的应用,用JS代码调用FLEX的API接口,需要通过FLEX的语句在GIS地图上呈现(放置)2万个对象(Object)。

方法A(老方法):

  1. 在JS中,通过业务层得到2万个设备的信息数据,诸如数组DEV[20000];
  2. 在JS中,将信息数据打包为hashmap(key -> value);
  3. 在JS中,将hashmap数据结构从JS传入Flex: JS --> Flex;
  4. 在Flex中,获得传入的hashmap结构,并循环显示在GIS地图上;
  5. 在Flex中,通过hashmap结构提供用key查value的服务:val = devicehashmap.get(key);

性能评估&分析:

  1. 在步骤2,3,4中消耗了20秒左右,数据量是2万个device;主要是步骤3较慢;
  2. 初步估计,JS中组成hashmap结构需要花费一定时间,但不多;可惜这种高级结构对JS/Flex两侧是个负担,传入的时候需要做必要的检查和转换,所以比较慢;
  3. 另外,考虑到JS/Flex相互调用结构比较复杂,如果传递高级结构,两侧系统容易在解析上不一致而会引起额外的开销;

(备注:其实还尝试过方法A的变种,就是在JS这里启动循环2万次,每次将一条设备信息传递给Flex并在GIS地图上显示Object,虽然每次数据量极小,但是来回调用JS/Flex2万次,效率更低下,所以也舍弃了,这里就不再讨论了)

方法B(新方法):

  1. 在JS中,通过业务层得到2万个设备的信息数据,诸如数组DEV[20000];
  2. 在JS中,将信息数据打包为长字符串String(带约定结构/类似JSON);
  3. 在JS中,将String从JS传入Flex: JS --> Flex;
  4. 在Flex中,获得传入String,并解析还原为hashmap,并循环显示在GIS地图上;
  5. 在Flex中,通过hashmap结构提供用key查value的服务:val = devicehashmap.get(key);

性能评估&分析:

  1. 在步骤3中消耗了1秒左右(其实是500ms左右),数据量是2万个device;
  2. 初步估计,经典的数据结构String,在大多数系统中都能很好的互操作,并获得最简单的支持和解析(比如大都是bytes字节数组,最后一个是标记,或者有一个小小的优雅的头结构等等),所以传递String极大的降低了时间开销。而对JS侧,拼接String比组装hashmap更快些;在Flex侧,自己解析String组装自己的haspmap(不是理解JS的hashmap结构)也很快。
  3. 总体上步骤1到5消耗在1秒左右,达到要求;

(备注:其实在尝试几种其他GIS引擎的时候,我们采用JS/API接口,就没有遇到如上的问题,这其实对技术选型是很重要的。)

总结:

  1. 很多时候,我们开发一个系统,实现了A和B的互相调用和操作,只是达成而已。更多情况下实际应用场景必然有数据压力和性能要求,而一旦上了性能,“可用”就不够了,还要考虑“可行”;
  2. 从众多的方法中找到切实可行的,才是最终目的。这其实要求对各种方法的理解和比对有深入的研究。但时间有限,经验有限,人力有限,所以只能做代价有限的尝试,并不断优化,这可能也是迭代开发或敏捷开发比较提倡的吧。
  3. 性能优化我在之前的篇幅已经粗略的谈到,只要有性能瓶颈,只要未达到物理(理论)可计算的性能边界,就能找到合适的方法来优化。
  4. 另外,技术选型也很重要,对于目前我们接触的几个GIS引擎,支持JSAPI的都未出现类似问题,而非JS的API接口就需要做额外的研究,尝试和优化。这对技术选型也是一个值得思考的例子。
时间: 2024-08-27 00:10:34

信息系统实践手记6-JS调用Flex的性能问题一例的相关文章

信息系统实践手记7-对接卡口平台细节

说明:信息系统实践手记系列是系笔者在平时研发中先后遇到的大小的问题,也许朴实和细微,但往往却是经常遇到的问题.笔者对其中比较典型的加以收集,描述,归纳和分享. 摘要:此文描述了笔者接触过的部分信息系统或平台之间的对接构型和情况,挂一漏万的总结分享之. 正文 系列随笔目录:信息系统实践手记 (http://www.cnblogs.com/taichu/p/5305603.html) 作者:太初 转载说明:请指明原作者,连接,及出处. 正文 在围绕地图(GIS)展开的应用中,需要接入很多第三方的平台

信息系统实践手记5-CACHE设计一例

说明:信息系统实践手记系列是系笔者在平时研发中先后遇到的大小的问题,也许朴实和细微,但往往却是经常遇到的问题.笔者对其中比较典型的加以收集,描述,归纳和分享. 摘要:此文描述了笔者接触过的部分信息系统或平台之间的对接构型和情况,挂一漏万的总结分享之. 正文 系列随笔目录:信息系统实践手记 (http://www.cnblogs.com/taichu/p/5305603.html) 作者:太初 转载说明:请指明原作者,连接,及出处. 1.CACHE是啥? 最近一直在弄scala,Spark,Pyt

信息系统实践手记3-按业务展开的代码剥离

说明:信息系统实践手记系列是系笔者在平时研发中先后遇到的大小的问题,也许朴实和细微,但往往却是经常遇到的问题.笔者对其中比较典型的加以收集,描述,归纳和分享. 摘要:介绍一下业务相关的代码优化(比较抽象,偏系统分析和设计). 正文 1.问题出现 如前面2次手记()提到的这个客户端,毛病不少,要开发的面面俱到,毫无瑕疵,难而又难.这次我们又遇到了其实可以泛泛的归为“面向方面的编程”的问题. [END]

信息系统实践手记4-平台对接的一些思考

说明:信息系统实践手记系列是系笔者在平时研发中先后遇到的大小的问题,也许朴实和细微,但往往却是经常遇到的问题.笔者对其中比较典型的加以收集,描述,归纳和分享. 摘要:此文描述了笔者接触过的部分信息系统或平台之间的对接构型和情况,挂一漏万的总结分享之. 正文 系列随笔目录:信息系统实践手记 (http://www.cnblogs.com/taichu/p/5305603.html) 作者:太初 转载说明:请指明原作者,连接,及出处. 1.什么是平台对接? 一般的信息系统有两种:一种是单套单功能的,

信息系统实践手记8-两模块通讯的一些事

说明:信息系统实践手记系列是系笔者在平时研发中先后遇到的大小的问题,也许朴实和细微,但往往却是经常遇到的问题.笔者对其中比较典型的加以收集,描述,归纳和分享. 摘要:此文描述了笔者接触过的部分信息系统或平台之间的对接构型和情况,挂一漏万的总结分享之. 正文 系列随笔目录:信息系统实践手记 (http://www.cnblogs.com/taichu/p/5305603.html) 作者:太初 转载说明:请指明原作者,连接,及出处. 正文 在信息系统开发和对接的过程中,免不了要遇到两个模块之间的消

JS与FLEX|AS实现互相调用

1.AS代码 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="200" height="200" creationComplete="initApp()"&

【FLEX教程】#007 如何让JS调用SWF里的方法

HTML中,JS如何调用SWF里面已经封装好的代码呢? 有一些事情Flex没办法实现的,需要通过调用JS来实现. eg: 当浏览器窗体关闭的时候,弹出一个对话框,提示用户是否退出?或者是否保存当前的操作? 让JS能够调用SWF里面的方法,需要再Flex添加一个回调函数 //注册外部函数 ExternalInterface.addCallback("checkExit",checkExit); 提示:1.第一个参数:方法的key, 在JS调用的时候,就是用这个名字.第二个参数:Flex中

Android的WebView通过JS调用java代码

做项目时候会遇到我们用WebView 打开一个web,希望这个web可以调用自己的一些方法,比如我们在进一个web页面,然后当我们点击web上的某个按钮时,希望能判断当前手机端是否已经登录,如果未登录,那么就会跳转到登录页面(登陆页面是另一个Activity).这个时候,一个简单的做法就是在按钮动作事件的js上调用java的方法,从而起到判断是否登录,并决定是否跳转到另一个页面. Google的WebView为我们提供了 addJavascriptInterface(Object obj, St

asp.net调用前台js调用后台代码分享

C#前台js调用后台代码 前台js <script type="text/javascript" language="javascript"> function Ceshi() { var a = "<%=Getstr()%>"; alert(a); } </script> <input type="button" onclick="Ceshi();" value=