JavaScript 字符串的压缩与解压：从原理到实战

在日常前端开发中，我们经常需要在客户端存储或传输大量文本数据。你有没有遇到过这样的场景：

想把一段很长的 JSON 数据存到 localStorage，结果抛出了 QuotaExceededError？
需要通过 URL 参数传递一大段配置信息，结果 URL 长得离谱？
想在 WebSocket 通信中减少传输的数据量？

这时，字符串压缩就成了一个非常实用的技术手段。本文将从原理出发，带你一步步了解 JavaScript 中字符串压缩的各种方案。

1. 为什么需要字符串压缩？

1.1 localStorage 的 5MB 限制

大多数浏览器对 localStorage 的存储上限约为 5MB（实际因浏览器而异）。当你需要缓存大量结构化数据时，5MB 可能很快就用完了。

// 假设有这样的数据
const bigData = {
  records: Array.from({ length: 10000 }, (_, i) => ({
    id: i,
    name: `item_${i}_description`,
    status: i % 2 === 0 ? 'active' : 'inactive',
  })),
};

const json = JSON.stringify(bigData);
// json.length ≈ 480KB，看起来还好
// 但如果 records 增加到 100000 条呢？→ 约 4.8MB，接近临界值！
<link rel="stylesheet" href="/assets/css/code-blocks.css?v=20261019_04">

1.2 URL 长度限制

URL 的长度限制通常在 2000 个字符左右（各浏览器不同）。当你需要把复杂状态编码到 URL 参数中时，压缩就是救命稻草。

1.3 网络传输优化

在移动端或弱网环境下，减少传输字节数直接意味着更快的加载速度和更低的流量消耗。

2. 压缩算法概览

算法	压缩率	速度	浏览器支持	适用场景
RLE（行程编码）	低	极快	原生实现	大量重复字符
LZW	中	快	需自实现或库	通用文本
Huffman 编码	中-高	中	需自实现	已知频率分布
Deflate / Gzip	高	中	CompressionStream API	通用压缩
Brotli	最高	慢	CompressionStream API	静态资源

3. RLE 行程编码（Run-Length Encoding）

RLE 是最简单的压缩算法：将连续重复的字符替换为「字符 + 重复次数」。

3.1 实现

function rleEncode(str) {
  let result = '';
  let count = 1;

  for (let i = 0; i < str.length; i++) {
    if (str[i] === str[i + 1]) {
      count++;
    } else {
      result += str[i] + count;
      count = 1;
    }
  }

  return result;
}

function rleDecode(str) {
  let result = '';

  for (let i = 0; i < str.length; i += 2) {
    const char = str[i];
    const count = parseInt(str[i + 1], 10);
    result += char.repeat(count);
  }

  return result;
}

// 示例
const input = 'AAAAABBBCCCCCCDD';
const encoded = rleEncode(input);
console.log(encoded); // "A5B3C6D2"
console.log(rleDecode(encoded)); // "AAAAABBBCCCCCCDD"

3.2 局限性

RLE 只对大量连续重复字符有效。对于普通文本（如 JSON），压缩率极低，甚至可能越压越大。

原始: "hello world" (11 字节)
RLE:  "h1e1l2o1 1w1o1r1l1d1" (22 字节) ← 反而翻倍了！

4. LZW 压缩算法

LZW 是 GIF 图片格式使用的压缩算法，适合文本压缩，原理是构建一个动态字典。

4.1 实现

function lzwEncode(s) {
  const dict = {};
  const data = (s + '').split('');
  const out = [];
  let currChar;
  let phrase = data[0];
  let code = 256;

  for (let i = 1; i < data.length; i++) {
    currChar = data[i];
    if (dict[phrase + currChar] != null) {
      phrase += currChar;
    } else {
      out.push(phrase.length > 1 ? dict[phrase] : phrase.charCodeAt(0));
      dict[phrase + currChar] = code;
      code++;
      phrase = currChar;
    }
  }

  out.push(phrase.length > 1 ? dict[phrase] : phrase.charCodeAt(0));

  // 将编码结果转为可存储的字符串
  return out.map(code => String.fromCharCode(code)).join('');
}

function lzwDecode(s) {
  const dict = {};
  const data = (s + '').split('');
  let currChar = data[0];
  let oldPhrase = currChar;
  const out = [currChar];
  let code = 256;
  let phrase;

  for (let i = 1; i < data.length; i++) {
    const currCode = data[i].charCodeAt(0);
    if (currCode < 256) {
      phrase = data[i];
    } else {
      phrase = dict[currCode] ? dict[currCode] : oldPhrase + currChar;
    }
    out.push(phrase);
    currChar = phrase.charAt(0);
    dict[code] = oldPhrase + currChar;
    code++;
    oldPhrase = phrase;
  }

  return out.join('');
}

4.2 性能评估

const testStr = 'TOBEORNOTTOBEORTOBEORNOT'.repeat(100);
const compressed = lzwEncode(testStr);
const ratio = ((1 - compressed.length / testStr.length) * 100).toFixed(1);

console.log(`原始大小: ${testStr.length} 字符`);
console.log(`压缩后: ${compressed.length} 字符`);
console.log(`压缩率: ${ratio}%`);
// 输出示例：原始大小: 2400 字符，压缩后: 985 字符，压缩率: 59.0%

LZW 对英文文本效果好，但对中文文本因为字符码点超过 256，需要调整字典初始化策略。

5. Base64 + pako（Gzip 方案）

这是最实用的浏览器端压缩方案：使用 pako 库实现 Gzip 压缩，再将二进制结果编码为 Base64。

5.1 安装 pako

npm install pako

5.2 完整示例

import pako from 'pako';

/**
 * 压缩字符串
 * @param {string} str - 原始字符串
 * @returns {string} - Base64 编码的压缩结果
 */
function compress(str) {
  // 将字符串转为 Uint8Array
  const input = new TextEncoder().encode(str);
  // 使用 gzip 压缩
  const compressed = pako.gzip(input);
  // 转为 Base64 字符串
  return btoa(String.fromCharCode(...compressed));
}

/**
 * 解压字符串
 * @param {string} base64Str - Base64 编码的压缩结果
 * @returns {string} - 原始字符串
 */
function decompress(base64Str) {
  // Base64 → 二进制字符串 → Uint8Array
  const binaryStr = atob(base64Str);
  const bytes = Uint8Array.from(binaryStr, c => c.charCodeAt(0));
  // gzip 解压
  const decompressed = pako.ungzip(bytes);
  // Uint8Array → 字符串
  return new TextDecoder().decode(decompressed);
}

// ============ 使用示例 ============
const original = JSON.stringify({
  users: Array.from({ length: 500 }, (_, i) => ({
    id: i,
    name: `用户_${i}`,
    email: `user${i}@example.com`,
    bio: '这是一段比较长的用户简介文本，包含中文内容。'.repeat(3),
  })),
});

console.log(`原始大小: ${original.length} 字符 (${(original.length / 1024).toFixed(1)} KB)`);

const compressed = compress(original);
console.log(`压缩后: ${compressed.length} 字符 (${(compressed.length / 1024).toFixed(1)} KB)`);

// 验证
const restored = decompress(compressed);
console.log(`还原正确: ${original === restored}`);

// 压缩率
const ratio = ((1 - compressed.length / original.length) * 100).toFixed(1);
console.log(`压缩率: ${ratio}%`);

5.3 压缩率实测

数据类型	原始大小	压缩后	压缩率
JSON（英文为主）	120 KB	18 KB	85%
JSON（中文为主）	120 KB	25 KB	79%
纯文本（英文）	50 KB	15 KB	70%
纯文本（中文）	50 KB	22 KB	56%

6. 原生方案：CompressionStream API

现代浏览器原生支持 CompressionStream 和 DecompressionStream，无需引入第三方库！

6.1 浏览器兼容性

Chrome 80+
Edge 80+
Firefox 113+
Safari 16.4+

截至 2024 年，覆盖率约 92%。

6.2 使用 CompressionStream 实现压缩

/**
 * 使用原生 CompressionStream 压缩字符串
 * @param {string} str - 原始字符串
 * @param {'gzip' | 'deflate' | 'deflate-raw'} format - 压缩格式
 * @returns {Promise<string>} - Base64 编码结果
 */
async function compressNative(str, format = 'gzip') {
  // 字符串 → Uint8Array
  const encoder = new TextEncoder();
  const data = encoder.encode(str);

  // 创建压缩流
  const cs = new CompressionStream(format);
  const writer = cs.writable.getWriter();
  writer.write(data);
  writer.close();

  // 读取压缩结果
  const reader = cs.readable.getReader();
  const chunks = [];

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    chunks.push(value);
  }

  // 合并所有块
  const totalLength = chunks.reduce((sum, c) => sum + c.length, 0);
  const result = new Uint8Array(totalLength);
  let offset = 0;
  for (const chunk of chunks) {
    result.set(chunk, offset);
    offset += chunk.length;
  }

  // 转 Base64
  return btoa(String.fromCharCode(...result));
}

/**
 * 使用原生 DecompressionStream 解压
 */
async function decompressNative(base64Str, format = 'gzip') {
  const binaryStr = atob(base64Str);
  const data = Uint8Array.from(binaryStr, c => c.charCodeAt(0));

  const ds = new DecompressionStream(format);
  const writer = ds.writable.getWriter();
  writer.write(data);
  writer.close();

  const reader = ds.readable.getReader();
  const chunks = [];

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    chunks.push(value);
  }

  const totalLength = chunks.reduce((sum, c) => sum + c.length, 0);
  const result = new Uint8Array(totalLength);
  let offset = 0;
  for (const chunk of chunks) {
    result.set(chunk, offset);
    offset += chunk.length;
  }

  return new TextDecoder().decode(result);
}

// 使用
(async () => {
  const original = 'Hello World! '.repeat(200);
  const compressed = await compressNative(original);
  console.log(`原始: ${original.length} → 压缩: ${compressed.length}`);
  console.log(`还原: ${await decompressNative(compressed)}`);
})();

7. 封装一个通用的 localStorage 工具

将压缩能力集成到日常开发中：

const storage = {
  set(key, value, compress = false) {
    let data = JSON.stringify(value);

    if (compress) {
      // 标记为压缩数据
      data = 'GZ:' + pakoCompress(data);
    }

    try {
      localStorage.setItem(key, data);
    } catch (e) {
      if (e.name === 'QuotaExceededError') {
        console.warn('localStorage 已满，尝试压缩存储...');
        // 如果还没压缩，再试一次压缩版
        if (!compress) {
          this.set(key, value, true);
        } else {
          console.error('压缩后仍然超出限制');
        }
      }
    }
  },

  get(key) {
    const data = localStorage.getItem(key);
    if (!data) return null;

    if (data.startsWith('GZ:')) {
      return JSON.parse(pakoDecompress(data.slice(3)));
    }

    return JSON.parse(data);
  },
};

8. 方案对比与选择建议

方案	压缩率	依赖	浏览器兼容性	推荐场景
RLE	低	无	全部	极少使用
LZW	中	无	全部	简单英文压缩
pako + Base64	高	pako (~45KB)	全部	通用推荐（兼容性好）
CompressionStream	高	无	Chrome 80+	现代浏览器首选
lz-string	中	lz-string	全部	localStorage 专用

我的建议

如果只需要支持现代浏览器：直接用 CompressionStream，零依赖、性能好。
如果需要兼容旧浏览器：引入 pako（gzip 压缩），成熟稳定。
如果只是存储到 localStorage：lz-string 专为此场景设计，API 最简单。
永远不要用 RLE 压缩通用文本——效果太差。

9. 小结

字符串压缩在 Web 前端是一个容易被忽视但非常实用的技术。核心要点：

明确需求：是突破存储限制还是减少传输流量？
选对方案：现代浏览器用原生 API，兼容场景用 pako
关注开销：压缩/解压本身需要 CPU 时间，不建议在主线程大量压缩
考虑异步：CompressionStream 基于 Stream API，天然异步，不会阻塞 UI

希望本文能帮你在实际项目中做出合理的技术选型！

目录