首先我们来看下前端历程
最开始我们看网页时,比如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