为JavaScript客户端编码/解码大量数据的最佳方法?

我正在用Spine,Node.js等编写一个独立的 javascript应用程序(如果你感兴趣,可以使用 Here is an earlier incarnation).基本上,该应用程序是一个交互式“数字属性”资源管理器.这个想法是你可以选择任何数字,看看它拥有什么属性.它是素数还是三角形等?哪些其他数字共享相同的属性?那种事.

目前我可以很容易地显示数字1-10k,但我想显示数字100万,甚至更好的10亿的属性.

我希望我的客户端下载一组静态数据文件,然后使用它们向用户显示信息.我不想写服务器后端.

目前我正在使用JSON作为数据文件.对于某些数据,我知道一个简单的算法来导出我在客户端寻找的信息,我使用它(即,它是否均匀?).对于更难的数字,我预先计算它们,然后将值存储在JSON可解析数据文件中.我有点过分了整个事情 – I implemented一个纯粹的javascript bloom filter,当它没有扩展到100万的素数时,我尝试使用CONCISE bitmaps下面(这没有帮助).最终我意识到,如果我将其表示为JSON,那么我获取数据的“压缩”程度并不重要.

所以问题是 – 我想为每个数字显示30个属性,我想显示一百万个数字…就像3000万个数据点.我希望javascript应用程序下载此数据并将其呈现给用户,但我不希望用户必须下载兆字节的信息才能使用该应用程序…

我有哪些选项可以有效地将这些大型数据集发送到我的javascript解决方案?

我可以转换为二进制,然后在客户端读取二进制文件吗?请举例!

解决方法

如何在客户端上计算这些数据点呢?

你会省去很多头疼的事.您可以预先计算索引图表,并仅在用户选择特定数字时保留要处理的其余数据点.

对于每个号码展示的属性.现代桌面上的纯JavaScript非常快(如果你远离DOM),我认为你会发现算法与预先计算的JSON解决方案之间的处理速度差异可以忽略不计,你将为自己节省很多痛苦和不必要的带宽使用.

对于初始索引图表,它仅显示每个数字的属性数,并可以作为数组传输:

'[18,12,9,11,7,8,2,6,1,4,...]'

或者在JSON中:

{"i": [18,...]}

请注意,这对于对数刻度的工作方式相同,因为无论哪种方式,您都只能在任何时候将值附加到屏幕上的1个点.您只需相应地处理数组的内容(通过在1-2K大小的数组上按顺序返回对数值).

您甚至可以使用DEFLATE算法进一步压缩它,但由于您只能在屏幕上显示有限数量的数字(在桌面上<1-2K像素),我建议您围绕此事实创建解决方案,例如检查你是否可以在旅途中以最小的影响计算2K * 30 = 60K属性,这可能比在此时要求服务器给你一些JSON更快. 更新2012年1月10日 我刚刚看到您对用户能够点击特定属性并获得显示该属性的数字列表的评论. 我认为上面的多个属性的初始传输可以被包括在初始有效负载中的所有属性,记住你只想传输你希望显示的初始对数刻度中显示的数字的值(这意味着如果用户首次加载页面或点击某个属性时不会在屏幕上显示数字,则可以跳过数字.可以在客户端上计算超出初始有效负载的任何内容.

{ 
  "n": [18,...] // number of properties x 1-2K
  "p": [1,3,5,13,...] // prime numbers x 1-2K
  "f": [1,...] // factorials x 1-2K
}

我的猜测是像这样的JSON对象大约是30-60K,但你可以通过删除算法不是递归的属性并让客户端在本地计算它们来进一步减少这个.

如果你想要一个替代方法来压缩这些数组,当你得到大数字时,你可以将数组格式化为VECTOR而不是数字列表,存储一个数字和下一个数字之间的差异,这将在你处理时保持空间不足大数(> 1000).上面使用向量的JSON示例如下:

{ 
  "n": [18,-6,-3,-2,-5,-1,...] // vectorised no of properties x 1-2K
  "p": [1,...] // vectorised prime numbers x 1-2K
  "f": [1,...] // vectorised factorials x 1-2K
}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)