1、ArrayBuffer 对象

ArrayBuffer 对象表示一段二进制数据，用来模拟内存里面的数据。通过这个对象，JavaScript 可以读写二进制数据。这个对象可以看作内存数据的表达。

这个对象是 ES6 才写入标准的，普通的网页编程用不到它，为了教程体系的完整，下面只提供一个简略的介绍，详细介绍请看《ES6 标准入门》里面的章节。

浏览器原生提供 ArrayBuffer() 构造函数，用来生成实例。它接受一个整数作为参数，表示这段二进制数据占用多少个字节。

var buffer = new ArrayBuffer(8);

上面代码中，实例对象 buffer 占用8个字节。

ArrayBuffer 对象有实例属性 byteLength ，表示当前实例占用的内存长度（单位字节）。

var buffer = new ArrayBuffer(8);

buffer.byteLength // 8

ArrayBuffer 对象有实例方法 slice() ，用来复制一部分内存。它接受两个整数参数，分别表示复制的开始位置（从0开始）和结束位置（复制时不包括结束位置），如果省略第二个参数，则表示一直复制到结束。

var buf1 = new ArrayBuffer(8);

var buf2 = buf1.slice(0);

上面代码表示复制原来的实例。

2、Blob 对象

2.1、简介

Blob 对象表示一个二进制文件的数据内容，比如一个图片文件的内容就可以通过 Blob 对象读写。它通常用来读写文件，它的名字是 Binary Large Object （二进制大型对象）的缩写。它与 ArrayBuffer 的区别在于，它用于操作二进制文件，而 ArrayBuffer 用于操作内存。

浏览器原生提供 Blob() 构造函数，用来生成实例对象。

new Blob(array [, options])

Blob 构造函数接受两个参数。第一个参数是数组，成员是字符串或二进制对象，表示新生成的 Blob 实例对象的内容；第二个参数是可选的，是一个配置对象，目前只有一个属性 type ，它的值是一个字符串，表示数据的 MIME 类型，默认是空字符串。

var htmlFragment = ['<a id="a"><b id="b">hey!</b></a>'];

var myBlob = new Blob(htmlFragment, {type : 'text/html'});

上面代码中，实例对象 myBlob 包含的是字符串。生成实例的时候，数据类型指定为 text/html 。

下面是另一个例子，Blob 保存 JSON 数据。

var obj = { hello: 'world' };

var blob = new Blob([ JSON.stringify(obj) ], {type : 'application/json'});

2.2、实例属性和实例方法

Blob 具有两个实例属性 size 和 type ，分别返回数据的大小和类型。

var htmlFragment = ['<a id="a"><b id="b">hey!</b></a>'];

​​​​​​​ var myBlob = new Blob(htmlFragment, {type : 'text/html'});
myBlob.size // 32 myBlob.type // "text/html"

Blob 具有一个实例方法 slice ，用来拷贝原来的数据，返回的也是一个 Blob 实例。​​​​​​​

myBlob.slice(start, end, contentType)

slice 方法有三个参数，都是可选的。它们依次是起始的字节位置（默认为0）、结束的字节位置（默认为 size 属性的值，该位置本身将不包含在拷贝的数据之中）、新实例的数据类型（默认为空字符串）。

2.3、获取文件信息

文件选择器 <input type="file"> 用来让用户选取文件。出于安全考虑，浏览器不允许脚本自行设置这个控件的 value 属性，即文件必须是用户手动选取的，不能是脚本指定的。一旦用户选好了文件，脚本就可以读取这个文件。

文件选择器返回一个 FileList 对象，该对象是一个类似数组的成员，每个成员都是一个 File 实例对象。File 实例对象是一个特殊的 Blob 实例，增加了 name 和 lastModifiedDate 属性。​​​​​​​

// HTML 代码如下 // <input type="file" accept="image/*" multiple onchange="fileinfo(this.files)"/>
function fileinfo(files) { for (var i = 0; i < files.length; i++) { var f = files[i]; console.log( f.name, // 文件名，不含路径 f.size, // 文件大小，Blob 实例属性 f.type, // 文件类型，Blob 实例属性 f.lastModifiedDate // 文件的最后修改时间 ); } }

除了文件选择器，拖放 API 的 dataTransfer.files 返回的也是一个FileList 对象，它的成员因此也是 File 实例对象。

2.4、下载文件

AJAX 请求时，如果指定 responseType 属性为 blob ，下载下来的就是一个 Blob 对象。​​​​​​​

function getBlob(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.onload = function () {
        callback(xhr.response);
    xhr.send(null);
上面代码中，xhr.response拿到的就是一个 Blob 对象。
 
2.5、生成 URL
 
浏览器允许使用URL.createObjectURL()方法，针对 Blob 对象生成一个临时 URL，以便于某些 API 使用。这个 URL 以blob://开头，表明对应一个 Blob 对象，协议头后面是一个识别符，用来唯一对应内存里面的 Blob 对象。这一点与data://URL（URL 包含实际数据）和file://URL（本地文件系统里面的文件）都不一样。​​​​​​​
 
var droptarget = document.getElementById('droptarget');
droptarget.ondrop = function (e) {
    var files = e.dataTransfer.files;
    for (var i = 0; i < files.length; i++) {
        var type = files[i].type;
        if (type.substring(0, 6) !== 'image/')
            continue;
        var img = document.createElement('img');
        img.src = URL.createObjectURL(files[i]);
        img.onload = function () {
            this.width = 100;
            document.body.appendChild(this);
            URL.revokeObjectURL(this.src);
上面代码通过为拖放的图片文件生成一个 URL，产生它们的缩略图，从而使得用户可以预览选择的文件。
 
浏览器处理 Blob URL 就跟普通的 URL 一样，如果 Blob 对象不存在，返回404状态码；如果跨域请求，返回403状态码。Blob URL 只对 GET 请求有效，如果请求成功，返回200状态码。由于 Blob URL 就是普通 URL，因此可以下载。
 
2.6、读取文件
 
取得 Blob 对象以后，可以通过FileReader对象，读取 Blob 对象的内容，即文件内容。
 
FileReader 对象提供四个方法，处理 Blob 对象。Blob 对象作为参数传入这些方法，然后以指定的格式返回。
 
 
FileReader.readAsText()：返回文本，需要指定文本编码，默认为 UTF-8。
 
 
FileReader.readAsArrayBuffer()：返回 ArrayBuffer 对象。
 
 
FileReader.readAsDataURL()：返回 Data URL。
 
 
FileReader.readAsBinaryString()：返回原始的二进制字符串。
 
 
下面是FileReader.readAsText()方法的例子，用来读取文本文件。
 
<input type=’ file' onchange='readfile(this.files[0])'></input>// 
    <pre pre id = 'output' ></pre > 
    function readfile(f) {
        var reader = new FileReader();
        reader.readAsText(f);
        reader.onload = function () {
            var text = reader.result;
            var out = document.getElementById('output');
            out.innerHTML = '';
            out.appendChild(document.createTextNode(text));
        reader.onerror = function (e) {
            console.log('Error', e);
上面代码中，通过指定 FileReader 实例对象的onload监听函数，在实例的result属性上拿到文件内容。
 
下面是FileReader.readAsArrayBuffer()方法的例子，用于读取二进制文件。​​​​​​​
 
// HTML 代码如下// 
<input type="file" onchange="typefile(this.files[0])"></input>
function typefile(file) {
    // 文件开头的四个字节，生成一个 Blob 对象 
    var slice = file.slice(0, 4);
    var reader = new FileReader();
    // 读取这四个字节 
    reader.readAsArrayBuffer(slice);
    reader.onload = function (e) {
        var buffer = reader.result;
        // 将这四个字节的内容，视作一个32位整数 
        var view = new DataView(buffer);
        var magic = view.getUint32(0, false);
        // 根据文件的前四个字节，判断它的类型 
        switch (magic) {
            case 0x89504E47:
                file.verified_type = 'image/png';
                break;
            case 0x47494638:
                file.verified_type = 'image/gif';
                break;
            case 0x25504446:
                file.verified_type = 'application/pdf';
                break;
            case 0x504b0304:
                file.verified_type = 'application/zip';
                break;
        } console.log(file.name, file.verified_type);
				
json-scriptify
 将javascript对象转换为脚本
该模块的主要目的是从一个对象生成一个可读且最小长度的脚本，该脚本在被评估时，将一个对象尽可能地返回到原始对象。
 :warning: 注意：我们尚未实现安全的解析器。 因此，请勿使用此模块通过Internet发送信息。 该模块设计用于babel插件，也可以在后端使用或保存对象。
支持循环引用和重复引用。
 支持的内置对象：
 编号：原始类型和对象
布尔值：原始类型和对象
字符串：原始类型和对象
符号：原始类型和对象
BigInt
正则表达式
 :warning: WeakMap无法转换为脚本。
 :warning: WeakSet无法转换为脚本。
 错误：错误，TypeError，EvalError，SyntaxError，RangeError，ReferenceError，URIError
 ArrayBuffer
 SharedAr
				
WebSockets 是一种先进的技术。它可以在用户的浏览器和服务器之间打开交互式通信会话。使用此API，您可以向服务器发送消息并接收事件驱动的响应，而无需通过轮询服务器的方式以获得响应。
何为 WebSocket 对象？
WebSocket 对象是 WebSockets 的接口之一，用于连接WebSocket服务器的主要接口，之后可以在这个连接上发送 和接受数据。
WebSocket 对象提供了用于创建和管理  WebSocket  连接，以及可以通过该连接发送和接收数据的 API。
使用WebSoc.
				
javascript ， json字符串转hex  ， base64toHEX  ， hexToBase64   ，arrayBufferToBase64，   hextoString
// hex转json字符串,16进制ASCII
var hextoString = function (hex) {
    var arr = hex.split("")
    var out = ""
    for (var i = 0; i < arr.length / 2; i++) {
				
在一般的 Web 开发中，很少会用到 Blob，但 Blob 可以满足一些场景下的特殊需求。Blob，Binary Large Object 的缩写，代表二进制类型的对象。Blob 的概念在一些数据库中有使用到，例如，MYSQL中的 BLOB 类型就表示二进制数据的容器。在 Web 中，Blob 类型的对象表示不可变的类似文件对象的原始数据。通俗点说，Blob对象是二进制数据，但它是类似文件对象的二进制数据，因此可以像操作 File 对象一样操作 Blob 对象，实际上，File 继承自Blob。
				
一、ArrayBuffer
ArrayBuffer表示二进制数据的原始缓冲区，用于存储不同类型化数组的数据。我们无法直接读取或写入ArrayBuffers，但是可以根据需要将其传递到类型化数组（TypedArray）或DataView视图来操作二进制数据。
arrayBuffer = new ArrayBuffer(length);
length，缓冲区的长度，每个字节...
				
JS里的ArrayBuffer
还记得某个晚上在做 canvas 像素级操作，发现存储像素的数据格式并不是Array类型，而是ArrayBuffer，心想这是什么鬼？后来查了一些资料，发现自己这半年来的JS是白学了，竟然才知道还有这么个东东。
首先，这个 ArrayBuffer 类型化数组，类型化数组是JavaScript操作二进制数据的一个接口。最初为了满足JavaScript与显卡之间大量的、实时的数据交换，它们之间的数据通信必须是二进制的，而不能是传统的文本格式的背景下诞生的。
				
现在的浏览器很聪明，会对页面中的mp3,MP4等内容进行嗅探下载。但是对于部分付费或敏感内容，我们并不想版权资源被嗅探。这就需要使用html5 提供的 blob 对象对文件内容进行保护，blob格式的资源是无法被嗅探的。
具体可以参考一下 blob介绍。
话不多说，直接看实例代码。
正常情况下的audio标签写法：
<audio controls src="https://img.tukuppt.com/newpreview_music/08/99/49/5c897788e421b531
Blob，Binary Large Object缩写，二进制大对象，表示一个不可变、原始数据的类文件对象。
单位为字节（byte），一个字节8位长，为0~255
Uint8Array
8位无符号整型数组
let binary = atob(base64.split(',')[1]);
let array = [];
for (let i = 0; i < binary.length; i
ES6 ArrayBuffer对象代表储存二进制数据的一段内存，它不能直接读写，只能通过视图（TypedArray视图和DataView视图)来读写，视图的作用是以指定格式解读二进制数据。
ArrayBuffer也是一个构造函数，可以分配一段可以存放数据的连续内存区域。
const buf = new ArrayBuffer(32);
				
加载二进制文件
 var request = new XMLHttpRequest();
        request.open("get","res/models/killer_whale/whale.CYCLES.bin");
        request.send(null);
        request.responseType = "arraybuffer";
        request.onload = function(){
            console.log("arr
随着WebSocket、WebAudio、Ajax2等广泛应用，前端方面只要是处理大数据或者想提高数据处理性能，那一定是少不了 ArrayBuffer对象
同时在浏览器当中处理二进制数据的需求也在不断的增加，有时需要字节数组、8位、16位、32位整数型数组，所以对于JS中处理二进制迟早学习比较好
现今世界上几乎所有的计算机体系结构都是以字节（byte）为二进制数据的基本单...
				
前端如何识别浏览器类别+Blob流如何兼容IE浏览器识别和兼容如何识别浏览器类别Blob流兼容IE10-11
浏览器识别和兼容
作为一个后端开发，有时候也要写写前端代码，但是如果让我兼容IE浏览器，我只能够祭上这张图：
如何识别浏览器类别
var agent = navigator.userAgent.toLowerCase();
console.log(agent);
 var arr = [];
 var system = agent.split(' ')[1].split(' ')[0].spl
// 将ArrayBuffer转换为字符串
const decoder = new TextDecoder();
const str = decoder.decode(buffer);
console.log(str); // 输出空字符串
注意：TextDecoder API在IE浏览器中不支持，需要使用polyfill或其他替代方案。
[code=plain]
error D:\pangh\Documents\Study\tools\devtools\node_modules\electron: Command failed.
Exit code: 1
Command: node install.js
Arguments:
Directory: D:\pangh\Documents\Study\tools\devtools\node_modules\electron
Output:
RequestError: unable to verify the first certificate
    at ClientRequest.<anonymous> (D:\pangh\Documents\Study\tools\devtools\node_modules\got\source\request-as-event-emitter.js:178:14)
    at Object.onceWrapper (node:events:628:26)
    at ClientRequest.emit (node:events:525:35)
    at origin.emit (D:\pangh\Documents\Study\tools\devtools\node_modules\@szmarczak\http-timer\source\index.js:37:11)
    at TLSSocket.socketErrorListener (node:_http_client:502:9)
    at TLSSocket.emit (node:events:513:28)
[/code]
                TypeScript高级进阶
                    De_mean: 
                    不会写可以不写
                h5 与原生 app 交互的原理
                    技术蹭蹭蹭: 
                    相当详细，歪瑞过的
                Vite 创建 Vue3+TS 项目配置 ESLint
                    Bruce Leo: 
                Webpack的异步加载原理及分包策略
                    我是ed.: 
                    请问我按照您的配置打包完了，部署起来显示不出东西来，然后我本地打开也是空白可能是什么原因？