信息系统实践手记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通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...
随机推荐
- ABP源码分析五:ABP初始化全过程
ABP在初始化阶段做了哪些操作,前面的四篇文章大致描述了一下. 为个更清楚的描述其脉络,做了张流程图以辅助说明.其中每一步都涉及很多细节,难以在一张图中全部表现出来.每一步的细节(会涉及到较多接口,类 ...
- 【MSP是什么】MSP认证之项目集与项目群的关系和区别
项目群和项目集都是一个意思,翻译时没有统一口径造成的.只要能与项目组合区别开就可以了. 项目集与项目群的区别,不在于那些项目自身,而在于管理者的思想,管理者对待项目的态度.项目集与项目群,首先都是多个 ...
- PHP 调用webService方式
方法如下: <?php header('Content-Type: text/html; charset=UTF-8'); define('APP_ROOT', dirname(__FILE__ ...
- JavaScript的同步与异步
1.手绘一张图说明. 2.为什么JavaScript是单线程(这里引用阮一峰老师的话) JavaScript的单线程,与它的用途有关. 作为浏览器脚本语言,JavaScript的主要用途是与用户互动, ...
- ERROR 1010 (HY000): Error dropping database (can't rmdir './test/', errno: 17)
在删除数据库的时候报标题所示错误 mysql> drop database test; ERROR (HY000): Error dropping database (can't rmdir ' ...
- c#编程基础之字符串基础
1.C#中单个的字符串用单引号包含就是char类型,('a'),单引号中放且只能放一个字符 2.单个字符也可以表示为字符串,还可以有长度为0的字符串. 3.使用s.Length属性来获得字符串中的字符 ...
- PHP实现删除数组中的特定元素
方法1: <?php $arr1 = array(1,3, 5,7,8); $key = array_search(3, $arr1); if ($key !== false) array_sp ...
- SharePoint2013 显示网站菜单中设计管理器功能
当部署完SharePoint2013后,并创建了对应的网站集,就开始试图去按照企业VI(Visual Identity)来定制站点的布局.色彩.字体等等的页面元素.可是,在站点的设置菜单中,默认没有“ ...
- .NET 垃圾回收与内存泄漏
> 前言相信大家一定听过,看过甚至遇到过内存泄漏.在 .NET 平台也一定知道有垃圾回收器,它可以让开发人员不必担心内存的释放问题,因为它会自定管理内存.但是在 .NET 平台下进行编程,绝对不 ...
- Entity Framework Extended Library
扩展了实体框架的功能类库. https://github.com/loresoft/EntityFramework.Extended 1批量更新/删除 1)删除 //delete all users ...