NUXT内存泄漏引发问题
起因
项目中使用了nuxtjs框架进行开发,在开发测试过程中均无出现任何异常。部署上线到正式生产环境之后,运行了五六天之后node异常,服务停止响应,pm2管理品台无法恢复应用程序。需要进入生产环境进行重启项目。查阅运行日志之后发现生产服务器会缓慢堆积tcp链接。在到一定的程度之后,会引发node程序 cpu 100%占用,停止响应。最初阶段以为是_nuxt下的文件并未通过nginx访问,而是通过node进行读取的,造成文件打开过多,重新配置了nginx静态文件读取规则之后,问题依旧。在解决这个问题的过程中发现某个文章中提到,如果node内存泄漏会造成node进程跑满当前cpu,并且打开文件数飙增。
调试
调试工具
- node-heapdump
- chrome调试工具
调试流程
安装node-heapdump。
npm install node-heapdump --save-dev
打开项目根目录的nuxt.config.js文件,进行heapdump配置。
// 内存快照代码
var headpdump = require('heapdump')
//
setInterval(function () {
console.log('st headpdump')
headpdump.writeSnapshot(function(err, filename) {
console.log('dump written to', filename)
})
}, 15000)
module.exports = {...// nuxt配置}
我设定了每1.5秒,heapdump进行内存快照一次。
并且在间隔过程中进行以下操作。
- 载入页面,等候一次快照
- 刷新一次页面,等候一次快照
等待快照完成之后,heapdump会将快照文件保存在项目根目录中。
接着,我们打开chrome开发者工具,切换到memory选项卡,点击load载入hepdump生成在根目录的文件。
分别载入第一次页面快照,跟刷新一次之后的快照。我们点击切换右侧下拉箭头的视图
选项卡类型。点击切换视图到Comparison。
在等候Chrome比对两个文件之后,可以看到第二个文件的内存快照信息。查看右侧# Delta选项。
可以看到 刷新一次之后,增加了69个闭包未释放。
展开闭包(closure)可以看到大量的request请求未释放。
由此可见,问题出现在项目中服务端请求服务接口上。
解决问题
检查services文件中的请求方法代码。
import Urls from './url'
import Fetch from './fetch.js'
let fn = {}
Object.keys(Urls).forEach(key => {
fn[key] = (data, headers) => {
return new Promise((resolve, reject) => {
resolve(Fetch(Urls[key].url, {method: Urls[key].method, data, headers}))
})
}
})
export default fn
发现了问题,services 通过return请求,但是使用的数据都是通过箭头方法传递到下一层,变量被层层引用,这样会造成闭包无法完全释放。因为传入的数据一直都有引用无法gc,这样也造成了node打开的tcp链接无法关闭释放。
我们修改了services方法,经过修改的代码如下:
import Urls from './url'
import Fetch from './fetch.js'
let fn = {}
Object.keys(Urls).forEach(key => {
fn[key] = function (data, headers) {
return Fetch(Urls[key].url, {method: Urls[key].method, data, headers})
}
})
export default fn
再次通过调试流程生成内存快照,发现request闭包都回收完毕。内存泄漏问题初步告一段落,项目更新之后已稳定运行。
参考文章来源
http://frontenddev.org/link/js-memory-leak-screening-method-chrome-profiles.html