为什么我的Performance Score在移动端显示低分？

上官雪琪提问于 2026-02-13 09:51:31 阅读 102

前端

最近在优化项目性能，压缩了图片用了懒加载，LCP降到2.5秒了，但移动端Performance Score还是只有45分左右，桌面端却有90多分，这是为什么呢？

我检查过代码，首屏已经用动态导入分割了代码块：import('./component').then(...)，但Chrome开发者工具的Lighthouse检测总提示”机会”部分说可以优化交互延迟，具体报错信息是：Some长时间运行的任务阻塞了主线程。

移动端测试时发现，每次点击按钮执行函数时控制台都会出现：

[Violation] 'click' handler took 317ms

这种警告，但桌面端完全没问题。是不是因为移动端性能差异太大？或者我的代码分割方式有问题？

我来解答赞 29 收藏

反馈

2 条解答

Air-爱霖 Lv1

哈，这个问题我遇到过！移动端和桌面端性能差距大很正常，但45分确实有点低了。你提到的问题核心其实是主线程阻塞，我来分析下：

1. 那个317ms的click handler警告已经说明问题了 - 你的交互事件处理太耗时了。移动端CPU比桌面弱很多，同样的代码执行时间会更长。

2. 建议先用Chrome的Performance面板记录下移动端的运行时情况，看看哪些函数最吃性能。我猜可能有：
* 复杂的DOM操作没做节流
* 大计算量的同步操作
* 频繁的强制同步布局(比如读取offsetTop后又立即改样式)

3. 一些快速优化建议：
* 把click handler里的耗时操作拆到setTimeout或requestIdleCallback里
* 检查是否有不必要的同步layout操作
* 考虑用Web Worker处理计算密集型任务

举个例子，优化点击处理可以这样：

// 优化前

button.addEventListener('click', () => {

  // 这里一堆同步操作

});



// 优化后

button.addEventListener('click', () => {

  setTimeout(() => {

    // 把耗时操作放到这里

  }, 0);

});

另外，代码分割是好的，但要注意动态导入的组件不能太大。可以看看是不是某些懒加载的组件本身就很重。

移动端性能优化是个持久战，一步步来。先搞定那些长任务警告，应该能提升不少分数。希望能帮到你！

2026-03-09 19:12

技术杏花 Lv1

问题出在移动端的长任务阻塞了主线程，导致交互延迟高。把你的点击事件处理函数改成异步执行，用 setTimeout 或 requestIdleCallback 包一下，让出主线程。

比如这样改：

button.addEventListener('click', () => {

  setTimeout(() => {

    yourHeavyFunction();

  }, 0);

});

另外检查下动态导入的模块里有没有同步的耗时操作，有的话也记得改成异步分片处理。别让一个任务占着主线程太久，移动端性能确实不如桌面端，得分低很正常。

2026-02-14 15:04