当前位置: 首页 > news >正文

深入浅出TypedArray:网络数据处理、WebGPU与加密实战

        JavaScript的TypedArray是现代Web开发中处理二进制数据的利器。本文将结合网络数据传输、WebGPU编程和简单加密算法三个实战场景,带你领略TypedArray的强大能力。

一、TypedArray基础认知

        TypedArray家族包括Int8Array、Uint16Array、Float32Array等11种视图类型(关于视图类型的解释请参看:深入理解 JavaScript 中的视图类型),它们共同操作ArrayBuffer底层二进制缓冲区。与传统Array相比:

// 普通数组
const arr = [1, 2, 3]; // 每个元素占8字节// TypedArray
const typedArr = new Int8Array([1, 2, 3]); // 每个元素占1字节

        在 JavaScript 中,  TypedArray   是一种用于处理二进制数据的数组类型,它允许直接操作底层内存中的数据。与传统的 JavaScript 数组(  Array  )不同,  TypedArray   是类型化的,这意味着它只能存储特定类型的数据(如整数、浮点数等),并且在底层以连续的内存块形式存储。

1. TypedArray 的种类

        JavaScript 提供了多种类型的   TypedArray  ,每种类型对应一种数据格式,包括:

类型化数组类型 数据类型 字节值范围 
 Int8Array8位有符号整数 1-128 到 127 
 Uint8Array8位无符号整数 10 到 255 
Uint8ClampedArray8位无符号整数(溢出时钳制)10 到 255 
 Int16Array16位有符号整数 2-32768 到 32767 
Uint16Array16位无符号整数 20 到 65535 
Int32Array32位有符号整数 4-2147483648 到 2147483647
Uint32Array32位无符号整数 40 到 4294967295 
Float32Array32位浮点数 4IEEE 754 单精度浮点数 
Float64Array64位浮点数 8IEEE 754 双精度浮点数

2. 创建 TypedArray  

        TypedArray   的创建通常基于一个共享的底层缓冲区,通常是   ArrayBuffer   或   SharedArrayBuffer  。例如:

const buffer = new ArrayBuffer(16); // 创建一个大小为 16 字节的缓冲区
const int8Array = new Int8Array(buffer); // 创建一个 Int8Array,映射整个缓冲区
console.log(int8Array.length); // 输出:16

        你也可以指定缓冲区的偏移量和长度:

const int16Array = new Int16Array(buffer, 0, 4); // 从偏移量 0 开始,长度为 4 的 Int16Array
console.log(int16Array.length); // 输出:4

3. TypedArray 的特点

  • 内存效率:  TypedArray   在底层以连续的内存块存储数据,适合处理大量数据,如图像像素、音频样本等。
  • 性能优势:由于数据类型固定,  TypedArray   的访问和操作速度比普通数组更快。
  • 共享缓冲区:多个   TypedArray   可以共享同一个底层缓冲区,它们的修改会相互影响。例如: 
const buffer = new ArrayBuffer(8);
const int32Array = new Int32Array(buffer);
const uint8Array = new Uint8Array(buffer);int32Array[0] = 0x12345678; // 设置 32 位整数
console.log(uint8Array); // 输出:[120, 86, 52, 18](字节顺序取决于平台)

 4. 使用场景

  • 图像处理:操作像素数据(如   Uint8ClampedArray  )。
  • 音频处理:处理音频样本数据(如   Float32Array  )。
  • WebAssembly:与 WebAssembly 共享内存,用于高性能计算。
  • 二进制数据处理:读取或写入二进制文件(如文件上传、下载)。

5. 与普通数组的互操作

        TypedArray   和普通数组可以通过   Array.from()   或扩展运算符相互转换:

const typedArray = new Uint8Array([1, 2, 3]);
const regularArray = Array.from(typedArray); // 或 [...typedArray]
console.log(regularArray); // 输出:[1, 2, 3]

6. 注意事项

  • 字节序问题:  TypedArray   的字节序取决于运行环境(大端或小端)。如果需要跨平台操作,可能需要手动处理字节序。
  • 性能优化:  TypedArray   的性能优势在于处理大量数据时,对于小规模数据,普通数组可能更方便。

        TypedArray   是 JavaScript 中用于高效处理二进制数据的强大工具。它提供了多种数据类型选择,支持共享缓冲区,并且在性能和内存效率上有显著优势。如果你需要处理图像、音频或其他二进制数据,  TypedArray   是一个非常合适的选择。后面我们分别以网络数据处理、WebGPU编程与加密处理为例演示TypedArray在实际编程中的应用。

二、网络数据处理实战

1. 接收二进制数据

使用Fetch API获取PNG图片并解析元数据:

fetch('image.png').then(response => response.arrayBuffer()).then(buffer => {const view = new DataView(buffer);const pngHeader = String.fromCharCode(view.getUint8(1),view.getUint8(2),view.getUint8(3));console.log(`PNG标识:${pngHeader}`); // 输出PNG});

2. 处理WebSocket数据流

构建二进制协议解析器:

const ws = new WebSocket('wss://example.com/data');
ws.binaryType = 'arraybuffer';ws.onmessage = (event) => {const buffer = event.data;const dataView = new DataView(buffer);const protocolVersion = dataView.getUint8(0);const timestamp = dataView.getBigUint64(1);const payload = new Float32Array(buffer, 9);
};

三、WebGPU中的TypedArray应用

1. 创建顶点缓冲区

const vertices = new Float32Array([// 位置       // 颜色-0.5, -0.5,  1, 0, 0,0.5, -0.5,  0, 1, 0,0.0,  0.5,  0, 0, 1
]);const vertexBuffer = device.createBuffer({size: vertices.byteLength,usage: GPUBufferUsage.VERTEX,mappedAtCreation: true
});new Float32Array(vertexBuffer.getMappedRange()).set(vertices);
vertexBuffer.unmap();

2. 计算着色器数据交互

// CPU端数据准备
const inputData = new Uint32Array([1, 2, 3, 4, 5]);
const outputBuffer = device.createBuffer({size: inputData.byteLength,usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
});// GPU计算完成后读取数据
const result = new Uint32Array(inputData.length);
await device.queue.readBuffer(outputBuffer, 0, result.buffer);

四、数据加密案例:XOR加密

1. 加密函数实现

function xorEncrypt(key, str) {const encoder = new TextEncoder();const data = encoder.encode(str);const result = new Uint8Array(data.length);for (let i = 0; i < data.length; i++) {result[i] = data[i] ^ key.charCodeAt(i % key.length);}return result;
}

2. 完整加密/解密流程

// 加密过程
const original = "Secret Message";
const encrypted = xorEncrypt("mykey", original);// 传输加密数据(模拟)
const transmittedData = encrypted.buffer;// 解密过程
function xorDecrypt(key, buffer) {const data = new Uint8Array(buffer);const decoder = new TextDecoder();const result = new Uint8Array(data.length);for (let i = 0; i < data.length; i++) {result[i] = data[i] ^ key.charCodeAt(i % key.length);}return decoder.decode(result);
}console.log(xorDecrypt("mykey", transmittedData)); // 输出"Secret Message"

五、性能优化建议

  • 内存复用:对频繁操作的数据使用单个ArrayBuffer
const sharedBuffer = new ArrayBuffer(1024);
const intView = new Int32Array(sharedBuffer);
const floatView = new Float32Array(sharedBuffer);
  • 批量操作:使用set()代替循环赋值
const source = new Uint8Array(1024);
const target = new Uint8Array(2048);
target.set(source, 512); // 批量复制
  • 视图转换:避免不必要的类型转换
// 高效转换
const uintArray = new Uint16Array(buffer);
const intArray = new Int16Array(uintArray.buffer);

六、总结

        TypedArray在Web开发的各个领域发挥着关键作用,掌握TypedArray不仅能提升程序性能,更能打开处理二进制数据的新视野。随着WebAssembly和WebGPU等技术的发展,TypedArray的重要性将愈发凸显。

扩展阅读

  • MDN TypedArray文档

  • WebGPU规范

  • ArrayBuffer与性能优化

相关文章:

深入浅出TypedArray:网络数据处理、WebGPU与加密实战

JavaScript的TypedArray是现代Web开发中处理二进制数据的利器。本文将结合网络数据传输、WebGPU编程和简单加密算法三个实战场景&#xff0c;带你领略TypedArray的强大能力。 一、TypedArray基础认知 TypedArray家族包括Int8Array、Uint16Array、Float32Array等11种视图类型&a…...

http 响应码影响 video 标签播放视频

背景 使用后端给的文件下载接口地址实现视频播放&#xff0c;但是 video 标签一直无法播放视频如下图&#xff0c;把接口地址放到浏览器请求能直接下载。但就是不能播放 原因 http 响应码不正确&#xff0c;返回201是无法播放视频200可以如下图 状态码的影响&#xff1a; 20…...

观察者模式原理详解以及Spring源码如何使用观察者模式?

前言 首先说明观察者模式&#xff0c;观察者模式&#xff0c;也叫发布-订阅模式&#xff0c;应该是用来处理对象间的一对多依赖关系的。当被观察者的状态变化时&#xff0c;所有依赖它的观察者都会得到通知并自动更新。 观察者模式的结构&#xff0c;通常包括Subject&#xff0…...

【Spring】Spring配置文件

目录 ​什么是配置文件&#xff1f; 配置文件的作用 SpringBoot配置文件 配置文件格式 配置文件的优先级 properties配置文件说明 properties基本语法 读取配置文件 properties缺点 yml配置文件说明 yml基本语法 使用yml连接数据库 yml配置不同数据类型及null 注意…...

MSI微星电脑冲锋坦克Pro Vector GP76 12UGS(MS-17K4)原厂Win11系统恢复镜像,含还原功能,预装OEM系统下载

适用机型&#xff1a;【MS-17K4】 链接&#xff1a;https://pan.baidu.com/s/1P8ZgXc6S_J9DI8RToRd0dQ?pwdqrf1 提取码&#xff1a;qrf1 微星笔记本原装出厂WINDOWS11系统自带所有驱动、出厂主题壁纸、系统属性专属联机支持标志、Office办公软件、MSI Center控制中心等预装…...

Unity合批处理优化内存序列帧播放动画

Unity合批处理序列帧优化内存 介绍图片导入到Unity中的处理Unity中图片设置处理Unity中图片裁剪 创建序列帧动画总结 介绍 这里是针对Unity序列帧动画的优化内容&#xff0c;将多个图片合批处理然后为了降低Unity的内存占用&#xff0c;但是相对的质量也会稍微降低。可自行进行…...

【Java】逻辑运算符详解:、|| 与、 | 的区别及应用

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: Java 文章目录 &#x1f4af;前言&#x1f4af;一、基本概念与运算符介绍&#x1f4af;二、短路与与非短路与&#xff1a;&& 与 & 的区别1. &&&#xff1a;短路与&#xff08;AND&#xff09;2. …...

深入解析 Flutter GetX

深入解析 Flutter GetX&#xff1a;从原理到实战 GetX 是 Flutter 中一个轻量级且功能强大的状态管理、路由管理和依赖注入框架。它以简单、快速、高效著称&#xff0c;适合从小型到大型项目的开发需求。GetX 的设计理念是一体化解决方案&#xff0c;通过一个框架解决状态管理…...

Java 大视界 -- 人才需求与培养:Java 大数据领域的职业发展路径(92)

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…...

顺序表常用操作和笔试题

1、顺序表的常用操作 1.1 顺序表的创建 如下代码所示&#xff1a;创建了一个默认空间为10的整型顺序表&#xff0c;如果空间不足则会以1.5倍扩容。 List<Integer> list new ArrayList<>(); 创建一个空间为15的整型顺序表 List<Integer> list2 new ArrayL…...

List<Map<String, Object>> 如何对某个字段求和

在Java中&#xff0c;如果你有一个List<Map<String, Object>>的结构&#xff0c;并且你想要对某个特定字段进行求和&#xff0c;你可以使用Java 8的Stream API来简化这个过程。下面是一个示例代码&#xff0c;演示如何对某个字段进行求和。 假设你有一个List<M…...

2024亚马逊数据分析!

整体财务数据23 净销售额&#xff1a;全年净销售额达 6380 亿美元&#xff0c;同比增长 11%。 净利润&#xff1a;全年净利润为 592 亿美元&#xff0c;较上年同期的 304 亿美元增长 95%。 经营活动现金流&#xff1a;经营活动现金流达 1159 亿美元&#xff0c;同比增加了 36…...

foobar2000设置DSP使用教程及软件推荐

foobar2000安卓中文版&#xff1a;一款高品质手机音频播放器 foobar2000安卓中文版是一款备受好评的高品质手机音频播放器。 几乎支持所有的音频格式&#xff0c;包括 MP3、MP4、AAC、CD 音频等。不论是经典老歌还是最新的流行音乐&#xff0c;foobar2000都能完美播放。除此之…...

Apache Logic4j 库反序列化漏洞复现与深度剖析

前言 在渗透测试领域&#xff0c;反序列化漏洞一直是安全研究人员和攻击者关注的焦点。今天&#xff0c;我们将深入探讨 Apache Logic4j 库中的反序列化漏洞&#xff0c;详细了解其原理&#xff0c;并进行完整的复现演示。 一、漏洞原理 Apache Logic4j 库在处理对象的反序列…...

FPGA VIVADO:axi-lite 从机和主机

FPGA VIVADO:axi-lite 从机和主机 TOC在这里插入代码片 前言 协议就不详细讲解了&#xff0c;直接看手册即可。下面主要如何写代码和关键的时序。 此外下面的代码可以直接用于实际工程 一、AXI-LITE 主机 数据转axi lite接口&#xff1a; 读/写数据FIFO缓存 仲裁&#xff1a…...

LabVIEW 中的 3dgraph.llb库

3dgraph.llb 库位于C:\Program Files (x86)\National Instruments\LabVIEW 2019\vi.lib\Platform目录下&#xff0c;是 LabVIEW 系统里用于 3D 图形相关操作的关键库。它为 LabVIEW 用户提供众多功能&#xff0c;可在应用程序内创建、显示和交互各类 3D 图形&#xff0c;极大增…...

【Linux】文件系统:文件fd

&#x1f525;个人主页&#xff1a;Quitecoder &#x1f525;专栏&#xff1a;linux笔记仓 目录 01.回顾C文件接口02.系统文件I/O02.1 openflags 参数&#xff08;文件打开模式&#xff09;标记位传参1. 访问模式&#xff08;必须指定一个&#xff09;2. 额外控制标志&#xf…...

Vue学习记录19

TransitonGroup <TransitionGroup> 是一个内置组件&#xff0c;用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果。 和 <Transtion> 的区别 <TranstionGroup> 支持和 <Transtion> 基本相同的 props、CSS过渡 class 和 JavaScript…...

MATLAB更改图论的布局:设置layout

在图论那一章&#xff0c;我们讲过最小生成树和单源最短路径&#xff08;见&#xff1a;从零开始学数学建模&#xff09;&#xff1a; 以最短路径那节课为例&#xff0c;把绘图pplot那部分代码写为&#xff1a; % plot绘图有很多参数可以设置&#xff0c;使图尽量美观 P plot…...

【分果果——DP(困难)】

题目 分析 分果果题解参考&#xff0c;下面是补充https://blog.csdn.net/AC__dream/article/details/129431299 关于状态 设f[i][j][k]表示第i个人取到的最后一个糖果编号是j&#xff0c;第i-1个人取到的最后一个糖果编号小于等于k时的最大重量的最小值 关于转移方程 关于 j …...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

ES6从入门到精通:前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...