前端加密技术实战经验与常见问题解决方案

Mr.国凤发布于 2026-03-25 08:02:35 安全阅读 1,398

原创

本文链接：https://www.jztheme.com/blog/safety/39211.html

Mr.国凤

赞 15 收藏反馈

优化前：卡得不行

最近做的一个项目里，涉及到前端加密的场景。用户登录、表单提交这些操作都得用到加密算法，主要是AES和RSA。一开始没太在意性能问题，直接套了个开源库就上线了。结果上线后发现问题大了——页面加载时卡得受不了，尤其是低配手机上，加密操作能拖慢整个页面好几秒。

最夸张的一次，用户点击登录按钮后居然要等5秒钟才跳转！这谁受得了？我赶紧去定位问题，看看到底是哪儿出了毛病。

找到瓶颈了！

第一步当然是先确认问题到底出在哪。我用了Chrome DevTools的Performance工具跑了一波分析，发现加密相关的代码占了主线程执行时间的大头。具体来说：

AES加密操作在主线程里耗时接近300ms
RSA密钥生成和加密更是夸张，平均要1.5秒左右

试想一下，这种耗时的操作直接阻塞了UI线程，难怪页面会卡成那样。

我还试了几种方案来测试不同库的性能，比如crypto-js、jsencrypt这些常用的库，但效果都不理想。最后还是决定自己动手优化。

优化思路：别在主线程瞎折腾

其实问题的核心很简单：加密操作太重了，不能放在主线程里干。所以我的优化方向就是：把加密任务放到Web Worker里跑。

另外，还发现了一个坑：密钥生成的频率太高了。每次加密都重新生成一次密钥，这完全是浪费资源。于是又加了一个缓存策略，把密钥复用起来。

核心代码：从阻塞到异步

下面是我优化前后的代码对比，你可以看看区别有多大。

优化前（阻塞主线程）：

// 使用crypto-js进行AES加密
import CryptoJS from 'crypto-js';

function encryptData(data, key) {
  const encrypted = CryptoJS.AES.encrypt(data, key).toString();
  return encrypted;
}

// 在主线程调用加密
const data = "sensitive_user_data";
const key = "my_secret_key";
const encryptedData = encryptData(data, key);
console.log(encryptedData); // 这里会阻塞主线程

优化后（使用Web Worker）：

// worker.js 文件
import CryptoJS from 'crypto-js';

self.onmessage = function (e) {
  const { data, key } = e.data;
  const encrypted = CryptoJS.AES.encrypt(data, key).toString();
  self.postMessage(encrypted);
};

// 主线程代码
const worker = new Worker(new URL('./worker.js', import.meta.url));

function encryptDataAsync(data, key) {
  return new Promise((resolve) => {
    worker.postMessage({ data, key });
    worker.onmessage = (e) => resolve(e.data);
  });
}

// 异步调用加密
(async () => {
  const data = "sensitive_user_data";
  const key = "my_secret_key";
  const encryptedData = await encryptDataAsync(data, key);
  console.log(encryptedData); // 不再阻塞主线程
})();

这段代码的核心改动是把加密逻辑移到了Web Worker里，通过postMessage和onmessage实现主线程和Worker之间的通信。这样，加密操作就不会阻塞UI线程了。

密钥缓存：别每次都重新生成

除了异步化，我还对密钥生成做了一些优化。之前每次加密都会重新生成一次密钥，这其实是没必要的。我们完全可以在第一次生成密钥后，把它缓存下来，后续复用。

下面是密钥缓存的代码示例：

let cachedKey = null;

function generateKey() {
  if (cachedKey) {
    return cachedKey;
  }
  // 模拟密钥生成逻辑
  cachedKey = generated_key_${Date.now()};
  return cachedKey;
}

// 使用缓存的密钥
const key = generateKey();
console.log(key);

这个小改动虽然看起来简单，但在实际项目中效果非常明显，尤其是在需要频繁加密的场景下。