前端-如何查看项目内是否内存泄漏?

4,169 阅读3分钟

前端-如何查看项目内是否内存泄漏?

最近发现自己封装的组件有内存泄漏的问题,然后解决这个问题,并记录,形成此文

目录大纲:

  1. 用chorme开发者工具查看是否内存泄漏
    1. 简单介绍一下Memory各部分功能
  2. 一个自己封装的vue组件存在内存泄漏 以及 实际解决
  3. 测试ui库: element-ui的tableiview-ui的table自己封装的table的 内存泄漏 对比

1. 用chorme开发者工具查看是否内存泄漏

memory.png

memoryTest.gif

介绍一下gif动图的意思:(主要是查看内存是否泄漏)

  1. 动作:重复打开/关闭一个modal(自己封装的),我们可以看到内存泄漏的图 memory-line.png

举一反三,在项目内,来回切换路由,也可以看到,某个路由是否内存泄漏了

1. 简单介绍一下Memory各部分功能

(篇幅太长,直接放文档链接吧)各部分功能的文档:developer.chrome.com/docs/devtoo… (需要翻墙才能访问,也可以私信我,我有粗略翻译的)

2. 一个自己封装的vue组件存在内存泄漏 以及 实际解决

上面的动图就是用的自己写的一个vue弹窗组件,存在内存泄漏情况。

具体的解决是,关闭弹窗之前调一个vue内置的方法this.$destroy()

handleClose () {
+ this.$destroy() // 释放内存
  this.$el.parentNode.removeChild(this.$el)
},

3. 测试ui库: element-ui的tableiview-ui的table自己封装的table的 内存泄漏 对比

每次渲染 内存的泄漏值element-uiiview自己封装的table
每次渲染 内存的泄漏值/简单table(没使用行数据)351kb1.2Mb183kb
每次渲染 内存的泄漏值/复杂table(使用了一个行数据)553kb1.4Mb353kb
每次渲染 内存的泄漏值/复杂table(使用了两个行数据)758kb1.5Mb462kb

使用了一/两个行数据,指的是(以element-ui举例)

<el-table :data="arr" style="width: 100%">
  <el-table-column prop="title" label="xx"></el-table-column>
  <el-table-column prop="status" label="xx"></el-table-column>
  ...
  <el-table-column label="操作">
    <template slot-scope="scope">
      <el-button size="mini">{{scope.row.pubTime}}</el-button> // 这里使用了一个行数据 scope.row.xx
      <el-button size="mini">{{scope.row.status}}</el-button> // 这里使用了第二个行数据 scope.row.xx
    </template>
  </el-table-column>
</el-table>

附上测试图 (每次渲染 内存的泄漏值/简单table(没使用行数据)):

另两种情况,我也测试截图了,这里就不放上来了,图片太多,看的乱。

table-el.png

table-iv.png

table.png

另言:此处放上自己封装的table和eleme、iview对比,不是想表达自己的table写的好或坏。是想表达:为了实现一些好用的功能,有些内存泄漏的情况,是没办法比避免的。把能控制的尽量控制好就行,最差情况 刷新一下也要能清除掉(纠结了2天一直想完全解决myTable内存泄漏的问题,此处算是暂时的总结。共勉,继续前行!)

另外node部分的话

  1. 可以用 Easy-Monitor: www.devtoolx.com/easy-monito…
  2. 快照工具 heapdump 用来保存内存快照,使用 devtool 来查看内存快照。
  • 使用 heapdump 保存内存快照时,只会有 Node.js 环境中的对象,不会受到干扰(如果使用 node-inspector 的话,快照中会有前端的变量干扰)。
  • PS:安装 heapdump 在某些 Node.js 版本上可能出错,建议使用 npm install heapdump -target=Node.js 版本来安装。

码字不易,点赞鼓励!