为什么我的Vue页面TTI指标这么高？优化后没明显改善？

设计师艳苹提问于 2026-01-26 22:46:31 阅读 83

前端

我最近在优化一个Vue页面的性能，发现TTI指标一直卡在8秒以上。我尝试用了懒加载组件和代码分割，但测试下来TTI还是没降下来。这是我的页面组件代码：



  
    
    
    {{ largeData }}
  



export default {
  data() {
    return {
      largeData: null,
      dataLoaded: false
    }
  },
  mounted() {
    // 这里有个复杂的数据处理
    this.processData();
    setTimeout(() => {
      this.dataLoaded = true;
    }, 5000);
  },
  methods: {
    processData() {
      let temp = [];
      for(let i=0; i<100000; i++) {
        temp.push(Math.random()*i);
      }
      this.largeData = temp.sort();
    }
  }
}

我用Lighthouse测了发现，在mounted钩子执行processData方法时，主线程被阻塞了很久。但这个数据处理是业务必需的，该怎么优化才能让TTI降下来呢？难道非得拆分到Web Worker里吗？

性能指标

我来解答赞 7 收藏

反馈

2 条解答

Mr-兴娜 Lv1

你的问题很典型，主线程被大数据处理阻塞，导致TTI高是必然的。Vue的mounted是同步的，你在这个阶段执行一个10万次的循环+排序，浏览器直接卡住没法响应用户输入，Lighthouse肯定报警。

你提到懒加载和代码分割没效果，那是因为这些优化的是加载阶段的网络请求，并没有解决主线程阻塞的问题。现在关键点是把数据处理从主线程挪出去。

Web Worker是正解，别无他法。这东西就是为这种场景设计的。你可以这样改：

**1. 把处理逻辑放到worker.js**

onmessage = function(e) {

  let temp = [];

  for(let i=0; i<100000; i++) {

    temp.push(Math.random()*i);

  }

  const result = temp.sort();

  postMessage(result);

};

**2. 页面组件里调用Worker**

mounted() {

  const worker = new Worker('path/to/worker.js');

  worker.onmessage = (e) => {

    this.largeData = e.data;

    this.dataLoaded = true;

  };

  worker.postMessage('start');

}

这样主线程就完全释放了，TTI会明显下降。当然你也可以配合分页或虚拟滚动来优化渲染性能，但那是下一步的事了。

再说一遍，只要你在主线程做这种重计算，TTI就别想降下来。Web Worker不是加分项，是必选项。

2026-02-03 07:04

慕容玉宸 Lv1

你这个问题典型的就是主线程被数据处理堵死了。没错，这种耗时计算确实得扔到Web Worker里去跑，没别的捷径。给你个简单改法：

// 创建worker

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



export default {

  data() {

    return {

      largeData: null,

      dataLoaded: false

    }

  },

  mounted() {

    worker.onmessage = (event) => {

      this.largeData = event.data;

      this.dataLoaded = true;

    };

    worker.postMessage('start');

  }

}



// 另存为 dataWorker.js

self.onmessage = function(message) {

  if (message.data === 'start') {

    let temp = [];

    for(let i=0; i<100000; i++) {

      temp.push(Math.random()*i);

    }

    self.postMessage(temp.sort());

  }

};

这样就解放主线程了，TTI自然能下来。

2026-01-29 13:01