标签： js

发布于

JS `WebNN` (Web Neural Network API) (提案) `Backend Agnosticism` 与 `Hardware Acceleration`

各位观众老爷，大家好！今天咱们聊聊WebNN这个“小鲜肉”API，以及它背后的“老司机”——Backend Agnosticism（后端不可知论）和Hardware Acceleration（硬件加速）。保证让大家听得懂，看得爽，用得上！ 一、WebNN：让浏览器也玩AI 想象一下，你的浏览器也能像手机App一样，跑各种AI模型，人脸识别、图像分类、语音识别…是不是很酷？WebNN就是为了实现这个目标而生的。它是一个JavaScript API，让Web开发者能够利用用户设备上的硬件资源（比如GPU、NPU），高效地运行神经网络模型。 1.1 为什么要WebNN？ 性能提升： JavaScript解释执行的性能瓶颈是众所周知的。WebNN通过硬件加速，可以显著提升AI模型的推理速度，带来更流畅的用户体验。 保护隐私： 模型在本地运行，数据无需上传到服务器，保护用户隐私。 离线支持： 模型可以缓存在本地，即使在离线状态下也能运行。 降低服务器压力： 将计算任务分摊到客户端，减轻服务器的负担。 1.2 WebNN的基本概念 Graph (图): 表示一个神经网络模型，由一系列的Node（节 …

继续阅读“JS `WebNN` (Web Neural Network API) (提案) `Backend Agnosticism` 与 `Hardware Acceleration`”

发布于

JS `WebAssembly` `Linear Memory` `Allocation` `Strategies` (`bump pointer`, `free list`)

各位听众，早上好/下午好/晚上好！ 今天咱们来聊聊 WebAssembly 线性内存分配那些事儿，保证让大家听完之后，感觉像是刚啃完一只香喷喷的烤鸡，回味无穷！ WebAssembly 线性内存：一块未经开垦的处女地 首先，我们要搞清楚什么是 WebAssembly 线性内存。 把它想象成一块巨大的、连续的字节数组，就像一块原始的、未经开垦的土地。WebAssembly 模块可以在这块土地上存储数据，就像农民伯伯可以在土地上种庄稼一样。 这块内存是 WebAssembly 模块与 JavaScript 之间进行数据交换的重要桥梁，也是 WebAssembly 程序运行时的主要存储区域。 这块内存的大小是固定的，在模块实例化的时候就确定了。 但是，我们可以通过 WebAssembly.Memory.grow() 方法来扩大这块土地，增加内存页数。 每一页的大小是 64KB，也就是 65536 字节。 线性内存的地址：门牌号 线性内存中的每一个字节都有一个唯一的地址，就像我们家的门牌号一样。 这些地址从 0 开始，一直递增到内存的最大容量。 WebAssembly 指令可以通过这些地址来读 …

继续阅读“JS `WebAssembly` `Linear Memory` `Allocation` `Strategies` (`bump pointer`, `free list`)”

发布于

JS `WebAssembly System Interface (WASI)` `Capabilities-Based Security` 模型

嘿，各位代码爱好者们，欢迎来到今天的“WASI Capabilities-Based Security”讲座！ 今天咱们要聊聊WebAssembly，还有它那听起来有点高大上的WASI（WebAssembly System Interface），以及更酷炫的Capabilities-Based Security模型。 开场白：WebAssembly，不再只是浏览器的玩具 首先，咱们得明确一点：WebAssembly (Wasm) 已经不是当年那个只能在浏览器里跑跑特效的小弟了。它现在可是个能独当一面的大人物，可以跑在服务器上，嵌入到各种各样的应用里。 但问题来了，如果Wasm代码想访问系统资源（比如文件、网络），该怎么办？ 难道直接 fs.readFile() 或者 fetch()？ 这样搞安全吗？想想都觉得可怕。 WASI：WebAssembly 的系统调用翻译官 这时候，WASI 就闪亮登场了。WASI 就像一个翻译官，它定义了一套标准的系统接口，让Wasm代码可以通过这套接口来访问系统资源。 这样一来，Wasm代码就不用直接和底层操作系统打交道了，提高了可移植性和安全性。 举个例 …

继续阅读“JS `WebAssembly System Interface (WASI)` `Capabilities-Based Security` 模型”

发布于

JS `SharedArrayBuffer` `Memory Fences` (`Atomics.fence`) 与 `Memory Ordering`

各位观众，晚上好！我是你们的老朋友，今天咱们聊聊 JavaScript 里那些听起来高大上，实际用起来有点烧脑的家伙：SharedArrayBuffer、Atomics.fence 以及内存排序。 准备好了吗？Let’s dive in! Part 1: SharedArrayBuffer：共享的烦恼，共同的快乐？ 首先，我们来认识一下 SharedArrayBuffer。这家伙，顾名思义，就是一块可以在多个 JavaScript 上下文（比如Web Workers）之间共享的内存区域。 过去，JavaScript 秉承着“你的是你的，我的是我的，咱俩井水不犯河水”的原则，各个上下文之间的数据传递只能靠消息传递（postMessage），效率嘛，呵呵。 SharedArrayBuffer 的出现打破了这个局面，让大家可以直接操作同一块内存，就像一群人围着一个大黑板，你画一笔，我添一笔，最后完成一幅大作。 但是，共享的快乐背后往往隐藏着烦恼。当多个线程同时读写同一块内存时，就可能出现各种意想不到的问题，比如数据竞争、脏读、ABA问题等等。 想象一下： 线程A想把黑板上的数字从 …

继续阅读“JS `SharedArrayBuffer` `Memory Fences` (`Atomics.fence`) 与 `Memory Ordering`”

发布于

JS `Service Worker` `ReadableStream` `ByteLengthQueuingStrategy` 与 `CountQueuingStrategy`

同学们，早上好！ 今天咱们聊聊Service Worker、ReadableStream，以及它们的好伙伴：ByteLengthQueuingStrategy和CountQueuingStrategy。 这几个家伙，听起来是不是像在念咒语？ 别怕，今天咱就把它掰开了揉碎了，用大白话讲明白。 Service Worker：网页的贴身保镖兼跑腿小弟 首先，Service Worker是什么？ 简单来说，它就是浏览器在后台默默运行的一段JS代码。 它的主要职责是： 拦截网络请求： 就像一个门卫，所有网页发出的请求都要先经过它的审查。 缓存资源： 它可以把常用的资源（比如图片、JS、CSS）缓存起来，下次再用的时候直接从缓存里拿，速度嗖嗖的。 推送消息： 即使网页关闭了，它也能接收服务器推送的消息，然后通知用户。 想象一下，你的网页有个贴身保镖，帮你缓存东西，拦截坏人的请求，还能在你不在线的时候给你送信，是不是很酷？ ReadableStream：数据的流水线 接下来，咱们说说ReadableStream。 这是一个用于读取数据的流。 你可以把它想象成一个水管，水（数据）从一头流进去，你从另一 …

继续阅读“JS `Service Worker` `ReadableStream` `ByteLengthQueuingStrategy` 与 `CountQueuingStrategy`”

发布于

JS `Web Serial API` `Parity`, `Stop Bits`, `Data Bits` 的硬件级通信配置

各位听众，早上好/下午好/晚上好！我是你们今天的串口通讯小喇叭，今天咱们来聊聊 Web Serial API 里那些让你头大的硬件级配置：Parity（奇偶校验）、Stop Bits（停止位）和 Data Bits（数据位）。别怕，这玩意儿听起来玄乎，其实理解起来就像你泡方便面一样简单。 开场白：串口通讯，老朋友新玩法 串口通讯，这玩意儿在嵌入式领域可是老古董了，但 Web Serial API 赋予了它新的生命。以前你得装驱动、写 C 代码、折腾半天才能和硬件设备说上话，现在好了，浏览器直接上，JavaScript 一把梭，就能搞定。但是，要想玩转 Web Serial API，就绕不开那几个硬件配置参数，它们就像方便面里的调料包，加对了味道才正。 第一部分：数据位（Data Bits）：信息的宽度 想象一下，你要给朋友发短信，每个字代表一部分信息。数据位就相当于每个字的大小，也就是每个串口传输的数据包里有多少个 bit。常见的选择有 5、6、7 和 8 个 bit。 5 bits: 这玩意儿现在很少见了，除非你还在用一些超级古老的设备。 6 bits: 也比较少见，但某些特殊应用可 …

继续阅读“JS `Web Serial API` `Parity`, `Stop Bits`, `Data Bits` 的硬件级通信配置”

发布于

JS `WebUSB` `USB Transfer Types` (`Control`, `Bulk`, `Interrupt`, `Isochronous`) 性能分析

各位观众老爷，大家好！我是你们的老朋友，今天咱们不聊风花雪月，来聊聊WebUSB里那些“妖艳贱货”——USB传输类型。 话说这WebUSB啊，让浏览器直接跟USB设备“勾搭”上了，想想都刺激。但想玩转它，就得先摸清USB传输类型的脾气，不然，小心你的数据像脱缰的野马，不知跑哪儿去了。 USB传输类型，简单来说，就是USB设备跟主机（比如你的电脑）之间数据交流的方式。一共四种，各有千秋，咱们一个一个来扒皮。 一、Control Transfer（控制传输）：USB界的“外交官” Control Transfer，翻译过来就是“控制传输”，听着就感觉很正式。它就像USB世界的“外交官”，负责设备配置、状态查询、命令下达等重要任务。 特点： 可靠性高，速度慢，双向。 用途： 设备枚举、配置、状态查询、控制命令。 比喻： 就像给设备发“圣旨”，必须确保对方收到，并按旨意办事。 Control Transfer的结构： Control Transfer 通常由三个阶段组成： Setup Stage (设置阶段)： 主机发送一个包含请求类型、请求代码、索引和长度的Setup包。这个包就像是“外交信 …

继续阅读“JS `WebUSB` `USB Transfer Types` (`Control`, `Bulk`, `Interrupt`, `Isochronous`) 性能分析”

发布于

JS `WebHID` `Report Descriptors` `Parser` 开发：通用 HID 设备驱动

各位观众，早上好/下午好/晚上好！今天咱们来聊聊一个听起来有点神秘，但实际上挺有趣的东西：WebHID Report Descriptors Parser 开发，以及如何用它来打造通用 HID 设备驱动。别担心，我会尽量用大白话把这玩意儿讲清楚，争取让各位听完之后，也能撸起袖子自己写一个出来。 一、啥是 WebHID？为啥要用它？ 首先，我们得知道啥是 WebHID。简单来说，WebHID 就是 Web API 里的一个大哥，它的作用就是让浏览器可以直接和 HID (Human Interface Device) 设备进行通信。HID 设备是啥？键盘、鼠标、游戏手柄、各种奇奇怪怪的传感器，只要是用来和人交互的，基本上都可以算作 HID 设备。 那为啥要用 WebHID 呢？传统的 Web 开发，对 HID 设备的支持非常有限。你可能只能用一些内置的 API 来处理键盘事件和鼠标事件，但如果你想用一些特殊的 HID 设备，比如一个自定义的游戏手柄，或者一个压力传感器，那就没辙了。WebHID 的出现，就是为了解决这个问题。它提供了一个更底层的接口，让开发者可以自由地和 HID 设备进行通 …

继续阅读“JS `WebHID` `Report Descriptors` `Parser` 开发：通用 HID 设备驱动”

发布于

JS `WebGPU` `Render Pipeline` `Depth`, `Stencil`, `Blending` 状态的精细控制

各位观众，大家好！今天咱们来聊聊WebGPU渲染管线里那些“磨人的小妖精”——深度（Depth）、模板（Stencil）和混合（Blending）状态。别怕，听起来高大上，实际上掌握了它们的脾气，就能让你的渲染效果“更上一层楼”！ 一、深度测试：谁前谁后，咱说了算！ 首先，咱们来说说深度测试。想象一下，你在画一幅画，如果颜料没有先后顺序，那画面肯定是一团糟。在3D世界里也是一样，我们需要知道哪个物体挡住了哪个物体，才能正确地渲染画面。深度测试就是干这个的！ 1. 深度缓冲（Depth Buffer）：你的3D世界的“备忘录” 深度缓冲，也叫Z缓冲，就是一个存储像素深度值的缓冲区。每个像素都有一个对应的深度值，这个值表示该像素距离摄像机的距离。渲染管线在渲染每个像素时，会将该像素的深度值与深度缓冲中已有的值进行比较，以此来决定是否需要更新该像素的颜色。 2. 深度比较函数（Depth Compare Function）：谁更靠近摄像机？ 深度比较函数决定了如何比较新的深度值和已有的深度值。WebGPU提供了以下几种比较函数： 比较函数 含义 “never” 永远不通过深度测试，新的像素永 …

继续阅读“JS `WebGPU` `Render Pipeline` `Depth`, `Stencil`, `Blending` 状态的精细控制”

发布于

JS `WebGPU Compute Shaders` `Shared Memory` `Atomic Operations` 与 `Synchronization Barriers`

各位观众老爷，晚上好！我是你们的老朋友，今晚咱们聊聊 WebGPU 里那些让人头大，但又不得不学的硬骨头：Compute Shaders、Shared Memory、Atomic Operations，以及 Synchronization Barriers。保证让你们听完之后，感觉像是打通了任督二脉，功力大增！ WebGPU Compute Shaders：GPU 上的搬砖工 首先，咱们得明白 Compute Shaders 是个啥。简单来说，它就是让 GPU 不光干渲染的活儿，还能干一些通用计算的活儿。想象一下，你雇了一群 GPU，让它们帮你算算数学题、处理图像、或者跑跑物理模拟，是不是很爽？ Compute Shaders 用一种叫做 GLSL 的语言来编写（WebGPU 里用的是 WGSL，但本质差不多）。它运行在 GPU 的每个计算单元上，并行处理数据。这就像雇了一堆搬砖工，每个人搬一块砖，效率杠杠的。 Shared Memory：工友们的小仓库 光有搬砖工还不行，得给他们提供一个存放临时数据的地方，这就是 Shared Memory（共享内存）。每个 Compute Shad …

继续阅读“JS `WebGPU Compute Shaders` `Shared Memory` `Atomic Operations` 与 `Synchronization Barriers`”