NUXT内存泄漏引发问题

yodfz
6,728 阅读3分钟
原文链接： www.yodfz.com

起因 在公司的项目中使用了nuxtjs框架进行开发，在开发测试过程中均无出现任何异常。在上线到正式生产环境之后，大概五六天之后node就异常，pm2无法自恢复。需要进入生产环境进行重启项目。 查阅日志之后发现生产服务器会缓慢堆积tcp链接。最后引发node程序 cpu 100%占用。 最初阶段以为，是nginx反向代理了node服务，但是_nuxt下的文件并未进行代理都是通过node进行读取的。重新配置了静态文件读取规则之后，问题依旧。 偶然在某个文章中看到，如果node内存泄漏会造成node进程跑满当前cpu。

使用工具

  1. node-heapdump
  2. chrome调试工具

安装node-heapdump。并且在nuxt.config.js中进行代码配置。

// 内存快照代码
 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秒进行内存快照一次。 并且根据以下规则进行快照。

  1. 载入页面，等候一次快照
  2. 刷新一次页面，等候一次快照 // 3. 多次刷新页面，等候快照 // 4. 等一段时间进行快照。

chrome,memory 视图解释

列字段解释： ● Constructor — 类名Distance — 估计是对象到根的引用层级距离 ● Objects Count — 给出了当前有多少个该类的对象 ● Shallow Size — 对象所占内存（不包含内部引用的其它对象所占的内存）(单位：字节) ● Retained Size — 对象所占总内存（包含内部引用的其它对象所占的内存）(单位：字节) 下面解释一下部分类名称所代表的意思： ● (compiled code) — 未知，估计是程序代码区 ● (closure) — 闭包(array) — 未知 ● Object — JS对象类型(system) — 未知 ● (string) — 字符串类型，有时对象里添加了新属性，属性的名称也会出现在这里

打开chrome开发者工具，切换到memory.载入hepdump生成在根目录的文件。 Alt text

分别载入第一次页面快照，跟刷新一次之后的快照。 Alt text

切换视图到Comparison Alt text 可以看到 刷新一次之后，增加了69个闭包未释放。 打开闭包方法可以看到大量的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

发现了问题，如果return了new Promise，但是使用的数据都是通过箭头方法传递到下一层，这样会造成闭包无法完全释放。因为传入的数据一直都有引用无法gc。 经过修改的代码如下:

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

再次通过内存快照查看发现，闭包都回收完毕。内存泄漏问题初步告一段落。

参考文章来源 frontenddev.org/link/js-mem…

avatar
文章
阅读
粉丝