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 条评论
登录 后参与评论

相关文章

来自专栏斑斓

我们的技术实践

本文是我在中生代技术群分享的话题《创业一年经历的技术风雨》中的第三部分《研发团队总结的技术实践》。若要阅读第二部分《技术团队的管理》,请移步中生代技术群公众号。...

3165
来自专栏java一日一条

有经验的Java开发者和架构师容易犯的10个错误(上)

首先允许我们问一个严肃的问题?为什么Java初学者能够方便的从网上找到相对应的开发建议呢?每当我去网上搜索想要的建议的时候,我总是能发现一 大堆是关于基本入门的...

552
来自专栏FreeBuf

Dance In Heap(四):一些堆利用的方法(下)

0x00 前面的话 本篇文章是系列的最后一篇,主要分析一下House系列的几个典型漏洞,关于堆利用的后续学习,大家可以关注 shellphish 团队的 how...

2219
来自专栏Java学习网

面向对象设计的 10 条戒律

不,这不是上帝说的。 这也不是Jon Skeet / Martin Fowler / Jeff Atwood / Joel Spolsky(可以用你最喜欢的技术...

2743
来自专栏儿童编程

儿童编程“控制”部分学习总结

在任何编程语言中,控制部分都是非常重要的,也是体现编程语言神奇之处。在Scratch中同样如此。初次学习肯定会感觉有些抽象,但是在实际应用之中,则会体现出其功能...

542
来自专栏自动化测试实战

Appium 定位方法例子(4)

2964
来自专栏java一日一条

Jsoup代码解读之四-parser(上)

作为Java世界最好的HTML 解析库,Jsoup的parser实现非常具有代表性。这部分也是Jsoup最复杂的部分,需要一些数据结构、状态机乃至编译器的知识。...

721
来自专栏编程

使用JavaScript开发一个自修改代码

话说在25年前,我刚刚开始从事软件开发。在工作中,我遇到一个叫Dave的朋友,他曾在一家大型保险公司工作过几年,他的工作重点是开发支持一个名为“个人人寿保险”的...

2337
来自专栏纯洁的微笑

看程序员怎么解决食堂排队问题

在学校的时候,我不爱去食堂成功,一是由于暗黑料理,更重要的一点是人太多了,队伍往往从窗口排到了门口,点菜、计算价格、付款三种业务由打饭阿姨一人完成,思维切换忙碌...

601
来自专栏Web 开发

知呼前端工程师面试题目

第三题的答案(我的答案有点问题,等弄好了再上传 要想完美,先出主体,通过负margin+双容器)

750

扫码关注云+社区