ArrayBuffer简析

关键技术: JavaScript,ArrayBuffer,Type Array,DataView,Web Worker,性能对比

ArrayBuffer

在文章开头列出了这些关键字,主要就是让大家了解本文的主要内容,如果你不感兴趣转发了就可以走;如果对这一块非常了解,欢迎多提意见多交流;如果想这方面的技术一见钟情,那不妨坐下了可以享受阅读的乐趣。

首先,为什么Web开发者需要不断优化数据的传输?因为数据是应用的核心,因这一块直接决定了用户体验的好与坏,而用户的本性是贪婪的。用户的需求随着自身满意度的不断膨胀,往往会导致这种丧心病狂的需求:“C/S下有这个效果(功能),B/S下为什么不可以?”。以前你可以笑一下,然后一副没事请挂机的表情,但随着HTML5标准的普及,妈的技术上真的可行了。HTML5提供了Canvas,WebGL,WebSocket,音视频等诸多功能,完全就是一套基于浏览器的操作系统API。这是一个很大的成就,所带来的冲击是巨大的,连Adobe也都全面拥抱HTML5了,每一个Web开发者也要跟上时代的脚步。

不管你用了HTML5的哪个功能,数据都是核心的问题,特别是大数据时代,更要我们用一个新的眼光来看待数据,而随着硬件的成熟,特别是HTML5功能的丰富,很多以前做不到的体验现在都可以了,这也直接导致了数据的需求变得原来越大。比如音视频,还是三维模型,上万条数据的传输,如果还用传统的json,xml这种形式,数据量稍大一些就难堪重任了,这问题无法回避。因此,怎么解决这种大数据的传输性能?答案很简单,向CS取经!

1. 创建和读写

传统CS下文件基本都是二进制格式,再加上zip压缩,短小精干,系统IO处理能力强,所以在数据量很大的情况下也可以胜任。最初在WebGL中也有类似的需求,JS和显卡之间大量实时的数据交换,而数据通信又必须是二进制的,JavaScript也需要这样一种有效访问二进制的方式,便产生的类型化数组。

ArrayBuffer本身就是一块内存,可供用户读写,使用方式也一样简单:

// 创建16个字节的内存
var buffer = new ArrayBuffer(16); 
// 用32位的类型来绑定该内存区域,32位,每个变量是4个字节
var int32View = new Int32Array(buffer); 
// 此时长度为4:4个int32类型,则4*4 = 16字节
for (var i=0; i<int32View.length; i++) { 
     int32View[i] = i; // 对每一个int32的变量赋值
}

可以看到用法都差不多,但可以让用户实现字节级别的处理能力。当然,new不是我们的重点,重点是如何在XMLHttpRequest请求中使用ArrayBuffer方式,和服务器进行二进制的传输方式。

var loadArrayBuffer = function(url, headers) {    
    return loadWithXhr({
        url : url,
        // 告诉服务器,返回类型采用arraybuffer
        responseType : 'arraybuffer', 
        headers : headers
    });
};

OK,可想而知,相同信息下二进制则更为紧凑。下面是相同数据下大小对比,可以粗略的认为两者之间的大小比为四倍。

2. 数据解析

下面问题来了,二进制文件,看上去很压力?确实这是一个问题。《Unix编程艺术》里面会有这样一句话:“如果你想要创建一个新的二进制格式,那你应该睡一觉,第二天起来再好好想清楚是否有必要这样做。”这也是Web开发者不得不面对的问题,如果JSON已经无法满足你的需要,就要像C/S开发者一样对二进制了然于心,谁也没说二进制是C/S开发者的专属,走的路多了一点而已。当然,JS中也提供了读写ArrayBuffer的方式。

有下面两个方式,一个是DateView,一个是Type Array。

DateView API截图

Type Array具体类型

如图是两者风格上的不同,严格说,完全使用一种也能实现解析,不同处在于前者主要是提供了函数的形式,而后者主要是以变量的形式。个人经验是搭配使用效果更佳,一个是小家碧玉,一个是大家闺秀,各有各的好啊。一片连续的数据,比如VBO之类的就用TypeArray直接对应float类型,而对于多个属性变量组成的结构体,可以通过DataView有序解析。好吧,完全靠感觉,下面的代码,自己来找找感觉吧。

var pos = 0;
var view = new DataView(buffer);
var minimumHeight = view.getFloat32(pos, true);
pos += Float32Array.BYTES_PER_ELEMENT;
var vertexCount = view.getUint32(pos, true);
pos += Uint32Array.BYTES_PER_ELEMENT;
var encodedVertexBuffer = new Uint16Array(buffer, pos, vertexCount * 3);

如上是一段实际应用中的代码,DataView封装buffer,然后提供了基本的函数getFloat32、getUint32来实现对其中变量的逐次读取。同时对于VertexBuffer这样的大块类型则用了Uint16Array直接获取。

可见,二进制的解析关键是对二进制格式的清晰,而觉得解析二进制复杂,主要还是得克服心理的作用。

这里有两处需要强调,第一就是提倡大家使用BYTES_PER_ELEMENT,每一个Type Array都会有这个属性来记录长度,万一以后该变量长度变化,而你代码写死了(可能性为0),你哭都来不及。可能强迫症吧,觉得这样好。另外就是要注意Uint16Array构造函数中的参数,其中pos是字节单位,而VertexCount的单位则是Uint16,两个字节,两者的单位是不同的,自己到底要移动多少自己,一定要谨慎处理。

不同数组类型操作运算符的性能对比

IE下读写操作对比

Chrome下读写操作对比

上面是在我笔记本下的性能对比图(create,read&wirte),ArrayBuffer的创建速度几乎是Array的四倍以上;读操作快了一倍;但Array的写操作简直是神速;另外不同的类型下Byte,INT的差别并不大;另外IE相比Chrome简直慢成鬼了。看来不同配置,不同浏览器差别还是非常大的。看来有能力还是看看JS引擎的实现,又有很多可以涨知识的地方了。

再说一下不太常用,但也是非常好的一种使用方式。IMG标签的形式,有些时候因为各种原因,会把二进制信息作为图片的像素存储,这样通过img标签来传输,方便快捷,而且有一定的加密性,对应的是Canvas的ImageData。但在客户端就需要一个IMG转为Type Array的一个过程,思路也不麻烦,通过ImageData来做中间过度:

//假设是服务端发送过来的img图片
var imgInfo = new Image;
// 将该图片绘制到canvas上
context.drawImage(imgInfo,0,0,width,height);
// 获取该Canvas里面的像素
var imgData = context.getImageData(0,0,width,height);
// 其为uint8clampedArray
var typeArray = imgData.data

另外,二进制的问题其实还没有这么简单,还有字节大小端和字节对齐的问题。字节大小端的概念大家可以google查一下,不在此多言,DataView中提供了参数,默认是低字节排序。而字节对齐呢,则是Uint16Array中你所声明的长度必须是该类型字节长度的整数倍,比如Uint16是两个字节,则该长度要被2整除,否则浏览器会alert。

3. 数据处理:Web Worker

很有意思的一个地方是,JavaScript支持异步,但本质是单线程环境,以往我们都采用setTimeout的方法来模拟实时性。而对于CS的开发者而言,多线程是处理大数据的有效手段。举个例子,当数据量很大的时候,如何在数据处理的同时避免UI响应停滞,通常我们都是开辟一个工作者线程来处理数据,处理后的数据都放在共享池中,这时UI主线程直接使用数据,保证界面响应的顺畅,而JavaScript对此无能无力,即使采用Ajax也只能局部更新,只是“看上去有了响应,但总体时间还是不变,甚至会变慢”,HTML5中提供了Web Worker的多线程机制,则可以很好的解决这个问题。

为什么要提到Web Worker呢,因为往往数据解析后,则会进入数据处理的过程,比如解析后的数据构建三角网,或者对数据进行解压缩,解码等操作,如果放在主线程上处理总是不太完美的方案,这样自然就会想到使用工作者线程Web Worker来处理。而且目前Google Earth的WebGL版本也在用Worker来处理数据,而Baidu的3D地图还没有,深入研究会发现很多技术上有意思的区别。这块以后会有详细介绍,因为也和数据有关系,这里只是开个头涉及一下。

下面例子比较简单,但个人感觉真要实现功能还是有很多限制,设计上也有很多技巧,所以也不多说了,多线程还是得多做才能积累经验,给出下面这个简单的例子,让大家有一个简单的了解。

主脚本:

var worker = new Worker('doWork.js');

worker.addEventListener('message', function(e) {    console.log('Worker said: ', e.data);
}, false);

worker.postMessage('Hello World'); // 把数据传给工作者线程.

doWork.js (Worker):

self.addEventListener('message', function(e) {
    self.postMessage(e.data);
}, false);

4. 数据渲染

本来这个跟本节内容无关,但为了说明一个数据自始至终的过程,所以加进来吧。WebGL硬件加速,直接使用显卡批次渲染,是我知道的唯一的大数据渲染的一种方式,因为对其他大数据下高性能渲染还没研究,这里只提供WebGL一种思路。

5. 其他

1.异步

JS中数据一般都在服务器上,数据的传输也为异步,不同于CS多数情况下都在本地直接加载,这样在调度上的复杂性会加大,而浏览器TCP连接数也有限制,所以同时请求的数目应该有所控制,服务器网卡带宽也是一个瓶颈,通过跨域,多个IP来增大同时下载的数据量;这样,可能你还会采用zip压缩,提高浏览器缓存的复用度,要考虑的点很多,实践性也很强。所以在设计时也应有所考虑。封装一个合理的Primise模式会增加代码的可阅读性。

2.数据安全

JS代码虽然可以混淆,但是在客户端还是可以调试。换句话说,通过阅读你的JS源码还是能够获取你的数据格式的。而数据往往都是核心的,二进制的数据很多情况下并不想让用户知道里面的结构,但很遗憾,这在JS技术本身无法对数据保密,所以只能另辟蹊径。个人觉得有两个可能,一个是服务端的授权,Token的方式。另一个是在数据里面增加一些冗余信息,作为自己数据的一个特有标志,如果其他人盗用数据时,这些就是版权证据。比如地图厂商往往会在地图上加一些特有的不存在的位置点,如果其他厂商使用了,说明他们没有考察真实性而直接盗用数据,这就是一个证据。

.总结

HTML5有很多很好的特性,对Web开发也是一个极大的挑战,但单纯从技术上来说是充满诱惑的,而在大数据时代,其实这些都是很好的B/S上大数据的解决思路和基本技术。我对大数据并没有什么研究,以我现有的肤浅了解,我认为一个Web应用如果没有上面这些二进制,硬件加速方面的技术应用,都不能称为大数据技术,充其量最多不过一些策略上的优化,时间和空间,服务器和客户端之间的平衡,而不是在质的角度解决问题。

这让我想到了上面这个图(盗用同学公司)。不要轻易的否定自己认为不可能的事。技术的革新总会填补某种不存在。

如下是最高自由落体跳伞世界纪录保持者(对,就是那位穿着宇航服跳伞,速度超过音速的Google高管)面对女儿提的一个问题,三次不同的答复:

It is impossible. Even it is not impossible, it is very very hard. Well, maybe it is not hard, it is just I do not know.

原文发布于微信公众号 - LET(LET0-0)

原文发表时间:2015-12-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏码匠的流水账

java降低竞争锁的一些方法

本文介绍一下提升并发可伸缩性的一些方式:减少锁的持有时间,降低锁的粒度,锁分段、避免热点域以及采用非独占的锁或非阻塞锁来代替独占锁。

431
来自专栏Java帮帮-微信公众号-技术文章全总结

Java高级开发工程师,面试总结

Java高级开发工程师,面试总结 每个人都会有的抉择 时隔两年,再一次的面临离职找工作,这一次换工作有些许的不舍,也有些许的无奈。个人所在的技术团队不错,两年时...

3495
来自专栏ImportSource

Java9里将会出现的5个新功能

1. Java + REPL = jshell 下一个版本的Java将使用一个名为jshell的新命令行工具,它将添加本机支持(native support)并...

3276
来自专栏java架构师

WCF学习笔记(一)

开篇,简单知识介绍: 最近开始用WCF,一直仅限于初级阶段,整理了下思路,深入研究一下。 开始时,在看一个叫Artech写的系列文章,结果。。。 1、长篇大作,...

2455
来自专栏Golang语言社区

Go程序GC优化经验分享

最近一段时间对《仙侠道》的服务端进行了一系列针对GC的调优,这里跟各位分享一下调优的经验。

1664
来自专栏架构师小秘圈

你所不知道的库存超限做法

作者:程序诗人,来自:cnblogs.com/scy251147 零,题记 在互联网企业中,限购的做法,多种多样,有的别出心裁,有的因循守旧,但是种种做法皆想达...

3206
来自专栏Golang语言社区

游戏服务器之内存数据库redis客户端应用(下)

(3)存储一个角色的基础信息(使用命令set) 存储结构: key:BASE角色id ,value 角色基础信息 int playerId = player-...

4538
来自专栏zhisheng

Java研发方向如何准备BAT技术面试

背景: 最近BAT等各大互联网巨头们的校招陆陆续续都准备开始了,可能对于在校的大多数学生来说,不知道如何正确衡量自己掌握的技术,更不知道BAT这...

1.4K4
来自专栏SDNLAB

云数据中心网络虚拟化——大二层技术巡礼之数据平面的演化

开始讲解数据平面的虚拟化前,我们首先来看一看数据中心网络典型的网络拓扑。左图3层分别为接入、汇聚和核心层,一般来说,接入层负责制定虚拟机的接入策略,汇聚层负责二...

3316
来自专栏Java编程技术

受限访问量问题中锁的使用

最近在做网上法庭的一个比较有意思的小需求,就是通过扫二维码方式允许最多30个人同时进入庭审,但是不限制进入的是是不是庭审人员,也就是说只要扫了这个二维码并且当前...

642

扫码关注云+社区