用Web Worker处理耗时计算

之前一直用老方案，最近换了新方法确实方便不少。对比一下两种做法，给还在犹豫的朋友一个参考。

先搞清楚原理

Web Worker的底层原理涉及状态同步。用代码演示比画图更直观：

class SearchBox {
  constructor(container, options = {}) {
    this.container = container;
    this.debounceMs = options.debounceMs || 300;
    this.onChange = options.onChange || (() => {});
    this.value = '';
    this.init();
  }

  init() {
    this.container.innerHTML = '<input type="text" placeholder="请输入..." />';
    const input = this.container.querySelector('input');
    let timer = null;
    input.addEventListener('input', (e) => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        this.value = e.target.value;
        this.onChange(this.value);
      }, this.debounceMs);
    });
  }

  getValue() { return this.value; }
  setValue(val) { this.value = val; this.container.querySelector('input').value = val; }
}

实际怎么用

在真实项目中用Web Worker，和教程里还是有区别的。主要是状态同步这块需要额外处理。完整代码如下：

class AnimationHelper {
  static animate(element, keyframes, duration = 800) {
    return element.animate(keyframes, {
      duration,
      easing: 'ease-out',
      fill: 'forwards',
    });
  }

  static fadeIn(element) {
    return this.animate(element, [
      { opacity: 0, transform: 'translateY(8px)' },
      { opacity: 1, transform: 'translateY(0)' },
    ]);
  }

  static fadeOut(element) {
    return this.animate(element, [
      { opacity: 1, transform: 'translateY(0)' },
      { opacity: 0, transform: 'translateY(-8px)' },
    ]);
  }

  static stagger(elements, delay = 50) {
    elements.forEach((el, i) => {
      setTimeout(() => this.fadeIn(el), i * delay);
    });
  }
}

进阶一点的用法

如果对性能有要求，Web Worker可以做状态同步方面的优化。核心改动不大，但效果明显：

容易踩的坑

说几个容易踩的坑。第一个是状态同步的问题，很多人在这上面栽过跟头。第二个是版本兼容性，不同版本行为可能不一样。第三个是边界情况，空值和异常输入要处理好。

写在最后

总结一下，Web Worker的关键在于样式计算与布局。掌握了这个，其他用法都是在这个基础上扩展。建议多写几个小demo练手，光看不动手容易忘。