首先我们来看下前端历程
最开始我们看网页时,比如200x年前,我们对网页的需求不高,显示点文字,显示点图片就很满足了,所以对于浏览器而言其操作的数据其实并不多(比如
读取本地图片显示出来,或上传图片到服务器),那么浏览器这时就需要一个对象(我们知道js里一切皆为对象)来表示图片信息,我们知道图片是一个文件(文件存在电脑上,其实就是一坨二进制数字),所以就有了Blob(Binary Large Object),二进制大对象(先这么翻译吧),由此可见(小到字符串,大到文件都可以用这个二精致大对象来表示),而File就是Blob对文件实现的一种(可以先这么理解,实际上File是基于Blob做了很多扩展)-
大约2010年左右
Nodejs(应该是2009发布的)面向市场,受到了大量开发者的追捧,而在Node里就内置了Buffer(二进制缓冲区)这个类,在此之JS语言中没有用于读取或操作二进制数据流的机制- 问:那么什么是二进制缓存区,为啥需要操作二进制数据流机制呢?
- 答:首先我们知道电脑硬件只认识0101010101这样的二进制,所以我们硬盘里存放的
图片,视频,文档等等文件其实都是01010101这样的二进制数字,常规而言,我们编辑文件,是要将二进制数据转换成我们人类能懂得形式编辑的,比如hello,其对应的二进制为0110100001100101011011000110110001101111,如果我要将hello改成helloww,让我们直接去改二进制,那肯定不可能(如果有这样的大神,那就当我没说),通常是我们用文档编辑器,帮我将二进制转换为我们能懂得字母,然后我们编辑字母,保存时,编辑器再将它保存回二进制字符串。(上面举例的只是说文档编辑器改字符串,还有比如PS该图片,quickTime改视频都一样是这个原理),说了这就么多,其实最主要的就是为了便于这最后这个概念的理解:二进制缓存区就是在编辑器里,不让编辑器做转换工作,而是直接从内存读取这些二进制数据,然后使用Buffer类提供的方法来间接操作这些二进制数据。为啥需要这么做,恩...,一切都是为了用户性能体现,比如html里使用canvas画图,要是一直转换来转换去,那对电脑的性能可想而知,更何况这里还涉及到显卡等硬件设备,所以直接js里操作二进制文件,性能会有飞质提升
-
故事继续:随着前端的疯狂式发展(前端技术发展是在是太快了) 以及
HTML5的普及,对JS的需求也越来越苛刻(JS的技术发展要照顾到那么多浏览器厂家的发展,说实话每一次版本的革新,说苛刻一点都不过分,它不能像其它编程语言,一个大版本更新,搞得六亲不认(指向下兼容性)),人们发现JS需要操作的数据量已经越来越大,传统的技术已经完全有点更不上时代的发展,然后就有了JS的现代里程碑式版本的出现ES6-
ES6(ECMA 2015)将ArrayBuffer对象、TypedArray视图和DataView视图纳入了 ECMAScript 规格,并且增加了新的方法。 -
ArrayBuffer便是新增的二进制缓冲区,而与Node的Buffer不同的是它并没有提供操作方法,而操作是由TypedArray视图或DataView视图来实现的 - 这一块的具体讲解,可以参看
阮一峰老师的ArrayBuffer
-
最后总结一下区别
-
Blob是一种二进制对象(包括字符,文件等等),es6对其进行了补充 -
File是基于Blob的一种二进制文件对象,扩展了Blob,es6同样进行了补充 -
ArrayBuffer是ES6新引入的二进制缓冲区 -
Buffer是Nodejs内置的二进制缓冲区,Buffer相当于ES6中Uint8Array(属于TypedArray)的一种扩展
备注:
- Buffer参看文献Node-buffer
- ArrayBuffer参看文献阮一峰--ArrayBuffer