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

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

前端

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

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

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

[Violation] 'click' handler took 317ms

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

我来解答赞 20 收藏

反馈

1 条解答

技术杏花 Lv1

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

比如这样改：

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

  setTimeout(() => {

    yourHeavyFunction();

  }, 0);

});

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

2026-02-14 15:04