ArrayBuffer 使用场景

ArrayBuffer 可以用于存储二进制数据，结合 Typed Array 或 DataView 可以读写二进制数据。
在 JS 中为什么要使用 ArrayBuffer？有哪些场景只能使用 ArrayBuffer，不能使用普通数组或者使用了普通数组会有性能问题？
1、通过读取图片、音视频 二进制数据，在前端简单处理媒体文件。

• gif-parser]带你如何用js读取gif图片数据流，解码gif https://juejin.cn/post/7022637452066029599
• 「ArrayBuffer」应用-以自动调整照片方向为例 https://juejin.cn/post/6844903722217144334

2、显著提升 h5 canvas 像素操作性能，参考：Faster Canvas Pixel Manipulation with Typed Arrays https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays/，JS 专门针对 canvas 提供的一个 typed array：Uint8ClampedArray
3、WebGL 内置 API 很多都使用了 ArrayBufferView 传参，比如：gl.bufferData()、gl.readPixels() 等，why ？JS 普通数组中的数值存在内存中使用的是双精度浮点格式。图形驱动程序 API 通常不需要以双精度浮点格式传递数值。每次 WebGL 与 JS 运行时之间传递数据时，WebGL 都要先把数组里的数值转换为合适的格式再操作，消耗了很多时间。Mozilla 为了解决这个问题，实现了 CanvasFloatArray（也就是显现在的类型数组 Float32Array），是 C 语言风格的浮点值数组，JS 可以使用这个类型分配、读取、写入数组。webgl 小例子：

• Fluid simulation 流体模拟 https://github.com/PavelDoGreat/WebGL-Fluid-Simulation/blob/master/script.js，在线体验 https://paveldogreat.github.io/WebGL-Fluid-Simulation/
• 可旋转的 3d 正方体 https://github.com/mdn/webgl-examples/blob/gh-pages/tutorial/sample5/webgl-demo.js 在线体验 https://mdn.github.io/webgl-examples/tutorial/sample5/

4、其他 socket 二进制数据传输、xhr/fetch api、file api 等

参考：

• 资料收集关键字：ArrayBuffer usage(google)、ArrayBuffer应用(掘金)、webgl(github)
• javascript ArrayBuffer, what’s it for? https://stackoverflow.com/questions/11554006/javascript-arraybuffer-whats-it-for
• 1. ArrayBuffer - 《阮一峰 ECMAScript 6 (ES6) 标准入门教程 第三 https://www.bookstack.cn/read/es6-3rd/docs-arraybuffer.md
• FileReader.readAsDataURL与URL.createObjectURL的区别http://www.zuo11.com/blog/2020/10/file_preview_download.html
• 定型数组(typed array) - JS 高程4 http://fe.zuo11.com/js/ad3/js-ad3-6.html#%E5%AE%9A%E5%9E%8B%E6%95%B0%E7%BB%84-typed-array