标签： js

发布于

JS `WebRTC` `AV1` `Codec` `Hardware Acceleration` `Peer-to-Peer` `Video Streaming`

各位朋友，大家好！我是你们今天的导游，带大家一起探索一下WebRTC、AV1、硬件加速和点对点视频流这片充满挑战但也趣味无穷的土地。准备好了吗？Let’s go！ 第一站：WebRTC，连接你我，无需中介 WebRTC，全称Web Real-Time Communication，正如其名，它是一套实时通信的API，让浏览器和移动应用之间可以直接进行音视频通信，无需任何中间插件。想想以前，我们想在浏览器里实现视频通话，得装个Flash，或者各种ActiveX控件，简直是噩梦。WebRTC的出现，简直是救星降临！ WebRTC的核心组件主要有三个： MediaStream: 负责获取音视频流。你可以用它获取摄像头和麦克风的数据，也可以获取屏幕共享的内容。 RTCPeerConnection: 负责建立和维护点对点连接。这是WebRTC的核心，它负责协商媒体格式、交换网络信息，以及处理各种网络问题。 RTCDataChannel: 负责在点对点连接上发送任意数据。你可以用它发送文本消息、文件，甚至游戏数据。 用代码说话，我们先看看如何获取一个MediaStream： async …

继续阅读“JS `WebRTC` `AV1` `Codec` `Hardware Acceleration` `Peer-to-Peer` `Video Streaming`”

发布于

JS `WebNN` (Web Neural Network API) `Model Quantization` `Post-Training` `Optimization`

各位朋友们，晚上好！今天咱们来聊聊WebNN里的“量化”这个磨人的小妖精，以及如何用“Post-Training Quantization”（PTQ，后训练量化）来驯服它，让我们的模型跑得更快更省电。 首先，来个开场白，想象一下，你是个大厨，食材就是你的模型，算法就是烹饪方法。量化呢，就像是把食材切得更小块，这样你就能更快地做出一道菜（更快地推理）。但是！切得太小了，味道可能就变了（精度降低）。所以，我们需要找到一个完美的平衡点。 什么是量化？ 简单来说，量化就是降低神经网络中权重的精度。通常，神经网络的权重和激活值都使用32位浮点数（FP32）来表示。量化就是把它们变成更小的数字，比如8位整数（INT8）。 为什么要量化？ 更快： INT8运算比FP32运算快得多，特别是在移动设备和嵌入式设备上。 更小： INT8模型比FP32模型小得多，节省存储空间和带宽。 更省电： INT8运算消耗的能量更少，延长电池续航。 量化类型： 常见的量化类型有： 动态量化（Dynamic Quantization）： 在运行时才决定量化参数（scale和zero_point）。虽然实现简单，但速度提升 …

继续阅读“JS `WebNN` (Web Neural Network API) `Model Quantization` `Post-Training` `Optimization`”

发布于

JS `Machine Learning` `ONNX Runtime Web` `WebGPU` `Inference` `Optimization`

咳咳，各位观众老爷们，晚上好！今天咱们来聊聊一个既高大上又接地气的话题：用 JavaScript 搞机器学习，然后让它在浏览器里飞起来！具体来说，就是借助 ONNX Runtime Web + WebGPU 这对黄金搭档，把模型推理性能榨干最后一滴油。 一、机器学习：从 Python 到 JavaScript，换个姿势玩耍 说到机器学习，大家脑海里浮现的肯定是 Python，TensorFlow，PyTorch 这些关键词。没错，它们在服务器端叱咤风云，但在前端世界，JavaScript 才是王者。为什么要在浏览器里搞机器学习呢？原因很简单： 离线推理： 用户不用再依赖服务器，网络不好也能愉快地使用你的应用。 隐私保护： 数据处理在本地进行，不用担心敏感信息泄露。 降低延迟： 减少网络传输，响应速度更快，用户体验更好。 当然，JavaScript 在机器学习领域也面临着挑战： 性能瓶颈： JavaScript 本身不是为高性能计算设计的。 生态不够完善： 相比 Python，JavaScript 机器学习库还比较少。 不过，这些问题都在逐渐被解决。今天咱们的主角 ONNX Runtim …

继续阅读“JS `Machine Learning` `ONNX Runtime Web` `WebGPU` `Inference` `Optimization`”

发布于

JS `Quantum Computing` `QASM` (Quantum Assembly Language) `Simulation` in Browser

各位观众老爷，大家好！今天咱们来聊聊量子计算，不过别怕，不是要你变成薛定谔的猫，而是用JavaScript在浏览器里搞点量子计算的小把戏。 第一部分：量子计算，听起来很玄乎？ 量子计算，听起来是不是高大上？其实也没那么神秘。咱们先忘掉那些复杂的公式，用最简单的话来说： 经典计算机：就像一个开关，要么是0，要么是1。 量子计算机：就像一个可以同时处于0和1之间的开关，甚至可以同时处于无数个状态的叠加！ 这种“叠加”的特性，让量子计算机在某些问题上拥有了超越经典计算机的能力。 Qubit（量子比特）： 量子计算机的基本单位是量子比特（Qubit）。它与经典比特的最大区别就是可以处于叠加态。我们可以用一个球来形象地表示Qubit的状态。 概念 经典比特 量子比特 状态 0 或 1 0 和 1 的叠加态，表示为 α 0⟩ + β 1⟩，其中 α 和 β 是复数，且 α ^2 + β ^2 = 1 表示 一个位 可以用一个单位向量表示（Bloch 球） 操作 逻辑门 量子门（酉矩阵） 第二部分：QASM，量子世界的汇编语言 QASM (Quantum Assembly Language) 是量子 …

继续阅读“JS `Quantum Computing` `QASM` (Quantum Assembly Language) `Simulation` in Browser”

发布于

JS `Chromium DevTools Protocol` `CDP` `Tracing` `Performance Events` `Custom Metrics`

咳咳，大家好，我是老码农，今天咱们聊聊Chrome DevTools Protocol (CDP) 里面的 Tracing 和 Performance Events，以及怎么用它们来做 Custom Metrics。这玩意儿听起来有点高大上，其实没那么复杂，咱们争取用最接地气的方式把它搞明白。 开场白：为啥要关心这些玩意儿？ 想象一下，你辛辛苦苦写了个网页，自我感觉良好，但用户一用就卡成PPT。这时候怎么办？瞎猜吗？当然不行！我们需要一些工具，一些数据，来告诉我们到底哪里出了问题。CDP Tracing 和 Performance Events 就是这样的工具，它们能像X光一样，帮你透视你的网页，找出性能瓶颈。而 Custom Metrics 则是你定制的“体检指标”，让你更精准地关注关键性能数据。 第一部分：Chrome DevTools Protocol (CDP) 简介 CDP 是什么？简单来说，它就是 Chrome 浏览器暴露出来的一组 API，你可以通过这些 API 控制 Chrome 的各种行为，比如打开网页、点击按钮、获取网页内容，当然也包括我们今天重点讲的 Tracin …

继续阅读“JS `Chromium DevTools Protocol` `CDP` `Tracing` `Performance Events` `Custom Metrics`”

发布于

JS `Vite` `Pre-Bundling` `Dependency Graph` `Invalidation` `Strategies`

各位靓仔靓女，大家好！我是今天的主讲人，咱们今天聊聊Vite的预构建，这可是Vite快如闪电的关键秘籍之一，搞懂它，你的开发效率起飞不是梦！ 预热：为什么需要预构建？ 想象一下，你正在开发一个大型项目，里面充满了各种各样的第三方依赖。这些依赖通常是CommonJS或者UMD格式的，浏览器可不认识这些“老古董”。而且，很多依赖包内部又会引用其他模块，形成一个错综复杂的依赖关系网。 如果直接把这些依赖丢给浏览器，那浏览器就得： 下载一大堆零碎的文件。 解析这些CommonJS/UMD模块。 解决模块之间的依赖关系。 这一顿操作下来，浏览器直接懵逼，启动速度慢到令人发指。这就是传说中的“冷启动”地狱！ Vite的预构建就是来拯救大家的。它会在开发服务器启动时，就把这些CommonJS/UMD模块转换成浏览器友好的ESM格式，并且把它们打包成一个或几个模块。这样，浏览器就只需要下载几个文件，就能搞定所有的依赖，启动速度自然就蹭蹭蹭地上去了。 主角登场：Vite 的预构建 Vite的预构建主要做了两件事： 依赖发现（Dependency Discovery）： 扫描你的源代码，找出所有的依赖项。 …

继续阅读“JS `Vite` `Pre-Bundling` `Dependency Graph` `Invalidation` `Strategies`”

发布于

JS `Monorepo` `Remote Execution` (`Bazel`, `Pants`) `Distributed Build Cache`

各位朋友，大家好！我是今天的主讲人，咱们今天聊聊“JS Monorepo + Remote Execution + Distributed Build Cache”这个组合，听起来是不是有点像科幻电影的名字？别怕，我会尽量用大白话把它掰开了揉碎了讲清楚。 先来个热身：你有没有遇到过以下情况？ 项目越来越大，构建时间长到可以煮咖啡甚至煲剧？ 团队成员的代码风格不统一，一会儿空格缩进一会儿Tab缩进，简直逼死强迫症？ 改了一行代码，整个项目都要重新构建，感觉生命都在浪费？ 多人协作时，环境配置不一样，本地跑得好好的，一提交就挂了？ 如果你点头如捣蒜，那么恭喜你，今天的内容绝对能帮到你！ 第一幕：Monorepo 了解一下 啥是Monorepo？简单来说，就是把多个项目或者模块的代码都放在同一个代码仓库里管理。别以为这只是简单的“打包”，它背后可是有很多好处的。 特性 解释 优势 单一代码库 所有项目/模块的代码都在同一个Git仓库中。 简化依赖管理、方便代码复用、原子性变更（一次提交修改多个项目）、更容易进行大规模重构。 共享依赖 多个项目可以共享同一个依赖包，避免重复安装和版本冲突。 减 …

继续阅读“JS `Monorepo` `Remote Execution` (`Bazel`, `Pants`) `Distributed Build Cache`”

发布于

JS `Code Transformation` `Babel Plugin` `Visitor Pattern` `AST Traversal`

各位观众老爷，早上好/下午好/晚上好！我是今天的主讲人，咱们今天聊聊一个挺有意思的话题：JavaScript 代码变形术，啊不，是代码转换，更严谨点说，是利用 Babel 插件和 AST Traversal 实现代码转换。 开场白：JavaScript 代码变形记 想象一下，你写了一段炫酷的 ESNext 代码，恨不得让整个项目都用上，但是你的用户还在用古老的 IE 8，怎么办？难道要他们升级浏览器？还是把代码回退到 ES5？ 当然都不用！ 我们有 Babel！ Babel 就像一个魔法师，能把高版本的 JavaScript 代码，转换成低版本，让你的代码在各种环境下都能运行。而 Babel 插件，就是魔法师手中的法杖，让它能施展各种各样的魔法。 今天，我们就来学习如何打造自己的法杖，掌握代码变形的奥秘。 第一章：AST (Abstract Syntax Tree) – 代码的骨架 要进行代码转换，首先要了解代码的结构。JavaScript 代码就像一棵树，这棵树就是 AST (Abstract Syntax Tree)，抽象语法树。 AST 是代码的抽象表示，它把代码分解成一个个节点 …

继续阅读“JS `Code Transformation` `Babel Plugin` `Visitor Pattern` `AST Traversal`”

发布于

JS `Static Analysis` `Abstract Syntax Tree (AST)` `Pattern Matching` for `Linter Rules`

各位好，欢迎来到今天的 "AST 大冒险：Linter 规则的奇妙之旅" 讲座！ 今天咱们要聊聊前端世界里默默守护我们代码质量的英雄 – Linter。更具体地说，我们要深入 Linter 的心脏，看看它是如何利用静态分析、抽象语法树 (AST) 和模式匹配这些武器来找出我们代码中的“坏家伙”的。 准备好了吗？ Let’s rock! 第一幕：Linter，代码质量的守门人 首先，咱们来明确一下 Linter 是个啥。想象一下，你是一个建筑设计师，Linter 就是你的质量检查员。它会在你辛辛苦苦搭建的房子（代码）盖好之前，仔细检查每一块砖头（每一行代码）是否符合规范，有没有潜在的安全隐患。 Linter 的主要职责就是： 代码风格统一： 确保团队的代码看起来像一个人写的，减少阅读和维护成本。 潜在错误发现： 提前发现一些常见的编程错误，比如未使用的变量、错误的类型判断等等。 代码安全性提升： 帮助我们避免一些安全漏洞，比如 XSS 攻击、SQL 注入等等（当然，Linter 主要还是关注前端安全）。 最佳实践推广： 引导我们使用更优雅、更高效的编码方式 …

继续阅读“JS `Static Analysis` `Abstract Syntax Tree (AST)` `Pattern Matching` for `Linter Rules`”

发布于

JS `AST` `Control Flow Graph` (CFG) / `Data Flow Graph` (DFG) 分析

嘿，各位代码界的探险家们，很高兴能和大家一起聊聊 JavaScript AST、CFG 和 DFG 这三个听起来高大上，但实际上挺有趣的东西。今天咱们的目标是：把这些概念拆解成一个个小零件，然后组装起来，让你也能轻松玩转代码分析。 开场白：代码的“X光片” 想象一下，你的代码就像一个黑盒子，你只能看到它的输入和输出，却不知道里面发生了什么。AST、CFG 和 DFG 就相当于给代码做了一次“X光检查”，让你能看清代码的内部结构和数据流动。 第一站：抽象语法树 (AST) – 代码的骨架 AST，全称 Abstract Syntax Tree，也就是抽象语法树。它是源代码语法结构的一种树状表示形式。简单来说，AST 就像代码的骨架，它忽略了代码中的空格、注释等无关紧要的细节，只保留了代码的核心结构。 1.1 为什么要用 AST？ 代码理解： AST 提供了一种结构化的方式来理解代码，方便我们进行代码分析、优化、转换等操作。 代码转换： 我们可以通过修改 AST 来实现代码的转换，比如代码压缩、代码混淆、代码重构等。 静态分析： AST 可以帮助我们进行静态代码分析，比如检查代码风格、查找 …

继续阅读“JS `AST` `Control Flow Graph` (CFG) / `Data Flow Graph` (DFG) 分析”