信息系统实践手记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(老方法):
- 在JS中,通过业务层得到2万个设备的信息数据,诸如数组DEV[20000];
- 在JS中,将信息数据打包为hashmap(key -> value);
- 在JS中,将hashmap数据结构从JS传入Flex: JS --> Flex;
- 在Flex中,获得传入的hashmap结构,并循环显示在GIS地图上;
- 在Flex中,通过hashmap结构提供用key查value的服务:val = devicehashmap.get(key);
性能评估&分析:
- 在步骤2,3,4中消耗了20秒左右,数据量是2万个device;主要是步骤3较慢;
- 初步估计,JS中组成hashmap结构需要花费一定时间,但不多;可惜这种高级结构对JS/Flex两侧是个负担,传入的时候需要做必要的检查和转换,所以比较慢;
- 另外,考虑到JS/Flex相互调用结构比较复杂,如果传递高级结构,两侧系统容易在解析上不一致而会引起额外的开销;
(备注:其实还尝试过方法A的变种,就是在JS这里启动循环2万次,每次将一条设备信息传递给Flex并在GIS地图上显示Object,虽然每次数据量极小,但是来回调用JS/Flex2万次,效率更低下,所以也舍弃了,这里就不再讨论了)
方法B(新方法):
- 在JS中,通过业务层得到2万个设备的信息数据,诸如数组DEV[20000];
- 在JS中,将信息数据打包为长字符串String(带约定结构/类似JSON);
- 在JS中,将String从JS传入Flex: JS --> Flex;
- 在Flex中,获得传入String,并解析还原为hashmap,并循环显示在GIS地图上;
- 在Flex中,通过hashmap结构提供用key查value的服务:val = devicehashmap.get(key);
性能评估&分析:
- 在步骤3中消耗了1秒左右(其实是500ms左右),数据量是2万个device;
- 初步估计,经典的数据结构String,在大多数系统中都能很好的互操作,并获得最简单的支持和解析(比如大都是bytes字节数组,最后一个是标记,或者有一个小小的优雅的头结构等等),所以传递String极大的降低了时间开销。而对JS侧,拼接String比组装hashmap更快些;在Flex侧,自己解析String组装自己的haspmap(不是理解JS的hashmap结构)也很快。
- 总体上步骤1到5消耗在1秒左右,达到要求;
(备注:其实在尝试几种其他GIS引擎的时候,我们采用JS/API接口,就没有遇到如上的问题,这其实对技术选型是很重要的。)
总结:
- 很多时候,我们开发一个系统,实现了A和B的互相调用和操作,只是达成而已。更多情况下实际应用场景必然有数据压力和性能要求,而一旦上了性能,“可用”就不够了,还要考虑“可行”;
- 从众多的方法中找到切实可行的,才是最终目的。这其实要求对各种方法的理解和比对有深入的研究。但时间有限,经验有限,人力有限,所以只能做代价有限的尝试,并不断优化,这可能也是迭代开发或敏捷开发比较提倡的吧。
- 性能优化我在之前的篇幅已经粗略的谈到,只要有性能瓶颈,只要未达到物理(理论)可计算的性能边界,就能找到合适的方法来优化。
- 另外,技术选型也很重要,对于目前我们接触的几个GIS引擎,支持JSAPI的都未出现类似问题,而非JS的API接口就需要做额外的研究,尝试和优化。这对技术选型也是一个值得思考的例子。
信息系统实践手记6-JS调用Flex的性能问题一例的更多相关文章
- 2016-04-25-信息系统实践手记6-JS调用Flex的性能问题一例
layout: post title: 2016-04-25-信息系统实践手记6-JS调用Flex的性能问题一例 key: 20160425 tags: GIS JS FLEX 技术选型 性能 API ...
- 信息系统实践手记5-CACHE设计一例
说明:信息系统实践手记系列是系笔者在平时研发中先后遇到的大小的问题,也许朴实和细微,但往往却是经常遇到的问题.笔者对其中比较典型的加以收集,描述,归纳和分享. 摘要:此文描述了笔者接触过的部分信息系统 ...
- 2016-04-25-信息系统实践手记5-CACHE设计一例
layout: post title: 2016-04-25-信息系统实践手记5-CACHE设计一例 key: 20160425 tags: 业务 场景 CACHE 系统分析 系统设计 缓存 modi ...
- 【FLEX教程】#007 如何让JS调用SWF里的方法
HTML中,JS如何调用SWF里面已经封装好的代码呢? 有一些事情Flex没办法实现的,需要通过调用JS来实现. eg: 当浏览器窗体关闭的时候,弹出一个对话框,提示用户是否退出?或者是否保存当前的操 ...
- [iOS Hybrid实践:UIWebView中Html中用JS调用OC方法,OC执行JS代码]
原理: 1.JS调用OC 每次webview执行跳转时都会被iOS给拦截,执行下面函数获得系统允许. 因此可以根据跳转信息转给系统,执行相应功能,比如打开相册等. // 网页中的每一个请求都会被触发 ...
- JS 与Flex交互:html中的js 与flex中的actionScript通信
Flex与JavaScript交互的问题,这里和大家分享一下,主要包括Flex调用JavaScript中的函数和JavaScript调用Flex中的函数两大部分内容. Flex 与JavaScript ...
- js 调用栈机制与ES6尾调用优化介绍
调用栈的英文名叫做Call Stack,大家或多或少是有听过的,但是对于js调用栈的工作方式以及如何在工作中利用这一特性,大部分人可能没有进行过更深入的研究,这块内容可以说对我们前端来说就是所谓的基础 ...
- Auto.js 调用系统短信、电话
本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! Auto.js 调用系统短信.电话 操作 ...
- JS调用Android、Ios原生控件
在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...
随机推荐
- 理解Session与Cookie
写在前面的话:Session和Cookie是非常有意思的两个概念,对于两者的管理可以处理的很复杂,但是无论如何,理解Session和Cookie的基本概念和发明初衷,对于问题的解决,大有裨益. === ...
- CSharpGL(32)矩阵与四元数与角度旋转轴的相互转换
CSharpGL(32)矩阵与四元数与角度旋转轴的相互转换 三维世界里的旋转(rotate),可以用一个3x3的矩阵描述:可以用(旋转角度float+旋转轴vec3)描述.数学家欧拉证明了这两种形式可 ...
- JVM系列-常用参数
1.堆内存 堆内存用于存储new对象,垃圾回收器负责堆内存的管理.但Java程序实际占用的空间则由堆内存.栈内存(程序运行栈).程序计数器.常量区.代码区.本地内存等. 堆内存分为Young和Old, ...
- PHP Excel 下载数据,并分页下载
直接上代码: 调用下载Excel: $total=$duoduo->count(MOD.' as a',$where); $objExcel= SelfExcelObject(); //导出 i ...
- 06. Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...
- 4.修改更新源sources.list,提高软件下载安装速度(提供Kali 2.0 更新源)
1.切换到root用户(如果已经是root用户就直接看第二步) dnt@HackerKali:~$ su 密码: 2.用文本编辑器打开sources.list,手动添加下面的更新源 root@Hack ...
- jQuery全局Ajax事件处理器
1. .ajaxComplete( handler(event, XMLHttpRequest, ajaxOptions) ) 每当一个Ajax请求完成,jQuery就会触发ajaxComplete ...
- SparkStreaming实现Exactly-Once语义
作者:Syn良子 出处:http://www.cnblogs.com/cssdongl 转载请注明出处 译自:http://blog.cloudera.com/blog/2015/03/exactly ...
- MyCat源码分析系列之——BufferPool与缓存机制
更多MyCat源码分析,请戳MyCat源码分析系列 BufferPool MyCat的缓冲区采用的是java.nio.ByteBuffer,由BufferPool类统一管理,相关的设置在SystemC ...
- iOS UITableViewableViewCell自适应高度
前两天做了一个项目,中间有遇到一个问题,就是聊天的时候cell高度的问题.这是一个很多前辈都遇到过,并且很完美的解决过的问题.这里主要是记录自己的学习心得.项目中首先想到的是用三方库,可是有问题,遂放 ...