关键技术: 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 = newInt32Array(buffer);//此时长度为4:4个int32类型,则4*4 = 16字节
for (var i=0; i
int32View[i]= i; //对每一个int32的变量赋值
}
可以看到用法都差不多,但可以让用户实现字节级别的处理能力。当然,new不是我们的重点,重点是如何在XMLHttpRequest请求中使用ArrayBuffer方式,和服务器进行二进制的传输方式。
var loadArrayBuffer = function(url, headers) { returnloadWithXhr({
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 = newDataView(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 = newImage;//将该图片绘制到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.