Laravel项目中Axios请求耗时与查询耗时差异过大求助

问题背景 #

首屏性能疑问 #

使用Lighthouse检测Laravel+Inertia+Vue站点时，发现首屏绘制（First Contentful Paint）耗时达7秒，但站点JavaScript总大小不超过500K（其中app.js为300K），疑惑该体积是否过大；同时观察到JavaScript量最多、Ajax调用最频繁的页面加载最慢。

请求耗时差异疑问 #

通过Laravel Telescope排查一个指向App\Http\Controllers\CategoryController@index的简单请求，控制器代码如下：

public function index(Balance $balance)
{
    return Category::where('balance_id', $balance->id)->get();
}

该请求触发的数据库查询总耗时仅28ms，但整个请求耗时却达339ms，想明确耗时差异的来源。

查询详情：

update `sessions` set `payload` =...    2.87ms  
select * from `categories` where `balance_id` = 1   1.32ms  
select * from `balances` where `balances`.`user_id` = 1 and `balances`.`user_id` is not null limit 1    8.88ms  
select * from `users` where `id` = 1 limit 1    4.15ms  
select * from `balances` where `id` = '1' limit 1   1.77ms  
select * from `sessions` where `id` = '7iGBQdBdKA8KrTvJOqBfLhmX' limit 1    9.95ms  

解答 #

关于JS体积与首屏慢的问题 #

300K的app.js不算大，但首屏慢的原因可能来自这些环节：

• 代码解析与编译：浏览器需要对Vue、Inertia及业务代码进行解析、编译，若未开启代码分割，首屏需加载全量逻辑，会阻塞渲染进程。
• Inertia初始化流程：Inertia需等待后端返回页面组件数据，包含服务端渲染准备、数据传递等步骤，再加上Vue的hydration（激活）过程，会拉长首屏时间。
• Ajax请求调度：若页面多个Ajax请求串行发起，总耗时会累加；同时请求排队、后端处理每个请求的额外开销也会影响整体加载速度。

关于请求耗时差异的问题 #

数据库查询仅占总耗时的8%左右，剩余耗时来自Laravel请求生命周期的其他环节：

• 框架生命周期开销：从请求进入框架，到路由解析、中间件执行（Session认证、CSRF验证、授权等），再到控制器与模型的依赖注入实例化（比如Balance模型注入触发的用户、余额查询），这些步骤都需要时间。
• Session操作开销：Session的查询与更新涉及I/O操作，若使用文件存储Session，磁盘I/O的延迟会被放大，即使单条查询耗时短，累积起来也会占比不小。
• 模型处理开销：查询结果实例化为Eloquent模型时，模型的boot方法、观察者事件、关联关系初始化等逻辑，都会增加额外耗时。
• 响应构建开销：Laravel需将查询结果序列化为JSON，加上响应头处理、内容压缩（若开启）等步骤，也会消耗时间。
• 服务器资源瓶颈：若服务器CPU、内存不足，PHP-FPM进程排队、内存分配等操作会拖慢框架的处理速度。

优化建议 #

首屏优化

• 开启Inertia的服务器端渲染（SSR），减少客户端hydration的压力，加快首屏内容渲染。
• 启用代码分割，将非首屏组件拆分为异步chunk，降低首屏加载的JS体积。
• 优化静态资源：开启Gzip/Brotli压缩，将JS/CSS托管到CDN，配置HTTP缓存策略。

请求耗时优化

• 更换Session存储：将Session从文件存储换成Redis/Memcached，降低I/O延迟。
• 优化路由模型绑定：检查Balance模型的路由绑定配置，避免不必要的关联查询，仅获取所需字段。
• 精简中间件：若该请求不需要某些全局中间件，通过路由组排除，减少中间件执行开销。
• 优化Eloquent查询：使用select()指定所需字段，避免select *；移除或优化模型中不必要的观察者、boot逻辑。

内容的提问来源于stack exchange，提问作者Ivar