Vue按钮点击后FID飙升，怎么优化都没用？

把heavyCalculation丢到web worker里跑，主线程别硬扛。我之前这样搞的：

const worker = new Worker('worker.js');

worker.postMessage(this.dataList);

worker.onmessage = (e) => {

  this.processedData = e.data;

};

然后worker.js里写：

onmessage = (e) => {

  const result = e.data.map(item => heavyCalculation(item.value));

  postMessage(result);

};

遇到这种点击后FID飙升的问题，其实挺常见的，尤其是在数据处理复杂的时候。你已经做了防抖和拆分逻辑到watch，这说明你已经意识到主线程阻塞的问题了。但显然这些还没解决根本问题。

首先看你的handleClick方法，里面用了map循环处理数据，并且每个item都调用了heavyCalculation，里面还有正则。这些操作在主线程上执行，数据一大，肯定会卡。

通用的做法是：把这种重任务从主线程移走。你可以用Web Worker，或者退而求其次用requestIdleCallback + 分片处理。

Web Worker是最直接的解决方案，它能真正把计算任务放到另一个线程里，完全不阻塞主线程。你只需要把heavyCalculation单独写到一个worker文件里，然后在主线程里new Worker调用它就行。

如果Worker不好接入，可以考虑分片处理。比如把dataList分成小块，每次处理一小块，用setTimeout或requestIdleCallback调度下一轮处理，这样至少不会把主线程堵死。

另外，Vue的事件机制其实没你说的那些问题，阻塞的根源还是主线程的计算时间太长，导致浏览器无法及时响应用户输入。

你可以再结合Lighthouse看下主线程的调用栈，找出具体耗时函数，再优化细节。比如正则是不是可以简化，或者提前缓存一些中间结果。

总之，主线程不能干重活，这是前端优化的铁律。你这个场景，用Web Worker是最直接有效的方案。