问题出现
当用户量访问大的时候,访问页面响应速度慢,接口响应也返回缓慢,服务器内存不够,后续直接达到上限自动重启。
问题严重性
Nuxt 是服务端渲染,用户的访问本身就会比较占用内存和CPU,如果存在内存泄漏的问题,并不是简单的页面卡顿, 直接会导致服务崩溃并且频繁重启。
如何定位排查
在内网环境模拟出大量用户访问的情况,我这里是直接疯狂刷新页面
在 Portainer 中 检测 docker 对应容器中的 内存、CPU。
有问题的页面:Memory 会迅速飙升,且停止模拟后,不会回落,会持续保持高内存状态。
正常的页面:Memory 只会短暂升高,停止模拟后,回落状态迅速。
排查到几次造成内存泄漏的问题
1. 过度使用 computed 和 watch
computed 和 watch 是 Vue 提供的非常强大的响应式机制,但是如果过度使用,可能会导致内容泄漏
, 下图的这段代码就是导致 内存泄漏 的直接原因, 本身 domainName 是从 nuxt环境变量中取出,在拼接url的时候,代码中仍然嵌套 computed 做了一些逻辑处理 (这是可以避免的)
2. setInterval 设置定时器
setInterval 设置定时器没有放在 onMounted 或者通过代码确保在浏览器环境中, nuxt 服务端渲染代码会在服务器直接开启,通过onUnmounted 钩子函数是没办法直接清除的