信息系统实践手记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通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...
随机推荐
- 日向blog开发记录
一点历史关于,Sonne Blog 2016.03.25springmvc + hibernate框架搭建.2016.04.21日向blog首页.2016.04.24分页实现.2016.04.30登录 ...
- Android Studio2.1.2 Java8环境下引用Java Library编译出错
转载请注明出处:http://www.cnblogs.com/LT5505/p/5685242.html 问题:在Android Studio2.1.2+Java8的环境下,引用Java Librar ...
- Android开发学习之路-使用annotationProcessor配置Butterknife
Apt工具的作者宣布了不再维护该工具了,而且Android Studio也有了自己的插件,并且可以通过gradle来简单的配置. 其实用Butterknife的都知道,没有apt,onClick绑定不 ...
- Maven(一)环境搭建
网上已经有很多Maven学习的笔记和文章了,但是不自己亲自玩一玩,踩踩坑,证明不了自己到底能不能搞定它! 今天自己亲自搭建了一下环境,感觉基本的使用应该是可以满足了. 使用背景: 安装环境:Windo ...
- [原创]MYSQL的简单入门
MYSQL简单入门: 查询库名称:show databases; information_schema mysql test 2:创建库 create database 库名 DEFAULT CHAR ...
- Javascript的“上下文”(context)
一:JavaScript中的“上下文“指的是什么 百科中这样定义: 上下文是从英文context翻译过来,指的是一种环境. 在软件工程中,上下文是一种属性的有序序列,它们为驻留在环境内的对象定义环境. ...
- 【原】SDWebImage源码阅读(二)
[原]SDWebImage源码阅读(二) 本文转载请注明出处 —— polobymulberry-博客园 1. 解决上一篇遗留的坑 上一篇中对sd_setImageWithURL函数简单分析了一下,还 ...
- JavaScript资源大全中文版(Awesome最新版)
Awesome系列的JavaScript资源整理.awesome-javascript是sorrycc发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架.运行器.QA.MVC框架和库.模 ...
- clipChildren和clipToPadding
clipChildren 和 clipToPadding clipChild 用于定义子控件是否在父控件边界内进行绘制.clipChild 默认为 true.也就是不允许进行扩展绘制. clipToP ...
- python获取命令行输出结果
#coding=utf-8 import os command = 'ping www.baidu.com ' #可以直接在命令行中执行的命令 r = os.popen(command) #执行该 ...