E9/E10页面卡顿?AI性能分析工具帮你查

一、它解决什么问题

「卡」的现象，落到场景上翻来覆去是四类：打开慢、点了半天才有反应、内容跳来跳去，以及开着开着内存一路涨。

难的是说清慢在哪：接口串行还是资源太大？主线程被长任务占死，还是布局一直在抖？传统排查要会 DevTools 的 Performance / Memory 面板，还得看得懂火焰图，这套东西不是谁都会。

工具做的其实是一条流水线：

数据标准化 → 28 项规则检查 → 问题定位 → 优化建议 → 可视化报告

二、三步走完一次分析

1. 采集数据按场景挑一种或几种：① 电脑端页面：装配套的 Ecode 采集包，打开页面复现一次，点右下角「导出性能数据」，得到一个 性能数据.json② 移动端页面：同样用这个包，或者给 Charles 抓包文件③ 只看网络层：Performance Trace、HAR、Charles 抓包任选一种④ 内存涨、崩溃异常：.heapsnapshot / .heapprofile / .heaptimeline

2. 装分析 Skill包名 page-performance-analyzer，在 WorkBuddy 里导入 Skill 压缩包就行；支持 npm 的 AI 工具直接跑：

3. 发起分析新建对话，把数据丢进去，把话说清楚。我一般这么发：

环境版本、怎么复现的、卡在哪一步，写得越具体结论越准。只丢一个文件过去，AI 只能给通用建议。

三、跑出来什么样

28 项规则覆盖八个方向：页面加载、网络请求、资源体积、主线程长任务、布局稳定性、DOM 与图片、缓存、内存异常。

一次工作流列表页的实测：204 个请求、12.65 秒，AI 直接生成 HTML 报告，哪个请求慢、哪个资源大，图上看得很直白。

结论部分是带证据的：主线程长任务「init.js 累计阻塞 1.5 秒」、内容合计偏移 0.582 超过阈值，最后按风险等级排了个优先级。这种粒度以前要人工翻半天面板，现在是一份能直接甩给开发的清单。

E9 也能用，有对应的 Ecode 采集包，移动端页面同样可以采，实际用下来比 E10 糙一些。

四、小结

采集、检查、归因串成一条线，中间不用人盯。手上那些说不清哪里慢的老页面，值得拿它先跑一遍。