近几年时常有人在后台问我深度学习不是 Python 的天下吗你用 JavaScript 折腾神经网络是不是有点“伪黑客”的意思其实我第一次听到这类质疑是完全可以理解的毕竟主流教程清一色是 PyTorch、TensorFlow 和 Jupyter Notebook。但我自己走完一遍之后反而觉得JavaScript 才是最适合“黑客式学习”的载体。你不需要配环境、不需要买显卡、不需要等模型训练完才能看到结果打开浏览器写几行代码神经网络的内部行为就直接摆在眼前。这篇是系列的第二篇也可以说是整个“黑客入门”路线里最硬核的一篇。第一篇把 JavaScript 能做深度学习的来龙去脉和基础环境讲清楚了这一篇就直奔主题如何从零实现前向传播和反向传播如何用 Canvas 把训练过程可视化以及我在实际写代码时踩过的一堆细节坑。如果你已经对神经网络只有“听说过”的程度那这篇正好带你把它拆开、看透、再徒手装回去。1. 为什么要在 JavaScript 里跑神经网络1.1 抛开环境依赖深度学习才能回归本质我在带朋友入门深度学习时最痛苦的一件事就是环境安装。很多人刚开始学就被 Python 版本、显卡驱动、CUDA 版本、虚拟环境之间的各种组合问题劝退了。明明几十行代码就能讲清楚的东西愣是卡在“import torch 报错”这种完全无关的环节上。JavaScript 就不一样。几乎所有人的电脑上都装了浏览器你说“打开开发者工具直接跑神经网络”这句话对任何一台电脑都成立。不需要安装任何东西不需要配置任何东西把代码粘贴进控制台立刻就能看到结果。这种“零启动成本”对理解神经网络这种本身就很抽象的概念来说太重要了。再者浏览器本身就是一块天然的可视化画布。Python 侧要用 Matplotlib 画训练曲线要处理中文字体、显示窗口、保存图片麻烦得很。而在浏览器里Canvas 和 DOM 就是现成的可视化工具训练的同时就能画出损失曲线、决策边界、权重变化神经网络内部的每一个变化都肉眼可见。1.2 JavaScript 深度学习的真正优势在哪里很多人觉得 JavaScript 跑深度学习性能不行这句话对也不对。如果你是跑大规模模型、几亿参数那种JavaScript 确实不如 C 和 CUDA。但做学习、做原型验证、做中小规模的交互式应用JavaScript 有自己的独门优势数据隐私场景。图片、麦克风录音、用户行为数据都可以在浏览器本地完成推理不需要把数据上传到服务器。比如你写一个人脸关键点检测的页面用户的照片从头到尾不出本地这个价值在隐私意识越来越强的今天非常关键。跨平台成本极低。写一次网络结构Windows 电脑能跑、MacBook 能跑、iPad 也能跑甚至手机浏览器都能打开。你做完一个小 Demo发一个链接给对方就能直接体验不需要让对方装 Python 环境。未来性能并不虚。WebGPU 这几年进步很快浏览器里跑 GPU 计算已经不是新鲜事。我做矩阵乘法实验时试过 WebGPU 的加速效果虽然开发复杂度比普通 JavaScript 高一些但性能相比纯 CPU 版本已经有了质的飞跃。1.3 这个系列到底教你什么结合“黑客”这两个字来说我理解的“黑客式学习”不是教你攻击别人的系统而是培养一种刨根问底的思维模式。别人用现成的深度学习框架输入数据等结果你要做的是自己造轮子把每一层网络拆开看清楚数据是怎么流动的、梯度是怎么计算的、参数是怎么更新的。等到你亲手把代码一行行实现出来再看那些框架里的模型训练日志你会发现它们不再是一个黑盒而是一堆你能精确预测每一步行为的具体操作。这一篇的目标很明确不用任何第三方深度学习库只用原生 JavaScript 实现一个可以训练的两层神经网络让它学会解决经典的 XOR异或问题并且把所有训练过程可视化。做完这一步你就拥有了向 CNN、RNN、LSTM 这些更复杂结构进军的基础。1.4 需要的基础知识说明这篇文章面向的读者不需要太深的数学基础。矩阵加法、乘法、求导这三个概念够用就行全文会用生活化的方式重新讲一遍。JavaScript 语法方面只需要会数组操作、函数定义、for 循环就足够了。我不会在这篇文章里用任何花哨的语法特性确保每一个例子你都能直接复制运行。你需要的是一台电脑一个最新版本的 Chrome 或 Edge 浏览器一个能静下心来跟着敲代码的下午。2. 动手前必须搞懂的三个数学基础2.1 矩阵运算到底在计算什么神经网络里最频繁的操作就是矩阵乘法。你可能被各种教程里的 W、b、X 矩阵符号搞得晕头转向但说白了矩阵就是一张用行列组织起来的数字表格矩阵乘法就是按照固定规则把两张表合并成一张新表。举个例子。你有一批数据里面有三个样本每个样本有两个特征那么数据就可以表示成一个 3 行 2 列的矩阵。网络的第一层里有 4 个神经元每个神经元都要接收这 2 个特征的输入并输出一个值那么这一层的权重就可以表示成一个 2 行 4 列的矩阵。数据矩阵乘以权重矩阵得到的 3 行 4 列矩阵就是每个样本在 4 个神经元上的输出。这里的乘法规则是数据矩阵第 i 行所有元素分别与权重矩阵第 j 列所有元素对应相乘再把乘积加起来结果放在新矩阵第 i 行第 j 列。我第一遍学的时候觉得这规则很绕后来拿纸笔手动算了一个 2 乘 2 的例子就彻底明白了。对神经网络来说矩阵乘法的意义是一次性批量计算多个样本通过多个神经元的结果相当于把 for 循环的工作化简成一条张量运算。2.2 为什么 XOR 问题是非线性难题神经网络入门必做的一道题就是 XOR 异或问题。这个问题的输入只有两个数每个数是 0 或 1当两个输入不同时输出 1相同时输出 0。你可能会问这有什么难的用普通代码一个 if 判断就解决了if (a ! b) return 1; 但对神经网络来说这个问题有个难题它是线性不可分的。什么意思你把四个输入点画在坐标系里(0,0)、(0,1)、(1,0)、(1,1)其中 (0,0) 和 (1,1) 是一类(0,1) 和 (1,0) 是另一类。无论如何你都找不到一条直线把两类点分开这就是“线性不可分”。解决这个问题必须引入非线性激活函数。早期的神经网络研究被 XOR 问题卡了很久就是因为当时流行的是感知机没有非线性层连这么简单的问题都解不了。直到加入隐藏层和激活函数之后多层感知机才正式登场。所以我们在 JavaScript 里实现神经网络选择 XOR 作为测试问题不是因为别的就是为了验证网络真的学会了对非线性边界的拟合。2.3 反向传播用到的链式法则其实像“责任分摊”反向传播听起来高深核心算法就是链式法则。我用一个生活化的类比来理解假设你是一个部门主管手下有几个小组每个小组的产出最终汇总成公司总利润。月底发现利润不达标你要判断是哪个组的责任以及该调整谁的 KPI 指标。神经网络训练的过程就是这个逻辑。总误差损失函数的值是最终目标中间每一层每个权重都对总误差有“贡献”。反向传播从输出层开始按照“后一层的误差如何影响前一层参数”的顺序把总误差的“责任比例”逐层往前分摊。每个权重拿到自己的责任比例后朝减少总误差的方向调整一下数值。这个“责任比例”在数学上就是偏导数。链式法则的公式形式很简单如果一个变量 y 通过中间变量 u 依赖 x那么 y 对 x 的导数等于 y 对 u 的导数乘以 u 对 x 的导数。神经网络正好就是这样一种多层嵌套结构。你不需要记复杂的矩阵求导公式只要按从后往前的顺序把每一层的误差信号传递下去然后乘上本层输入对权重的导数就能得到该层的梯度。2.4 激活函数为什么要用 sigmoid 和它的导数激活函数是非线性的来源。我们最常用的一个入门激活函数是 sigmoid公式是 1 除以1 加 e 的 -x 次方输出范围在 0 到 1 之间。这个函数的意义是把任意大小的实数压缩到 0 到 1 区间恰好像一个“概率”输出。sigmoid 之所以在入门教程里高频出现除了历史悠久之外还因为它的导数公式极其优雅导数等于输出乘以1 减去输出。也就是说你只要保存了前向传播时这个神经元的输出值反向后向传播时直接用这个输出算导数连复杂的除法指数运算都不用重新算一遍。当然 sigmoid 有缺点它容易饱和输入绝对值很大时梯度会趋近于零导致深层网络训练困难。这个坑我在后面会详细讲。初学者第一次用 sigmoid 时会觉得很神奇为什么反向传播里那个数值正好就是输出乘1 减输出等你动手推导一次就会发现这一切都是链式法则的自然结果并不神秘。3. 从零实现前向传播和反向传播3.1 用二维数组实现一个极简矩阵库在动手写神经网络之前我们先实现一个微型矩阵库。不追求性能只求逻辑清晰。我这里用二维数组来代表矩阵提供初始化、转置、乘法和逐元素运算几个基础函数。// 生成一个 rows 行 cols 列的矩阵初始化为随机小值 function createMatrix(rows, cols) { const m []; for (let i 0; i rows; i) { m.push([]); for (let j 0; j cols; j) { m[i].push((Math.random() - 0.5) * 0.5); } } return m; } // 矩阵乘法a 是 m x nb 是 n x p结果是 m x p function matMul(a, b) { const m a.length; const n a[0].length; const p b[0].length; const res []; for (let i 0; i m; i) { res.push([]); for (let j 0; j p; j) { let sum 0; for (let k 0; k n; k) { sum a[i][k] * b[k][j]; } res[i].push(sum); } } return res; } // 将一维数组转为列向量矩阵方便和权重矩阵相乘 function toColumnVector(arr) { return arr.map((v) [v]); }提示这几段代码是后面所有内容的地基建议现在就在浏览器控制台里跑一遍确认矩阵乘法的形状符合预期。这里有个初学者容易混的点矩阵乘法对两个矩阵的维度有严格匹配要求。左矩阵的列数必须等于右矩阵的行数否则无法相乘。神经网络里常见的维度是输入矩阵形状是【样本数输入维度】权重矩阵形状是【输入维度隐藏层节点数】两者相乘得到【样本数隐藏层节点数】。时刻盯着形状看能少踩很多坑。3.2 定义一个只有一层隐藏层的小网络我们设计一个非常经典的网络结构输入层 2 个节点隐藏层 4 个节点输出层 1 个节点。隐藏层用 sigmoid 激活输出层也用一个 sigmoid因为我们解决的是二分类问题希望输出落在 0 到 1 之间。用“黑客躬身入局”的方式不依赖任何现成框架从数据结构开始定义网络的权重和偏置。class NeuralNet { constructor() { // 输入层 2 - 隐藏层 4 this.W1 createMatrix(2, 4); this.b1 createMatrix(1, 4); // 隐藏层 4 - 输出层 1 this.W2 createMatrix(4, 1); this.b2 createMatrix(1, 1); } }初始化的权重范围我会控制在 -0.25 到 0.25 之间而不是直接用 0 到 1。原因是后面激活函数是 sigmoid如果初始权重太大输入到 sigmoid 的加权值就会很大导致输出接近 1梯度接近 0网络一上来就进入饱和区训练几乎不动。这种初始化细节看起来不起眼但对训练能否成功影响极大。3.3 前向传播输入数据如何一层层流动到输出前向传播是神经网络在推理时做的事输入特征经过加权求和、加偏置、激活逐层传递最后得到输出。用代码表达就是模拟矩阵乘法和激活函数的组合。sigmoid(x) { return 1 / (1 Math.exp(-x)); } sigmoidDerivative(output) { return output * (1 - output); } forward(X) { // X 是 1x2 的输入向量 this.z1 matMul(toColumnVector(X), this.W1); // 1x4 this.z1[0][0] this.b1[0][0]; this.z1[0][1] this.b1[0][1]; this.z1[0][2] this.b1[0][2]; this.z1[0][3] this.b1[0][3]; this.a1 this.z1.map((row) row.map((v) this.sigmoid(v))); // 激活 this.z2 matMul(this.a1, this.W2); // 1x1 this.z2[0][0] this.b2[0][0]; this.a2 this.z2.map((row) row.map((v) this.sigmoid(v))); return this.a2[0][0]; }这段代码是网络的心脏。为了可读性我把偏置的加法直接写在数组索引上实际项目里可以用循环来优化。每个中间值我都用 this 存下来了因为反向传播时这些值全部要重新用到。如果你在实现时图省事没有缓存 z1、a1、z2那反向传播的时候只能重算麻烦不说还容易把数值弄混。3.4 损失函数拿什么标准判断网络犯了多少错定义一个损失函数用来衡量网络的输出和真实标签的差距。这里用最简单的均方误差MSE。公式是预测值和真实值差的平方的平均值。打个比方这就像学生考试每道题的分差就是误差把所有分差平方再平均就是这次考试的“总体失误程度”。computeLoss(pred, target) { const diff pred - target; return diff * diff; }MSE 的好处是处处可导梯度计算方便而且对大的误差会给予更大的惩罚因为平方放大了距离。比如预测 0.9 与真实 0 的误差平方是 0.81而预测 0.6 与真实 0 的误差平方只有 0.36前者被惩罚得更重。这符合“大错重罚”的直觉。不过 MSE 有一个问题配合 sigmoid 输出层时网络在输出接近 0 或 1 的区域sigmoid 导数会变得很小MSE 梯度也会跟着变得很小学习速度会变慢。业界更常用交叉熵损失来配合 sigmoid 输出。但这里选择 MSE 是为了演示方便梯度推导简单并不影响对反向传播机制的理解。3.5 反向传播逐一计算每个参数的梯度反向传播是整个神经网络最核心也是新手最想放弃的部分。别怕这里把公式拆开一步步走。我们的网络结构只有两层反向传播也只需要计算两个权重矩阵的梯度dW2、db2、dW1、db1。先从输出层开始。输出层误差对 z2 的偏导等于损失对 a2 的偏导乘以 a2 对 z2 的偏导。MSE 对预测 a2 的偏导是 2 乘以a2 减 targetsigmoid 对 z2 的偏导是 a2 乘以1 减 a2。两者相乘得到 delta2。接着delta2 通过 W2 传播回隐藏层。隐藏层的误差信号 delta1 等于 delta2 乘以 W2 转置再乘以 a1 对 z1 的导数。这样每个权重的梯度就都有了W2 的梯度 a1 的转置乘以 delta2b2 的梯度 delta2W1 的梯度 输入 X 的转置乘以 delta1b1 的梯度 delta1代码实现如下backward(X, target, output) { // 输出层误差信号 const delta2 (output - target) * this.sigmoidDerivative(this.a2[0][0]); this.dW2 this.a1.map((row) row.map((v) v * delta2)); this.db2 [[delta2]]; // 计算隐藏层误差信号 const delta1ForEachNeuron []; for (let j 0; j 4; j) { const error this.W2[j][0] * delta2 * this.sigmoidDerivative(this.a1[0][j]); delta1ForEachNeuron.push(error); } this.dW1 [[0, 0, 0, 0], [0, 0, 0, 0]]; // 输入 X 长度为 2 for (let i 0; i 2; i) { for (let j 0; j 4; j) { this.dW1[i][j] X[i] * delta1ForEachNeuron[j]; } } this.db1 [delta1ForEachNeuron]; }如果你第一次接触这段代码我必须提醒你这里最考验的其实是“形状”意识。每个矩阵的行列数都要对齐转置该出现在哪里就出现在哪里写错了梯度方向就反了。我一开始也常写反最后是靠梯度检查法抓出来的这个技巧在后面的章节会详细讲。3.6 梯度下降更新参数永远朝下山的方向挪一步算完梯度之后参数的更新就非常简单了。梯度告诉我们的是如果把这个参数增大一点点损失会增大还是减小。我们需要朝损失减小的方向走所以用参数减去学习率乘以梯度。update(lr) { for (let i 0; i 2; i) { for (let j 0; j 4; j) { this.W1[i][j] - lr * this.dW1[i][j]; } } for (let j 0; j 4; j) { this.b1[0][j] - lr * this.db1[0][j]; } for (let i 0; i 4; i) { this.W2[i][0] - lr * this.dW2[i][0]; } this.b2[0][0] - lr * this.db2[0][0]; }学习率的含义是每次更新迈多大的步子。步子太小训练慢步子太大越过最低点甚至发散。后面我会专门实测不同学习率的效果你就能直观看到这个参数的敏感性。现在把 forward、backward、update 串起来就可以开始训练循环了。每次迭代里我们随机取一个训练样本前向传播算输出反向传播算梯度更新参数。这种每次只用一个样本的更新方式叫随机梯度下降虽然会有波动但简单有效。3.7 完整训练循环让网络自己学会 XOR 的规则const net new NeuralNet(); const trainingData [ { input: [0, 0], target: 0 }, { input: [0, 1], target: 1 }, { input: [1, 0], target: 1 }, { input: [1, 1], target: 0 } ]; const lr 0.7; for (let epoch 0; epoch 20000; epoch) { const sample trainingData[Math.floor(Math.random() * 4)]; const pred net.forward(sample.input); net.backward(sample.input, sample.target, pred); net.update(lr); if (epoch % 2000 0) { let totalLoss 0; for (const d of trainingData) { totalLoss net.computeLoss(net.forward(d.input), d.target); } console.log(epoch ${epoch}, loss: ${(totalLoss / 4).toFixed(6)}); } }跑完这段代码你应该能在控制台看到损失逐渐下降最后接近 0.001 甚至更低的程度。用四个样本重新前向传播一次预测值会明显靠近 0 或 1。注意如果你初始化的权重是零矩阵或者学习率太大这个训练过程根本不会收敛。后面排查问题的部分会提到这些情况。4. 用 Canvas 把训练过程可视化4.1 为什么可视化比打印损失更重要控制台里打印的 loss 数字只能告诉你“网络在变好”但你不能直观看到它是怎么变好的。用 Canvas 画出来很多东西就一目了然了。比如训练初期决策边界是什么形状后期如何逐步扭曲最终形成 XOR 的分类区域。这种视觉反馈对建立直觉非常有价值尤其适合入门者。浏览器做可视化有着天然优势。Canvas 本身就是 HTML5 标准你不需要安装任何图形库直接在网页上画点、画线、填充颜色就可以。这正好也是我推荐用 JavaScript 学深度学习的第二个理由可视化和训练在同一个运行时里没有数据搬运的隔阂。4.2 损失曲线的实时绘制代码下面在页面上加一个 canvas 元素宽度为 600高度为 300横轴是迭代次数纵轴是损失值。每训练若干个 epoch就画一个点。为了让曲线平滑可以对损失做滑动平均。canvas idlossChart width600 height300/canvasconst canvas document.getElementById(lossChart); const ctx canvas.getContext(2d); ctx.fillStyle #fff; ctx.fillRect(0, 0, 600, 300); function drawLossPoint(epoch, loss) { const x (epoch / 20000) * 600; const y 300 - Math.min(loss, 1) * 280; ctx.fillStyle #1a73e8; ctx.beginPath(); ctx.arc(x, y, 2, 0, Math.PI * 2); ctx.fill(); }把 drawLossPoint 放进训练循环里每 20 个 epoch 调用一次。随着训练推进你会看到蓝色的点逐渐聚集成一条下降的曲线。如果损失下降得很慢或者忽高忽低你能立刻从曲线上看出来而不是只靠数字猜。4.3 决策边界绘制的核心思路决策边界的绘制其实是拿训练好的网络当“评分器”对二维平面上的每个点做预测然后按预测结果着色。XOR 问题只有两个输入特征正好可以映射到 canvas 的二维坐标。把画布坐标映射到输入空间比如画布 400 乘 400对应输入从 0 到 1 的区域。遍历画布上每个像素归一化为输入值送入网络预测根据输出值决定颜色。这样画出来的图会清晰地显示出网络学到的分类边界。function drawDecisionBoundary(net) { const size 400; const imageData ctx.createImageData(size, size); for (let y 0; y size; y) { for (let x 0; x size; x) { const xInput x / size; const yInput 1 - y / size; const pred net.forward([xInput, yInput]); const intensity Math.round(pred * 255); const pixelIndex (y * size x) * 4; imageData.data[pixelIndex] intensity; imageData.data[pixelIndex 1] intensity; imageData.data[pixelIndex 2] 255 - intensity; imageData.data[pixelIndex 3] 255; } } ctx.putImageData(imageData, 0, 0); }我第一次跑出这个图时能明显看到训练初期边界非常混乱随着迭代次数增多边界逐渐分裂成几块最终形成两两对角的分类区域。那种从混沌到清晰的过程比任何教材里的公式都更让人震撼。4.4 使用 requestAnimationFrame 避免页面卡死训练循环如果用 for 循环一次性跑几万次浏览器会在循环结束前一直处于假死状态渲染出来的动画只会闪一下看不到过程。解决办法是把训练循环拆分成多个小片段用 requestAnimationFrame 每次只跑一定数量的迭代。let epoch 0; function trainOneBatch() { for (let step 0; step 10; step) { const sample trainingData[Math.floor(Math.random() * 4)]; const pred net.forward(sample.input); net.backward(sample.input, sample.target, pred); net.update(lr); epoch; } if (epoch % 50 0) { drawLossPoint(epoch, currentLoss()); drawDecisionBoundary(net); } if (epoch 20000) { requestAnimationFrame(trainOneBatch); } } requestAnimationFrame(trainOneBatch);这段代码的收益是立竿见影的。页面保持流畅动画实时刷新你能看到决策边界一点点演变。对于正在学习神经网络的人来说这比看任何静态图都有效得多。4.5 我实测的损失曲线和边界变化记录我在本地跑过的结果大概是这样初始阶段训练 2000 次左右损失从 0.25 降到 0.1决策边界还是接近一条直线到 5000 次损失降到 0.03边界出现弯曲到 12000 次之后损失降到 0.005 以下边界已经分成左右两个区域最终完全拟合了 XOR 的四个点。这里提一个很有意思的观察如果用学习率 0.1训练速度明显变慢跑满 20000 次损失还在 0.05 左右如果用学习率 2.0损失曲线会剧烈震荡有时甚至升到 0.8 以上。这说明学习率不是一个可以随意取值的超参数它对训练结果的稳定性影响极大。下一篇我会专门聊怎么调学习率。5. 那些坑了我一整晚的细节 Bug5.1 损失不降反升先怀疑学习率太大初学者遇到损失不降第一反应往往是改网络结构或者换激活函数但实际上最常犯的错误是学习率设置不当。学习率太大时参数更新会跳过最优区域导致损失值不降反升或者维持在很高的水平反复震荡。我个人的排查流程是先把学习率降到 0.1观察损失是否稳定下降然后慢慢调大找到震荡前的临界值。如果你发现损失曲线像心跳一样上下跳动那八成是学习率太高了。在实际项目中更稳妥的做法是使用学习率衰减或自适应优化器但入门阶段手动调一次学习率能让你对梯度下降的本质有更深的理解。5.2 所有预测都接近 0.5检查权重初始化如果你发现网络训练了很久输出始终在 0.5 附近徘徊有可能是因为权重初始化成了全零或全部相同。全零初始化会让同一层的所有神经元接收到完全相同的梯度无论怎么训练它们的参数都保持一致最终整个隐藏层退化成一个神经元无法学到不同的特征。我在实现中使用的初始化范围是负 0.25 到正 0.25 的随机数。这个范围对 XOR 这种小网络足够用对更深的网络可以用 Xavier 初始化或 He 初始化它们会根据神经元数量自动调整初始化的方差。5.3 矩阵形状不匹配的黄金排查法实现神经网络时最常见的报错就是矩阵乘法维度不匹配。比如你输入一个形状是 3 行 2 列的矩阵想乘一个形状是 3 行 4 列的权重矩阵就会直接报错。浏览器控制台会给出“无法执行乘法”之类的提示但本质上就是行和列没有对齐。我的排查方法是每计算完一步就在控制台打一行日志打印当前矩阵的形状。宁可多打几行日志也不要凭空猜测。尤其做反向传播时转置操作非常容易出错时刻问自己一个问题这两个矩阵相乘结果的形状应该是什么如果结果形状和预期不一致一定在某个步骤里用错了转置。5.4 sigmoid 饱和导致梯度消失初学阶段用了 sigmoid训练深度网络时一旦层数加深就会发现浅层权重几乎不更新。原因是 sigmoid 在输入绝对值大的时候导数趋近于零。误差信号每向后传播一层就要乘一次 sigmoid 导数连续乘几次之后梯度就变成极小的数字深层参数自然收不到更新信号。我在两层小网络里这个问题还不明显但当你以后扩展到更多层时就会深刻体会到梯度消失的威力。解决办法有很多最常用的是把激活函数换成 ReLU或者用批归一化。不过入门阶段我建议还是先用 sigmoid 亲身体会一下这个问题这样你对“为什么深度学习框架都偏爱 ReLU”会有刻骨铭心的理解。5.5 梯度检查验证反向传播写没写对的终极武器反向传播代码写完了你如何确定梯度算得对有一个非常经典的标准方法数值梯度检查。原理是直接用导数的定义给参数加一个小量 epsilon计算损失的变化量再除以 epsilon得到一个近似梯度值把这个值与你的反向传播梯度对比如果两者相差很小就说明反向传播代码逻辑正确。function numericalGradient(net, X, target, paramName) { const eps 1e-6; const original net[paramName][0][0]; net[paramName][0][0] original eps; const lossPlus net.computeLoss(net.forward(X), target); net[paramName][0][0] original - eps; const lossMinus net.computeLoss(net.forward(X), target); net[paramName][0][0] original; return (lossPlus - lossMinus) / (2 * eps); }梯度检查是“黑客式”学习中我最推荐的一个步骤。它会逼着你真正理解梯度方向的含义而不是停留在“把这几个公式背下来”的层面。如果你跑完数值梯度检查和反向传播梯度发现两者误差小于 1e-5那就可以自信地说我的反向传播写对了。5.6 浏览器卡死与日志轰炸的处理技巧训练循环里如果用 console.log 打印每一次迭代的损失控制台会被海量日志刷到卡顿整个页面交互都会变慢。这看起来是小事但实际开发时很影响效率。我习惯的做法是只在固定间隔打印或者用一个数组记录最近若干次损失训练结束后统一绘制。如果训练循环真的把进程卡住了可以在 console 里按一下“重新加载页面”或者先把训练轮次调小比如改成 1000 次确认代码逻辑没问题后再加到 20000 次。逐步加大规模而不是一上来就跑满这种调试思路在 JavaScript 环境里尤其好用因为浏览器对长耗时脚本的容忍度很低。6. 从 XOR 迈向真实应用的三个扩展方向6.1 把网络封装成可复用的类你已经有了一个能解决 XOR 的网络但它还写得很死输入层 2 个、隐藏层 4 个、输出层 1 个都是写死的值。如果要复用到别的任务第一步就是重构把层大小和层数参数化。可以定义一个 Layer 类每一层保存自己的权重和偏置并提供 forward 和 backward 方法。网络类负责存储层列表、组合前向传播、反向传播和更新。这样以后切换任务时只需要改配置参数不需要改网络逻辑。这个重构过程听起来简单但能帮你理清层与层之间的接口设计。6.2 从 XOR 升级到手写数字识别解决了 XOR 问题之后你可能会觉得“就这”。下一个很自然的实验是手写数字识别。当然这次不用真实的 MNIST 数据集你可以在 Canvas 上自己画一个数字把它缩放成 8 乘 8 的灰度图作为网络输入输出 10 个节点分别代表 0 到 9 的概率。这个实验难度比 XOR 大不少但网络结构基本还是一样的只是输入维度变成 64输出维度变成 10。你需要处理的额外问题是输出层的维度变大了损失函数最好从 MSE 换成交叉熵激活函数建议输出层用 softmax训练数据需要更多至少准备几百个手写样本才能看到效果。从 2 维度输入到 64 维度输入这个跳跃是质变但代码结构不需要太大改动。这正好说明你在 JavaScript 里实现的这个小网络已经具备了向真实应用迈进的基本骨架。6.3 在浏览器里实现一次前向推断的部署应用训练完成后把网络权重导出成 JSON保存下来。以后打开同一个页面不需要重新训练直接加载权重做预测。这样的部署方式在浏览器环境非常方便你可以用它做一个交互式 Demo用户输入两个值页面立即显示网络输出。我试过把训练好的权重序列化成数组存到本地再新建一个页面加载这些权重只需要写一个 forward 函数和加载权重的函数就能完成推理。许多浏览器端的轻量级应用都是这样做的训练在自己的开发机完成推理跑到用户的浏览器里。提醒导出权重时建议顺便记录网络结构参数比如每层节点数、激活函数类型否则反序列化的时候不知道权重怎么分组。一个带 config 的权重文件远比一堆裸数组要好用得多。7. 最后分享几条被反复验证的实战经验写到这里这篇系列第二篇的主要内容差不多讲完了。我回头再看自己做过的这些实验有几个经验特别想单独拿出来强调一下。第一动手实现神经网络之前一定要自己手动推一次反向传播。哪怕只看一个单神经元的例子把链式法则在纸上从头到尾展开一遍你就理解为什么反向传播里会有那么多转置操作以及梯度为什么能逐层回传。跳过这一步的人写出来的反向传播大概率是“照葫芦画瓢”遇到 Bug 根本无法排查。第二每次修改网络结构或参数后最好重新做一次梯度检查。不要觉得自己上次已经验证过了就跳过这个步骤。改动网络时很容易不小心把梯度计算路径弄断比如忘记乘以激活函数导数或者更新参数时符号用错。梯度检查能快速定位这类问题成本远低于肉眼盯代码。第三可视化不是锦上添花而是调试工具。决策边界图能直接告诉你网络在“思考”什么它学到的分类规则是符合直觉的还是走了极端。我在调试自己的网络时经常看边界图就发现某些区域出现不合理的孤岛然后回查数据发现训练样本分布不均。如果你耐心地把这一篇里的代码全部敲完并且真正跑通了那么恭喜你你已经不是那个只会调用框架 API 的“调包侠”了。你亲手构建了一个从数学到代码、从训练到可视化的完整闭环这种对底层机制的理解会伴随你后续学习卷积神经网络、循环神经网络的全过程。下一篇我计划讲卷积神经网络重点是怎么用 Canvas 手动实现卷积操作和池化操作再结合一个图片分类的小项目做实战。毕竟“黑客式学习”的精髓就是一路拆过去把黑盒变成白盒。到时候见。 
长河君 · 2026/10/26 4:28:07 · 阅读 1.2k 用JavaScript实现神经网络：从XOR到可视化实战
近几年时常有人在后台问我深度学习不是 Python 的天下吗你用 JavaScript 折腾神经网络是不是有点“伪黑客”的意思其实我第一次听到这类质疑是完全可以理解的毕竟主流教程清一色是 PyTorch、TensorFlow 和 Jupyter Notebook。但我自己走完一遍之后反而觉得JavaScript 才是最适合“黑客式学习”的载体。你不需要配环境、不需要买显卡、不需要等模型训练完才能看到结果打开浏览器写几行代码神经网络的内部行为就直接摆在眼前。这篇是系列的第二篇也可以说是整个“黑客入门”路线里最硬核的一篇。第一篇把 JavaScript 能做深度学习的来龙去脉和基础环境讲清楚了这一篇就直奔主题如何从零实现前向传播和反向传播如何用 Canvas 把训练过程可视化以及我在实际写代码时踩过的一堆细节坑。如果你已经对神经网络只有“听说过”的程度那这篇正好带你把它拆开、看透、再徒手装回去。1. 为什么要在 JavaScript 里跑神经网络1.1 抛开环境依赖深度学习才能回归本质我在带朋友入门深度学习时最痛苦的一件事就是环境安装。很多人刚开始学就被 Python 版本、显卡驱动、CUDA 版本、虚拟环境之间的各种组合问题劝退了。明明几十行代码就能讲清楚的东西愣是卡在“import torch 报错”这种完全无关的环节上。JavaScript 就不一样。几乎所有人的电脑上都装了浏览器你说“打开开发者工具直接跑神经网络”这句话对任何一台电脑都成立。不需要安装任何东西不需要配置任何东西把代码粘贴进控制台立刻就能看到结果。这种“零启动成本”对理解神经网络这种本身就很抽象的概念来说太重要了。再者浏览器本身就是一块天然的可视化画布。Python 侧要用 Matplotlib 画训练曲线要处理中文字体、显示窗口、保存图片麻烦得很。而在浏览器里Canvas 和 DOM 就是现成的可视化工具训练的同时就能画出损失曲线、决策边界、权重变化神经网络内部的每一个变化都肉眼可见。1.2 JavaScript 深度学习的真正优势在哪里很多人觉得 JavaScript 跑深度学习性能不行这句话对也不对。如果你是跑大规模模型、几亿参数那种JavaScript 确实不如 C 和 CUDA。但做学习、做原型验证、做中小规模的交互式应用JavaScript 有自己的独门优势数据隐私场景。图片、麦克风录音、用户行为数据都可以在浏览器本地完成推理不需要把数据上传到服务器。比如你写一个人脸关键点检测的页面用户的照片从头到尾不出本地这个价值在隐私意识越来越强的今天非常关键。跨平台成本极低。写一次网络结构Windows 电脑能跑、MacBook 能跑、iPad 也能跑甚至手机浏览器都能打开。你做完一个小 Demo发一个链接给对方就能直接体验不需要让对方装 Python 环境。未来性能并不虚。WebGPU 这几年进步很快浏览器里跑 GPU 计算已经不是新鲜事。我做矩阵乘法实验时试过 WebGPU 的加速效果虽然开发复杂度比普通 JavaScript 高一些但性能相比纯 CPU 版本已经有了质的飞跃。1.3 这个系列到底教你什么结合“黑客”这两个字来说我理解的“黑客式学习”不是教你攻击别人的系统而是培养一种刨根问底的思维模式。别人用现成的深度学习框架输入数据等结果你要做的是自己造轮子把每一层网络拆开看清楚数据是怎么流动的、梯度是怎么计算的、参数是怎么更新的。等到你亲手把代码一行行实现出来再看那些框架里的模型训练日志你会发现它们不再是一个黑盒而是一堆你能精确预测每一步行为的具体操作。这一篇的目标很明确不用任何第三方深度学习库只用原生 JavaScript 实现一个可以训练的两层神经网络让它学会解决经典的 XOR异或问题并且把所有训练过程可视化。做完这一步你就拥有了向 CNN、RNN、LSTM 这些更复杂结构进军的基础。1.4 需要的基础知识说明这篇文章面向的读者不需要太深的数学基础。矩阵加法、乘法、求导这三个概念够用就行全文会用生活化的方式重新讲一遍。JavaScript 语法方面只需要会数组操作、函数定义、for 循环就足够了。我不会在这篇文章里用任何花哨的语法特性确保每一个例子你都能直接复制运行。你需要的是一台电脑一个最新版本的 Chrome 或 Edge 浏览器一个能静下心来跟着敲代码的下午。2. 动手前必须搞懂的三个数学基础2.1 矩阵运算到底在计算什么神经网络里最频繁的操作就是矩阵乘法。你可能被各种教程里的 W、b、X 矩阵符号搞得晕头转向但说白了矩阵就是一张用行列组织起来的数字表格矩阵乘法就是按照固定规则把两张表合并成一张新表。举个例子。你有一批数据里面有三个样本每个样本有两个特征那么数据就可以表示成一个 3 行 2 列的矩阵。网络的第一层里有 4 个神经元每个神经元都要接收这 2 个特征的输入并输出一个值那么这一层的权重就可以表示成一个 2 行 4 列的矩阵。数据矩阵乘以权重矩阵得到的 3 行 4 列矩阵就是每个样本在 4 个神经元上的输出。这里的乘法规则是数据矩阵第 i 行所有元素分别与权重矩阵第 j 列所有元素对应相乘再把乘积加起来结果放在新矩阵第 i 行第 j 列。我第一遍学的时候觉得这规则很绕后来拿纸笔手动算了一个 2 乘 2 的例子就彻底明白了。对神经网络来说矩阵乘法的意义是一次性批量计算多个样本通过多个神经元的结果相当于把 for 循环的工作化简成一条张量运算。2.2 为什么 XOR 问题是非线性难题神经网络入门必做的一道题就是 XOR 异或问题。这个问题的输入只有两个数每个数是 0 或 1当两个输入不同时输出 1相同时输出 0。你可能会问这有什么难的用普通代码一个 if 判断就解决了if (a ! b) return 1; 但对神经网络来说这个问题有个难题它是线性不可分的。什么意思你把四个输入点画在坐标系里(0,0)、(0,1)、(1,0)、(1,1)其中 (0,0) 和 (1,1) 是一类(0,1) 和 (1,0) 是另一类。无论如何你都找不到一条直线把两类点分开这就是“线性不可分”。解决这个问题必须引入非线性激活函数。早期的神经网络研究被 XOR 问题卡了很久就是因为当时流行的是感知机没有非线性层连这么简单的问题都解不了。直到加入隐藏层和激活函数之后多层感知机才正式登场。所以我们在 JavaScript 里实现神经网络选择 XOR 作为测试问题不是因为别的就是为了验证网络真的学会了对非线性边界的拟合。2.3 反向传播用到的链式法则其实像“责任分摊”反向传播听起来高深核心算法就是链式法则。我用一个生活化的类比来理解假设你是一个部门主管手下有几个小组每个小组的产出最终汇总成公司总利润。月底发现利润不达标你要判断是哪个组的责任以及该调整谁的 KPI 指标。神经网络训练的过程就是这个逻辑。总误差损失函数的值是最终目标中间每一层每个权重都对总误差有“贡献”。反向传播从输出层开始按照“后一层的误差如何影响前一层参数”的顺序把总误差的“责任比例”逐层往前分摊。每个权重拿到自己的责任比例后朝减少总误差的方向调整一下数值。这个“责任比例”在数学上就是偏导数。链式法则的公式形式很简单如果一个变量 y 通过中间变量 u 依赖 x那么 y 对 x 的导数等于 y 对 u 的导数乘以 u 对 x 的导数。神经网络正好就是这样一种多层嵌套结构。你不需要记复杂的矩阵求导公式只要按从后往前的顺序把每一层的误差信号传递下去然后乘上本层输入对权重的导数就能得到该层的梯度。2.4 激活函数为什么要用 sigmoid 和它的导数激活函数是非线性的来源。我们最常用的一个入门激活函数是 sigmoid公式是 1 除以1 加 e 的 -x 次方输出范围在 0 到 1 之间。这个函数的意义是把任意大小的实数压缩到 0 到 1 区间恰好像一个“概率”输出。sigmoid 之所以在入门教程里高频出现除了历史悠久之外还因为它的导数公式极其优雅导数等于输出乘以1 减去输出。也就是说你只要保存了前向传播时这个神经元的输出值反向后向传播时直接用这个输出算导数连复杂的除法指数运算都不用重新算一遍。当然 sigmoid 有缺点它容易饱和输入绝对值很大时梯度会趋近于零导致深层网络训练困难。这个坑我在后面会详细讲。初学者第一次用 sigmoid 时会觉得很神奇为什么反向传播里那个数值正好就是输出乘1 减输出等你动手推导一次就会发现这一切都是链式法则的自然结果并不神秘。3. 从零实现前向传播和反向传播3.1 用二维数组实现一个极简矩阵库在动手写神经网络之前我们先实现一个微型矩阵库。不追求性能只求逻辑清晰。我这里用二维数组来代表矩阵提供初始化、转置、乘法和逐元素运算几个基础函数。// 生成一个 rows 行 cols 列的矩阵初始化为随机小值 function createMatrix(rows, cols) { const m []; for (let i 0; i rows; i) { m.push([]); for (let j 0; j cols; j) { m[i].push((Math.random() - 0.5) * 0.5); } } return m; } // 矩阵乘法a 是 m x nb 是 n x p结果是 m x p function matMul(a, b) { const m a.length; const n a[0].length; const p b[0].length; const res []; for (let i 0; i m; i) { res.push([]); for (let j 0; j p; j) { let sum 0; for (let k 0; k n; k) { sum a[i][k] * b[k][j]; } res[i].push(sum); } } return res; } // 将一维数组转为列向量矩阵方便和权重矩阵相乘 function toColumnVector(arr) { return arr.map((v) [v]); }提示这几段代码是后面所有内容的地基建议现在就在浏览器控制台里跑一遍确认矩阵乘法的形状符合预期。这里有个初学者容易混的点矩阵乘法对两个矩阵的维度有严格匹配要求。左矩阵的列数必须等于右矩阵的行数否则无法相乘。神经网络里常见的维度是输入矩阵形状是【样本数输入维度】权重矩阵形状是【输入维度隐藏层节点数】两者相乘得到【样本数隐藏层节点数】。时刻盯着形状看能少踩很多坑。3.2 定义一个只有一层隐藏层的小网络我们设计一个非常经典的网络结构输入层 2 个节点隐藏层 4 个节点输出层 1 个节点。隐藏层用 sigmoid 激活输出层也用一个 sigmoid因为我们解决的是二分类问题希望输出落在 0 到 1 之间。用“黑客躬身入局”的方式不依赖任何现成框架从数据结构开始定义网络的权重和偏置。class NeuralNet { constructor() { // 输入层 2 - 隐藏层 4 this.W1 createMatrix(2, 4); this.b1 createMatrix(1, 4); // 隐藏层 4 - 输出层 1 this.W2 createMatrix(4, 1); this.b2 createMatrix(1, 1); } }初始化的权重范围我会控制在 -0.25 到 0.25 之间而不是直接用 0 到 1。原因是后面激活函数是 sigmoid如果初始权重太大输入到 sigmoid 的加权值就会很大导致输出接近 1梯度接近 0网络一上来就进入饱和区训练几乎不动。这种初始化细节看起来不起眼但对训练能否成功影响极大。3.3 前向传播输入数据如何一层层流动到输出前向传播是神经网络在推理时做的事输入特征经过加权求和、加偏置、激活逐层传递最后得到输出。用代码表达就是模拟矩阵乘法和激活函数的组合。sigmoid(x) { return 1 / (1 Math.exp(-x)); } sigmoidDerivative(output) { return output * (1 - output); } forward(X) { // X 是 1x2 的输入向量 this.z1 matMul(toColumnVector(X), this.W1); // 1x4 this.z1[0][0] this.b1[0][0]; this.z1[0][1] this.b1[0][1]; this.z1[0][2] this.b1[0][2]; this.z1[0][3] this.b1[0][3]; this.a1 this.z1.map((row) row.map((v) this.sigmoid(v))); // 激活 this.z2 matMul(this.a1, this.W2); // 1x1 this.z2[0][0] this.b2[0][0]; this.a2 this.z2.map((row) row.map((v) this.sigmoid(v))); return this.a2[0][0]; }这段代码是网络的心脏。为了可读性我把偏置的加法直接写在数组索引上实际项目里可以用循环来优化。每个中间值我都用 this 存下来了因为反向传播时这些值全部要重新用到。如果你在实现时图省事没有缓存 z1、a1、z2那反向传播的时候只能重算麻烦不说还容易把数值弄混。3.4 损失函数拿什么标准判断网络犯了多少错定义一个损失函数用来衡量网络的输出和真实标签的差距。这里用最简单的均方误差MSE。公式是预测值和真实值差的平方的平均值。打个比方这就像学生考试每道题的分差就是误差把所有分差平方再平均就是这次考试的“总体失误程度”。computeLoss(pred, target) { const diff pred - target; return diff * diff; }MSE 的好处是处处可导梯度计算方便而且对大的误差会给予更大的惩罚因为平方放大了距离。比如预测 0.9 与真实 0 的误差平方是 0.81而预测 0.6 与真实 0 的误差平方只有 0.36前者被惩罚得更重。这符合“大错重罚”的直觉。不过 MSE 有一个问题配合 sigmoid 输出层时网络在输出接近 0 或 1 的区域sigmoid 导数会变得很小MSE 梯度也会跟着变得很小学习速度会变慢。业界更常用交叉熵损失来配合 sigmoid 输出。但这里选择 MSE 是为了演示方便梯度推导简单并不影响对反向传播机制的理解。3.5 反向传播逐一计算每个参数的梯度反向传播是整个神经网络最核心也是新手最想放弃的部分。别怕这里把公式拆开一步步走。我们的网络结构只有两层反向传播也只需要计算两个权重矩阵的梯度dW2、db2、dW1、db1。先从输出层开始。输出层误差对 z2 的偏导等于损失对 a2 的偏导乘以 a2 对 z2 的偏导。MSE 对预测 a2 的偏导是 2 乘以a2 减 targetsigmoid 对 z2 的偏导是 a2 乘以1 减 a2。两者相乘得到 delta2。接着delta2 通过 W2 传播回隐藏层。隐藏层的误差信号 delta1 等于 delta2 乘以 W2 转置再乘以 a1 对 z1 的导数。这样每个权重的梯度就都有了W2 的梯度 a1 的转置乘以 delta2b2 的梯度 delta2W1 的梯度 输入 X 的转置乘以 delta1b1 的梯度 delta1代码实现如下backward(X, target, output) { // 输出层误差信号 const delta2 (output - target) * this.sigmoidDerivative(this.a2[0][0]); this.dW2 this.a1.map((row) row.map((v) v * delta2)); this.db2 [[delta2]]; // 计算隐藏层误差信号 const delta1ForEachNeuron []; for (let j 0; j 4; j) { const error this.W2[j][0] * delta2 * this.sigmoidDerivative(this.a1[0][j]); delta1ForEachNeuron.push(error); } this.dW1 [[0, 0, 0, 0], [0, 0, 0, 0]]; // 输入 X 长度为 2 for (let i 0; i 2; i) { for (let j 0; j 4; j) { this.dW1[i][j] X[i] * delta1ForEachNeuron[j]; } } this.db1 [delta1ForEachNeuron]; }如果你第一次接触这段代码我必须提醒你这里最考验的其实是“形状”意识。每个矩阵的行列数都要对齐转置该出现在哪里就出现在哪里写错了梯度方向就反了。我一开始也常写反最后是靠梯度检查法抓出来的这个技巧在后面的章节会详细讲。3.6 梯度下降更新参数永远朝下山的方向挪一步算完梯度之后参数的更新就非常简单了。梯度告诉我们的是如果把这个参数增大一点点损失会增大还是减小。我们需要朝损失减小的方向走所以用参数减去学习率乘以梯度。update(lr) { for (let i 0; i 2; i) { for (let j 0; j 4; j) { this.W1[i][j] - lr * this.dW1[i][j]; } } for (let j 0; j 4; j) { this.b1[0][j] - lr * this.db1[0][j]; } for (let i 0; i 4; i) { this.W2[i][0] - lr * this.dW2[i][0]; } this.b2[0][0] - lr * this.db2[0][0]; }学习率的含义是每次更新迈多大的步子。步子太小训练慢步子太大越过最低点甚至发散。后面我会专门实测不同学习率的效果你就能直观看到这个参数的敏感性。现在把 forward、backward、update 串起来就可以开始训练循环了。每次迭代里我们随机取一个训练样本前向传播算输出反向传播算梯度更新参数。这种每次只用一个样本的更新方式叫随机梯度下降虽然会有波动但简单有效。3.7 完整训练循环让网络自己学会 XOR 的规则const net new NeuralNet(); const trainingData [ { input: [0, 0], target: 0 }, { input: [0, 1], target: 1 }, { input: [1, 0], target: 1 }, { input: [1, 1], target: 0 } ]; const lr 0.7; for (let epoch 0; epoch 20000; epoch) { const sample trainingData[Math.floor(Math.random() * 4)]; const pred net.forward(sample.input); net.backward(sample.input, sample.target, pred); net.update(lr); if (epoch % 2000 0) { let totalLoss 0; for (const d of trainingData) { totalLoss net.computeLoss(net.forward(d.input), d.target); } console.log(epoch ${epoch}, loss: ${(totalLoss / 4).toFixed(6)}); } }跑完这段代码你应该能在控制台看到损失逐渐下降最后接近 0.001 甚至更低的程度。用四个样本重新前向传播一次预测值会明显靠近 0 或 1。注意如果你初始化的权重是零矩阵或者学习率太大这个训练过程根本不会收敛。后面排查问题的部分会提到这些情况。4. 用 Canvas 把训练过程可视化4.1 为什么可视化比打印损失更重要控制台里打印的 loss 数字只能告诉你“网络在变好”但你不能直观看到它是怎么变好的。用 Canvas 画出来很多东西就一目了然了。比如训练初期决策边界是什么形状后期如何逐步扭曲最终形成 XOR 的分类区域。这种视觉反馈对建立直觉非常有价值尤其适合入门者。浏览器做可视化有着天然优势。Canvas 本身就是 HTML5 标准你不需要安装任何图形库直接在网页上画点、画线、填充颜色就可以。这正好也是我推荐用 JavaScript 学深度学习的第二个理由可视化和训练在同一个运行时里没有数据搬运的隔阂。4.2 损失曲线的实时绘制代码下面在页面上加一个 canvas 元素宽度为 600高度为 300横轴是迭代次数纵轴是损失值。每训练若干个 epoch就画一个点。为了让曲线平滑可以对损失做滑动平均。canvas idlossChart width600 height300/canvasconst canvas document.getElementById(lossChart); const ctx canvas.getContext(2d); ctx.fillStyle #fff; ctx.fillRect(0, 0, 600, 300); function drawLossPoint(epoch, loss) { const x (epoch / 20000) * 600; const y 300 - Math.min(loss, 1) * 280; ctx.fillStyle #1a73e8; ctx.beginPath(); ctx.arc(x, y, 2, 0, Math.PI * 2); ctx.fill(); }把 drawLossPoint 放进训练循环里每 20 个 epoch 调用一次。随着训练推进你会看到蓝色的点逐渐聚集成一条下降的曲线。如果损失下降得很慢或者忽高忽低你能立刻从曲线上看出来而不是只靠数字猜。4.3 决策边界绘制的核心思路决策边界的绘制其实是拿训练好的网络当“评分器”对二维平面上的每个点做预测然后按预测结果着色。XOR 问题只有两个输入特征正好可以映射到 canvas 的二维坐标。把画布坐标映射到输入空间比如画布 400 乘 400对应输入从 0 到 1 的区域。遍历画布上每个像素归一化为输入值送入网络预测根据输出值决定颜色。这样画出来的图会清晰地显示出网络学到的分类边界。function drawDecisionBoundary(net) { const size 400; const imageData ctx.createImageData(size, size); for (let y 0; y size; y) { for (let x 0; x size; x) { const xInput x / size; const yInput 1 - y / size; const pred net.forward([xInput, yInput]); const intensity Math.round(pred * 255); const pixelIndex (y * size x) * 4; imageData.data[pixelIndex] intensity; imageData.data[pixelIndex 1] intensity; imageData.data[pixelIndex 2] 255 - intensity; imageData.data[pixelIndex 3] 255; } } ctx.putImageData(imageData, 0, 0); }我第一次跑出这个图时能明显看到训练初期边界非常混乱随着迭代次数增多边界逐渐分裂成几块最终形成两两对角的分类区域。那种从混沌到清晰的过程比任何教材里的公式都更让人震撼。4.4 使用 requestAnimationFrame 避免页面卡死训练循环如果用 for 循环一次性跑几万次浏览器会在循环结束前一直处于假死状态渲染出来的动画只会闪一下看不到过程。解决办法是把训练循环拆分成多个小片段用 requestAnimationFrame 每次只跑一定数量的迭代。let epoch 0; function trainOneBatch() { for (let step 0; step 10; step) { const sample trainingData[Math.floor(Math.random() * 4)]; const pred net.forward(sample.input); net.backward(sample.input, sample.target, pred); net.update(lr); epoch; } if (epoch % 50 0) { drawLossPoint(epoch, currentLoss()); drawDecisionBoundary(net); } if (epoch 20000) { requestAnimationFrame(trainOneBatch); } } requestAnimationFrame(trainOneBatch);这段代码的收益是立竿见影的。页面保持流畅动画实时刷新你能看到决策边界一点点演变。对于正在学习神经网络的人来说这比看任何静态图都有效得多。4.5 我实测的损失曲线和边界变化记录我在本地跑过的结果大概是这样初始阶段训练 2000 次左右损失从 0.25 降到 0.1决策边界还是接近一条直线到 5000 次损失降到 0.03边界出现弯曲到 12000 次之后损失降到 0.005 以下边界已经分成左右两个区域最终完全拟合了 XOR 的四个点。这里提一个很有意思的观察如果用学习率 0.1训练速度明显变慢跑满 20000 次损失还在 0.05 左右如果用学习率 2.0损失曲线会剧烈震荡有时甚至升到 0.8 以上。这说明学习率不是一个可以随意取值的超参数它对训练结果的稳定性影响极大。下一篇我会专门聊怎么调学习率。5. 那些坑了我一整晚的细节 Bug5.1 损失不降反升先怀疑学习率太大初学者遇到损失不降第一反应往往是改网络结构或者换激活函数但实际上最常犯的错误是学习率设置不当。学习率太大时参数更新会跳过最优区域导致损失值不降反升或者维持在很高的水平反复震荡。我个人的排查流程是先把学习率降到 0.1观察损失是否稳定下降然后慢慢调大找到震荡前的临界值。如果你发现损失曲线像心跳一样上下跳动那八成是学习率太高了。在实际项目中更稳妥的做法是使用学习率衰减或自适应优化器但入门阶段手动调一次学习率能让你对梯度下降的本质有更深的理解。5.2 所有预测都接近 0.5检查权重初始化如果你发现网络训练了很久输出始终在 0.5 附近徘徊有可能是因为权重初始化成了全零或全部相同。全零初始化会让同一层的所有神经元接收到完全相同的梯度无论怎么训练它们的参数都保持一致最终整个隐藏层退化成一个神经元无法学到不同的特征。我在实现中使用的初始化范围是负 0.25 到正 0.25 的随机数。这个范围对 XOR 这种小网络足够用对更深的网络可以用 Xavier 初始化或 He 初始化它们会根据神经元数量自动调整初始化的方差。5.3 矩阵形状不匹配的黄金排查法实现神经网络时最常见的报错就是矩阵乘法维度不匹配。比如你输入一个形状是 3 行 2 列的矩阵想乘一个形状是 3 行 4 列的权重矩阵就会直接报错。浏览器控制台会给出“无法执行乘法”之类的提示但本质上就是行和列没有对齐。我的排查方法是每计算完一步就在控制台打一行日志打印当前矩阵的形状。宁可多打几行日志也不要凭空猜测。尤其做反向传播时转置操作非常容易出错时刻问自己一个问题这两个矩阵相乘结果的形状应该是什么如果结果形状和预期不一致一定在某个步骤里用错了转置。5.4 sigmoid 饱和导致梯度消失初学阶段用了 sigmoid训练深度网络时一旦层数加深就会发现浅层权重几乎不更新。原因是 sigmoid 在输入绝对值大的时候导数趋近于零。误差信号每向后传播一层就要乘一次 sigmoid 导数连续乘几次之后梯度就变成极小的数字深层参数自然收不到更新信号。我在两层小网络里这个问题还不明显但当你以后扩展到更多层时就会深刻体会到梯度消失的威力。解决办法有很多最常用的是把激活函数换成 ReLU或者用批归一化。不过入门阶段我建议还是先用 sigmoid 亲身体会一下这个问题这样你对“为什么深度学习框架都偏爱 ReLU”会有刻骨铭心的理解。5.5 梯度检查验证反向传播写没写对的终极武器反向传播代码写完了你如何确定梯度算得对有一个非常经典的标准方法数值梯度检查。原理是直接用导数的定义给参数加一个小量 epsilon计算损失的变化量再除以 epsilon得到一个近似梯度值把这个值与你的反向传播梯度对比如果两者相差很小就说明反向传播代码逻辑正确。function numericalGradient(net, X, target, paramName) { const eps 1e-6; const original net[paramName][0][0]; net[paramName][0][0] original eps; const lossPlus net.computeLoss(net.forward(X), target); net[paramName][0][0] original - eps; const lossMinus net.computeLoss(net.forward(X), target); net[paramName][0][0] original; return (lossPlus - lossMinus) / (2 * eps); }梯度检查是“黑客式”学习中我最推荐的一个步骤。它会逼着你真正理解梯度方向的含义而不是停留在“把这几个公式背下来”的层面。如果你跑完数值梯度检查和反向传播梯度发现两者误差小于 1e-5那就可以自信地说我的反向传播写对了。5.6 浏览器卡死与日志轰炸的处理技巧训练循环里如果用 console.log 打印每一次迭代的损失控制台会被海量日志刷到卡顿整个页面交互都会变慢。这看起来是小事但实际开发时很影响效率。我习惯的做法是只在固定间隔打印或者用一个数组记录最近若干次损失训练结束后统一绘制。如果训练循环真的把进程卡住了可以在 console 里按一下“重新加载页面”或者先把训练轮次调小比如改成 1000 次确认代码逻辑没问题后再加到 20000 次。逐步加大规模而不是一上来就跑满这种调试思路在 JavaScript 环境里尤其好用因为浏览器对长耗时脚本的容忍度很低。6. 从 XOR 迈向真实应用的三个扩展方向6.1 把网络封装成可复用的类你已经有了一个能解决 XOR 的网络但它还写得很死输入层 2 个、隐藏层 4 个、输出层 1 个都是写死的值。如果要复用到别的任务第一步就是重构把层大小和层数参数化。可以定义一个 Layer 类每一层保存自己的权重和偏置并提供 forward 和 backward 方法。网络类负责存储层列表、组合前向传播、反向传播和更新。这样以后切换任务时只需要改配置参数不需要改网络逻辑。这个重构过程听起来简单但能帮你理清层与层之间的接口设计。6.2 从 XOR 升级到手写数字识别解决了 XOR 问题之后你可能会觉得“就这”。下一个很自然的实验是手写数字识别。当然这次不用真实的 MNIST 数据集你可以在 Canvas 上自己画一个数字把它缩放成 8 乘 8 的灰度图作为网络输入输出 10 个节点分别代表 0 到 9 的概率。这个实验难度比 XOR 大不少但网络结构基本还是一样的只是输入维度变成 64输出维度变成 10。你需要处理的额外问题是输出层的维度变大了损失函数最好从 MSE 换成交叉熵激活函数建议输出层用 softmax训练数据需要更多至少准备几百个手写样本才能看到效果。从 2 维度输入到 64 维度输入这个跳跃是质变但代码结构不需要太大改动。这正好说明你在 JavaScript 里实现的这个小网络已经具备了向真实应用迈进的基本骨架。6.3 在浏览器里实现一次前向推断的部署应用训练完成后把网络权重导出成 JSON保存下来。以后打开同一个页面不需要重新训练直接加载权重做预测。这样的部署方式在浏览器环境非常方便你可以用它做一个交互式 Demo用户输入两个值页面立即显示网络输出。我试过把训练好的权重序列化成数组存到本地再新建一个页面加载这些权重只需要写一个 forward 函数和加载权重的函数就能完成推理。许多浏览器端的轻量级应用都是这样做的训练在自己的开发机完成推理跑到用户的浏览器里。提醒导出权重时建议顺便记录网络结构参数比如每层节点数、激活函数类型否则反序列化的时候不知道权重怎么分组。一个带 config 的权重文件远比一堆裸数组要好用得多。7. 最后分享几条被反复验证的实战经验写到这里这篇系列第二篇的主要内容差不多讲完了。我回头再看自己做过的这些实验有几个经验特别想单独拿出来强调一下。第一动手实现神经网络之前一定要自己手动推一次反向传播。哪怕只看一个单神经元的例子把链式法则在纸上从头到尾展开一遍你就理解为什么反向传播里会有那么多转置操作以及梯度为什么能逐层回传。跳过这一步的人写出来的反向传播大概率是“照葫芦画瓢”遇到 Bug 根本无法排查。第二每次修改网络结构或参数后最好重新做一次梯度检查。不要觉得自己上次已经验证过了就跳过这个步骤。改动网络时很容易不小心把梯度计算路径弄断比如忘记乘以激活函数导数或者更新参数时符号用错。梯度检查能快速定位这类问题成本远低于肉眼盯代码。第三可视化不是锦上添花而是调试工具。决策边界图能直接告诉你网络在“思考”什么它学到的分类规则是符合直觉的还是走了极端。我在调试自己的网络时经常看边界图就发现某些区域出现不合理的孤岛然后回查数据发现训练样本分布不均。如果你耐心地把这一篇里的代码全部敲完并且真正跑通了那么恭喜你你已经不是那个只会调用框架 API 的“调包侠”了。你亲手构建了一个从数学到代码、从训练到可视化的完整闭环这种对底层机制的理解会伴随你后续学习卷积神经网络、循环神经网络的全过程。下一篇我计划讲卷积神经网络重点是怎么用 Canvas 手动实现卷积操作和池化操作再结合一个图片分类的小项目做实战。毕竟“黑客式学习”的精髓就是一路拆过去把黑盒变成白盒。到时候见。