NUXT内存泄漏引发问题

起因

项目中使用了nuxtjs框架进行开发,在开发测试过程中均无出现任何异常。部署上线到正式生产环境之后,运行了五六天之后node异常,服务停止响应,pm2管理品台无法恢复应用程序。需要进入生产环境进行重启项目。查阅运行日志之后发现生产服务器会缓慢堆积tcp链接。在到一定的程度之后,会引发node程序 cpu 100%占用,停止响应。最初阶段以为是_nuxt下的文件并未通过nginx访问,而是通过node进行读取的,造成文件打开过多,重新配置了nginx静态文件读取规则之后,问题依旧。在解决这个问题的过程中发现某个文章中提到,如果node内存泄漏会造成node进程跑满当前cpu,并且打开文件数飙增。

调试

调试工具

  1. node-heapdump
  2. 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进行内存快照一次。
并且在间隔过程中进行以下操作。

  1. 载入页面,等候一次快照
  2. 刷新一次页面,等候一次快照

等待快照完成之后,heapdump会将快照文件保存在项目根目录中。

接着,我们打开chrome开发者工具,切换到memory选项卡,点击load载入hepdump生成在根目录的文件。
1.png

分别载入第一次页面快照,跟刷新一次之后的快照。我们点击切换右侧下拉箭头的视图选项卡类型。点击切换视图到Comparison。

2.png
在等候Chrome比对两个文件之后,可以看到第二个文件的内存快照信息。查看右侧# Delta选项。

3.png

可以看到 刷新一次之后,增加了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

摄影爱好者,全栈工程师,游戏玩家,积木苦手,超穷手办收藏爱好者

发表评论

搜索

热门文章

最近回复