事件监听函数的内存泄漏，都给我退散吧！

[[427730]]

本文转载自微信公众号「云的程序世界」，作者云的世界。转载本文请联系云的程序世界公众号。

成都创新互联致力于成都网站设计、成都网站制作,成都网站设计,集团网站建设等服务标准化，推过标准化降低中小企业的建站的成本，并持续提升建站的定制化服务水平进行质量交付，让企业网站从市场竞争中脱颖而出。 选择成都创新互联，就选择了安全、稳定、美观的网站建设服务！

前言

内存泄漏是个很严肃的问题，可是迄今也没有一个非常有效的排查方案，本方案就是针对性的单点突破。

工作中，我们会对window, DOM节点，WebSoket, 或者单纯的事件中心等注册事件监听函数, 添加了，没有移除，就会导致内存泄漏，如何预警，收集，排查这种问题呢?

本文是代码篇，主要讲使用和实现。

源码和demo

源码：事件分析vem[2]

项目内部有丰富的例子。

核心功能

我们解决问题的时机无非为 事前， 事中， 事后。

我们这里主要是 事前 和 事后。

  • 事件监听函数添加前进行预警
  • 事件监听函数添加后进行统计

了解功能之前，先了解一下四同特性：

1.同一事件监听函数从属对象

事件监听总是要注册到响应的对象上的, 比如下面代码的window, socket, emitter都是事件监听函数的从属对象、

 
 
 
    
  
  
  
  1. window.addEventListener("resize",onResize) 
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. socket.on("message", onMessage); 
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. emitter.on("message", onMessage); 
    6.

2.同一事件监听函数类型

这个比较好理解，比如window的 message, resize等，Audio的 play等等

3.同一事件监听函数内容

这里注意一点，事件监听函数相同，分两种：

  • 函数引用相同
  • 函数内容相同

4.同一事件监听函数选项

这个可选项，EventTarget系列有这些选项，其他系列没有。

选项不同，添加和删除的时候结果就可能不通。

 
 
 
    
  
  
  
  1. window.addEventListener("resize",onResize) 
    2. 
  
  
  
  2. // 移除事件监听函数onResize失败 
    3. 
  
  
  
  3. window.removeEventListener("resize",onResize, true) 
    4.

预警

事件监听函数添加前，比对四同属性的事件监听函数，如果有重复，进行报警。

统计高危监听事件函数

最核心的功能。

统计事件监听函数从属对象的所有事件信息，输出满足 四同属性 的事件监听函数。如果有数据输出，极大概率，你内存泄漏了。

统计全部的事件监听函数

统计事件监听函数从属对象的所有事件信息， 可以用于分析业务逻辑。

一览你添加了多少事件, 是不是有些应该不存的，还存在呢?

基本使用

初始化参数

内置三个系列：

 
 
 
    
  
  
  
  1. new EVM.ETargetEVM(options, et);  //  EventTarget系列 
    2. 
  
  
  
  2. new EVM.EventsEVM(options, et);   //  events 系列 
    3. 
  
  
  
  3. new EVM.CEventsEVM(options, et);  // component-emitter系列 
    4.

当然，你可以继承BaseEvm, 自定义出新的系列，因为上面的三个系列也都是继承BaseEvm而来。

最主要的初始化参数也就是 options

  • options.isSameOptions

是一个函数。主要是用来判定事件监听函数的选项。

  • options.isInWhiteList

是一个函数。主要用来判定是否收集。

  • options.maxContentLength

是一个数字。你可以限定统计时，需要截取的函数内容的长度。

EventTarget系列

  • EventTarget[3]
  • DOM节点 + windwow + document
  • XMLHttpRequest 其继承于 EventTarget
  • 原生的WebSocket 其继承于 EventTarget
  • 其他继承自EventTarget的对象

基本使用

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2.  
    3.

 

效果截图

截图来自我对实际项目的分析 , window对象上message消息的重复添加， 次数高达10

events[4] 系列

  • Nodejs 标准的 events[5]
  • MQTT 基于 events[6]库
  • socket.io 基于 events[7]库

基本使用

 
 
 
    
  
  
  
  1. import { EventEmitter } from "events"; 
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. const evm = new win.EVM.EventsEVM(undefined, EventEmitter); 
    4. 
  
  
  
  4. evm.watch(); 
    5. 
  
  
  
  5. setTimeout(async function () { 
    6. 
  
  
  
  6.     // statistics getExtremelyItems 
    7. 
  
  
  
  7.     const data = await evm.getExtremelyItems(); 
    8. 
  
  
  
  8.     console.log("evm:", data); 
    9. 
  
  
  
  9. }, 5000) 
    10.

效果截图

截图来自我对实际项目的分析 ,APP_ACT_COM_HIDE_ 系列事件重复添加

component-emitter[8] 系列

  • component-emitter
  • socket.io-client(即socket.io的客户端)

基本使用

 
 
 
    
  
  
  
  1. const Emitter = require('component-emitter'); 
    2. 
  
  
  
  2. const emitter = new Emitter(); 
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4. const EVM = require('../../dist/evm'); 
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6. const evm = new EVM.CEventsEVM(undefined, Emitter); 
    7. 
  
  
  
  7. evm.watch(); 
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9. // 其他代码 
    10. 
  
  
  
  10.  
    11. 
  
  
  
  11. evm.getExtremelyItems() 
    12. 
  
  
  
  12.     .then(function (res) { 
    13. 
  
  
  
  13.         console.log("res:", res.length); 
    14. 
  
  
  
  14.         res.forEach(r => { 
    15. 
  
  
  
  15.             console.log(r.type, r.constructor, r.events); 
    16. 
  
  
  
  16.         }) 
    17. 
  
  
  
  17.     }) 
    18.

效果截图

事件分析的基本思路

上篇总结的思路：

  1. WeakRef建立和target对象的关联，并不影响其回收
  2. 重写 EventTarget 和 EventEmitter 两个系列的订阅和取消订阅的相关方法, 收集事件注册信息
  3. FinalizationRegistry 监听 target回收，并清除相关数据
  4. 函数比对，除了引用比对，还有内容比对

对于bind之后的函数，采用重写bind方法来获取原方法代码内容

代码结构

代码基本结构如下：

具体注释如下：

 
 
 
    
  
  
  
  1. evm 
    2. 
  
  
  
  2.     CEvents.ts // components-emitter系列,继承自 BaseEvm 
    3. 
  
  
  
  3.     ETarget.ts // EventTarget系列,继承自 BaseEvm 
    4. 
  
  
  
  4.     Events.ts  // events系列,继承自 BaseEvm 
    5. 
  
  
  
  5. BaseEvm.ts  // 核心逻辑类 
    6. 
  
  
  
  6. custom.d.ts  
    7. 
  
  
  
  7. EventEmitter.ts // 简单的事件中心 
    8. 
  
  
  
  8. EventsMap.ts // 数据存储的核心 
    9. 
  
  
  
  9. index.ts // 入口文件 
    10. 
  
  
  
  10. types.ts // 类型申请 
    11. 
  
  
  
  11. util.ts // 工具类 
    12.

核心实现

EventsMap.ts

负责数据的存储和基本的统计。

数据存储结构：(双层Map)

 
 
 
    
  
  
  
  1.  Map, Map[]>>(); 
    2. 
  
  
  
  2.   
    3. 
  
  
  
  3. interface EventsMapItem { 
    4. 
  
  
  
  4.     listener: WeakRef; 
    5. 
  
  
  
  5.     options: O 
    6. 
  
  
  
  6. } 
    7.

内部结构的大纲如下：

方法都很好理解，大家可能注意到了，有些方法后面跟着byTarget的字样，那是因为 其内部采用Map存储，但是key的类型是弱引用WeakRef。

我们增加和删除事件监听的时候，传入的对象肯定是普通的target对象，需要多经过一个步骤，通过target来查到其对应的key，这就是byTarget要表达的意思。

还是罗列一些方法的作用：

  • getKeyFromTarget

通过target对象获得键

  • keys

获得所有弱引用的键值

  • addListener

添加监听函数

  • removeListener

删除监听函数

  • remove

删除某个键的所有数据

  • removeByTarget

通过target删除某个键的所有数据

  • removeEventsByTarget

通过target删除某个键某个事件类型的所有数据

  • hasByTarget

通过target查询是否有某个键

  • has

是否有某个键

  • getEventsObj

获得某个target的所有事件信息

  • hasListener

某个target是否存在某个事件监听函数

  • getExtremelyItems

获得高危的事件监听函数信息

  • get data

获得数据

BaseEVM

内部结构的大纲如下：

核心实现就是watch和cancel，继承BaseEVM并重写这两个方法，你就可以获得一个新的系列。

统计的两个核心方法就是 statistics 和 getExtremelyItems。

还是罗列一些方法的作用：

  • innerAddCallback

监听事件函数的添加，并收集相关信息

  • innerRemoveCallback

监听事件函数的添加，并清理相关信息

  • checkAndProxy

检查并执行代理

  • restoreProperties

恢复被代理属性

  • gc

如果可以，执行垃圾回收

  • #getListenerContent

统计时，获取函数内容

  • #getListenerInfo

统计时，获得函数信息,主要是name和content。

  • statistics

统计所有事件监听函数信息。

  • #getExtremelyListeners

统计高危事件

  • getExtremelyItems

基于#getExtremelyListeners汇总高危事件信息。

  • watch

执行监听，需要被重写的方法

  • cancel

取消监听，需要被重写的方法

  • removeByTarget

清理某个对象的所有数据

  • removeEventsByTarget

清理某个对象某类类型的事件监听

ETargetEVM

我们已经提到过，实际上已经实现了三个系列，我们就以ETargetEVM为例，看看怎么通过继承和重写获得对某个系列事件监听的收集和统计。

核心就是重写watch和cancel，分别对应了代理和取消相关代理

checkAndProxy是核心，其封装了代理过程, 通过自定义第二个参数(函数)，过滤数据。

就这么简单

 
 
 
    
  
  
  
  1. const DEFAULT_OPTIONS: BaseEvmOptions = { 
    2. 
  
  
  
  2.     isInWhiteList: boolenFalse, 
    3. 
  
  
  
  3.     isSameOptions: isSameETOptions 
    4. 
  
  
  
  4. } 
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6. const ADD_PROPERTIES = ["addEventListener"]; 
    7. 
  
  
  
  7. const REMOVE_PROPERTIES = ["removeEventListener"]; 
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9. /** 
    10. 
  
  
  
  10.  * EVM for EventTarget 
    11. 
  
  
  
  11.  */ 
    12. 
  
  
  
  12. export default class ETargetEVM extends BaseEvm { 
    13. 
  
  
  
  13.  
    14. 
  
  
  
  14.     protected orgEt: any; 
    15. 
  
  
  
  15.     protected rpList: { 
    16. 
  
  
  
  16.         proxy: object; 
    17. 
  
  
  
  17.         revoke: () => void; 
    18. 
  
  
  
  18.     }[] = []; 
    19. 
  
  
  
  19.     protected et: any; 
    20. 
  
  
  
  20.  
    21. 
  
  
  
  21.     constructor(options: BaseEvmOptions = DEFAULT_OPTIONS, et: any = EventTarget) { 
    22. 
  
  
  
  22.         super({ 
    23. 
  
  
  
  23.             ...DEFAULT_OPTIONS, 
    24. 
  
  
  
  24.             ...options 
    25. 
  
  
  
  25.         }); 
    26. 
  
  
  
  26.  
    27. 
  
  
  
  27.         if (et == null || !isObject(et.prototype)) { 
    28. 
  
  
  
  28.             throw new Error("参数et的原型必须是一个有效的对象") 
    29. 
  
  
  
  29.         } 
    30. 
  
  
  
  30.         this.orgEt = { ...et }; 
    31. 
  
  
  
  31.         this.et = et; 
    32. 
  
  
  
  32.  
    33. 
  
  
  
  33.     } 
    34. 
  
  
  
  34.  
    35. 
  
  
  
  35.     #getListenr(listener: Function | ListenerWrapper) { 
    36. 
  
  
  
  36.         if (typeof listener == "function") { 
    37. 
  
  
  
  37.             return listener 
    38. 
  
  
  
  38.         } 
    39. 
  
  
  
  39.         return null; 
    40. 
  
  
  
  40.     } 
    41. 
  
  
  
  41.  
    42. 
  
  
  
  42.     #innerAddCallback: EVMBaseEventListener = (target, event, listener, options) => { 
    43. 
  
  
  
  43.         const fn = this.#getListenr(listener) 
    44. 
  
  
  
  44.         if (!isFunction(fn as Function)) { 
    45. 
  
  
  
  45.             return; 
    46. 
  
  
  
  46.         } 
    47. 
  
  
  
  47.         return super.innerAddCallback(target, event, fn as Function, options); 
    48. 
  
  
  
  48.     } 
    49. 
  
  
  
  49.  
    50. 
  
  
  
  50.     #innerRemoveCallback: EVMBaseEventListener = (target, event, listener, options) => { 
    51. 
  
  
  
  51.         const fn = this.#getListenr(listener) 
    52. 
  
  
  
  52.         if (!isFunction(fn as Function)) { 
    53. 
  
  
  
  53.             return; 
    54. 
  
  
  
  54.         } 
    55. 
  
  
  
  55.         return super.innerRemoveCallback(target, event, fn as Function, options); 
    56. 
  
  
  
  56.     } 
    57. 
  
  
  
  57.  
    58. 
  
  
  
  58.  
    59. 
  
  
  
  59.     watch() { 
    60. 
  
  
  
  60.         super.watch(); 
    61. 
  
  
  
  61.         let rp; 
    62. 
  
  
  
  62.         // addEventListener  
    63. 
  
  
  
  63.         rp = this.checkAndProxy(this.et.prototype, this.#innerAddCallback, ADD_PROPERTIES); 
    64. 
  
  
  
  64.         if (rp !== null) { 
    65. 
  
  
  
  65.             this.rpList.push(rp); 
    66. 
  
  
  
  66.         } 
    67. 
  
  
  
  67.         // removeEventListener 
    68. 
  
  
  
  68.         rp = this.checkAndProxy(this.et.prototype, this.#innerRemoveCallback, REMOVE_PROPERTIES); 
    69. 
  
  
  
  69.         if (rp !== null) { 
    70. 
  
  
  
  70.             this.rpList.push(rp); 
    71. 
  
  
  
  71.         } 
    72. 
  
  
  
  72.  
    73. 
  
  
  
  73.         return () => this.cancel(); 
    74. 
  
  
  
  74.     } 
    75. 
  
  
  
  75.  
    76. 
  
  
  
  76.     cancel() { 
    77. 
  
  
  
  77.         super.cancel(); 
    78. 
  
  
  
  78.         this.restoreProperties(this.et.prototype, this.orgEt.prototype, ADD_PROPERTIES); 
    79. 
  
  
  
  79.         this.restoreProperties(this.et.prototype, this.orgEt.prototype, REMOVE_PROPERTIES); 
    80. 
  
  
  
  80.         this.rpList.forEach(rp => rp.revoke()); 
    81. 
  
  
  
  81.         this.rpList = []; 
    82. 
  
  
  
  82.     } 
    83. 
  
  
  
  83. } 
    84.

总结

  • 单独设计了一套存储结构EventsMap
  • 把基础的逻辑封装在BaseEVM
  • 通过继承重写某些方法，从而可以满足不同的事件监场景。

本文名称：事件监听函数的内存泄漏，都给我退散吧！
当前路径：http://www.stwzsj.com/qtweb/news27/8477.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

ChatGPT知识

分类信息网站

成都茶叶销售　　 　网站建设　　 　网站空间　　 　成都网站推广　　 　网络营销公司　　 　网络营销推广　　 　崇州网站建设　　 　成都托管服务器　　 　成都全网营销　　 　成都户外广告牌设计　　 　网站托管运营　　 　云服务器　　 　美美搬家　　 　成都网站建设推广　　 　四川内江电信机房　　 　成都网站维护　　 　联通机柜租用　　 　江油做网站　　 　四川搅拌罐车　　 　川西大数据中心