日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
事件監(jiān)聽(tīng)函數(shù)的內(nèi)存泄漏，都給我退散吧！

[[427730]]

本文轉(zhuǎn)載自微信公眾號(hào)「云的程序世界」，作者云的世界。轉(zhuǎn)載本文請(qǐng)聯(lián)系云的程序世界公眾號(hào)。

成都創(chuàng)新互聯(lián)致力于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作,成都網(wǎng)站設(shè)計(jì),集團(tuán)網(wǎng)站建設(shè)等服務(wù)標(biāo)準(zhǔn)化，推過(guò)標(biāo)準(zhǔn)化降低中小企業(yè)的建站的成本，并持續(xù)提升建站的定制化服務(wù)水平進(jìn)行質(zhì)量交付，讓企業(yè)網(wǎng)站從市場(chǎng)競(jìng)爭(zhēng)中脫穎而出。 選擇成都創(chuàng)新互聯(lián)，就選擇了安全、穩(wěn)定、美觀的網(wǎng)站建設(shè)服務(wù)！

前言

內(nèi)存泄漏是個(gè)很?chē)?yán)肅的問(wèn)題，可是迄今也沒(méi)有一個(gè)非常有效的排查方案，本方案就是針對(duì)性的單點(diǎn)突破。

工作中，我們會(huì)對(duì)window, DOM節(jié)點(diǎn)，WebSoket, 或者單純的事件中心等注冊(cè)事件監(jiān)聽(tīng)函數(shù), 添加了，沒(méi)有移除，就會(huì)導(dǎo)致內(nèi)存泄漏，如何預(yù)警，收集，排查這種問(wèn)題呢?

本文是代碼篇，主要講使用和實(shí)現(xiàn)。

源碼和demo

源碼：事件分析vem[2]

項(xiàng)目?jī)?nèi)部有豐富的例子。

核心功能

我們解決問(wèn)題的時(shí)機(jī)無(wú)非為 事前， 事中， 事后。

我們這里主要是 事前 和 事后。

  • 事件監(jiān)聽(tīng)函數(shù)添加前進(jìn)行預(yù)警
  • 事件監(jiān)聽(tīng)函數(shù)添加后進(jìn)行統(tǒng)計(jì)

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

1.同一事件監(jiān)聽(tīng)函數(shù)從屬對(duì)象

事件監(jiān)聽(tīng)總是要注冊(cè)到響應(yīng)的對(duì)象上的, 比如下面代碼的window, socket, emitter都是事件監(jiān)聽(tīng)函數(shù)的從屬對(duì)象、

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

2.同一事件監(jiān)聽(tīng)函數(shù)類型

這個(gè)比較好理解，比如window的 message, resize等，Audio的 play等等

3.同一事件監(jiān)聽(tīng)函數(shù)內(nèi)容

這里注意一點(diǎn)，事件監(jiān)聽(tīng)函數(shù)相同，分兩種：

  • 函數(shù)引用相同
  • 函數(shù)內(nèi)容相同

4.同一事件監(jiān)聽(tīng)函數(shù)選項(xiàng)

這個(gè)可選項(xiàng)，EventTarget系列有這些選項(xiàng)，其他系列沒(méi)有。

選項(xiàng)不同，添加和刪除的時(shí)候結(jié)果就可能不通。

 
 
 
    
  
  
  
  1. window.addEventListener("resize",onResize) 
    2. 
  
  
  
  2. // 移除事件監(jiān)聽(tīng)函數(shù)onResize失敗 
    3. 
  
  
  
  3. window.removeEventListener("resize",onResize, true) 
    4.

預(yù)警

事件監(jiān)聽(tīng)函數(shù)添加前，比對(duì)四同屬性的事件監(jiān)聽(tīng)函數(shù)，如果有重復(fù)，進(jìn)行報(bào)警。

統(tǒng)計(jì)高危監(jiān)聽(tīng)事件函數(shù)

最核心的功能。

統(tǒng)計(jì)事件監(jiān)聽(tīng)函數(shù)從屬對(duì)象的所有事件信息，輸出滿足 四同屬性 的事件監(jiān)聽(tīng)函數(shù)。如果有數(shù)據(jù)輸出，極大概率，你內(nèi)存泄漏了。

統(tǒng)計(jì)全部的事件監(jiān)聽(tīng)函數(shù)

統(tǒng)計(jì)事件監(jiān)聽(tīng)函數(shù)從屬對(duì)象的所有事件信息， 可以用于分析業(yè)務(wù)邏輯。

一覽你添加了多少事件, 是不是有些應(yīng)該不存的，還存在呢?

基本使用

初始化參數(shù)

內(nèi)置三個(gè)系列：

 
 
 
    
  
  
  
  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.

當(dāng)然，你可以繼承BaseEvm, 自定義出新的系列，因?yàn)樯厦娴娜齻€(gè)系列也都是繼承BaseEvm而來(lái)。

最主要的初始化參數(shù)也就是 options

  • options.isSameOptions

是一個(gè)函數(shù)。主要是用來(lái)判定事件監(jiān)聽(tīng)函數(shù)的選項(xiàng)。

  • options.isInWhiteList

是一個(gè)函數(shù)。主要用來(lái)判定是否收集。

  • options.maxContentLength

是一個(gè)數(shù)字。你可以限定統(tǒng)計(jì)時(shí)，需要截取的函數(shù)內(nèi)容的長(zhǎng)度。

EventTarget系列

  • EventTarget[3]
  • DOM節(jié)點(diǎn) + windwow + document
  • XMLHttpRequest 其繼承于 EventTarget
  • 原生的WebSocket 其繼承于 EventTarget
  • 其他繼承自EventTarget的對(duì)象

基本使用

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2.  
    3.

 

效果截圖

截圖來(lái)自我對(duì)實(shí)際項(xiàng)目的分析 , window對(duì)象上message消息的重復(fù)添加， 次數(shù)高達(dá)10

events[4] 系列

  • Nodejs 標(biāo)準(zhǔn)的 events[5]
  • MQTT 基于 events[6]庫(kù)
  • socket.io 基于 events[7]庫(kù)

基本使用

 
 
 
    
  
  
  
  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.

效果截圖

截圖來(lái)自我對(duì)實(shí)際項(xiàng)目的分析 ,APP_ACT_COM_HIDE_ 系列事件重復(fù)添加

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.

效果截圖

事件分析的基本思路

上篇總結(jié)的思路：

  1. WeakRef建立和target對(duì)象的關(guān)聯(lián)，并不影響其回收
  2. 重寫(xiě) EventTarget 和 EventEmitter 兩個(gè)系列的訂閱和取消訂閱的相關(guān)方法, 收集事件注冊(cè)信息
  3. FinalizationRegistry 監(jiān)聽(tīng) target回收，并清除相關(guān)數(shù)據(jù)
  4. 函數(shù)比對(duì)，除了引用比對(duì)，還有內(nèi)容比對(duì)

對(duì)于bind之后的函數(shù)，采用重寫(xiě)bind方法來(lái)獲取原方法代碼內(nèi)容

代碼結(jié)構(gòu)

代碼基本結(jié)構(gòu)如下：

具體注釋如下：

 
 
 
    
  
  
  
  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 // 簡(jiǎn)單的事件中心 
    8. 
  
  
  
  8. EventsMap.ts // 數(shù)據(jù)存儲(chǔ)的核心 
    9. 
  
  
  
  9. index.ts // 入口文件 
    10. 
  
  
  
  10. types.ts // 類型申請(qǐng) 
    11. 
  
  
  
  11. util.ts // 工具類 
    12.

核心實(shí)現(xiàn)

EventsMap.ts

負(fù)責(zé)數(shù)據(jù)的存儲(chǔ)和基本的統(tǒng)計(jì)。

數(shù)據(jù)存儲(chǔ)結(jié)構(gòu)：(雙層Map)

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

內(nèi)部結(jié)構(gòu)的大綱如下：

方法都很好理解，大家可能注意到了，有些方法后面跟著byTarget的字樣，那是因?yàn)?其內(nèi)部采用Map存儲(chǔ)，但是key的類型是弱引用WeakRef。

我們?cè)黾雍蛣h除事件監(jiān)聽(tīng)的時(shí)候，傳入的對(duì)象肯定是普通的target對(duì)象，需要多經(jīng)過(guò)一個(gè)步驟，通過(guò)target來(lái)查到其對(duì)應(yīng)的key，這就是byTarget要表達(dá)的意思。

還是羅列一些方法的作用：

  • getKeyFromTarget

通過(guò)target對(duì)象獲得鍵

  • keys

獲得所有弱引用的鍵值

  • addListener

添加監(jiān)聽(tīng)函數(shù)

  • removeListener

刪除監(jiān)聽(tīng)函數(shù)

  • remove

刪除某個(gè)鍵的所有數(shù)據(jù)

  • removeByTarget

通過(guò)target刪除某個(gè)鍵的所有數(shù)據(jù)

  • removeEventsByTarget

通過(guò)target刪除某個(gè)鍵某個(gè)事件類型的所有數(shù)據(jù)

  • hasByTarget

通過(guò)target查詢是否有某個(gè)鍵

  • has

是否有某個(gè)鍵

  • getEventsObj

獲得某個(gè)target的所有事件信息

  • hasListener

某個(gè)target是否存在某個(gè)事件監(jiān)聽(tīng)函數(shù)

  • getExtremelyItems

獲得高危的事件監(jiān)聽(tīng)函數(shù)信息

  • get data

獲得數(shù)據(jù)

BaseEVM

內(nèi)部結(jié)構(gòu)的大綱如下：

核心實(shí)現(xiàn)就是watch和cancel，繼承BaseEVM并重寫(xiě)這兩個(gè)方法，你就可以獲得一個(gè)新的系列。

統(tǒng)計(jì)的兩個(gè)核心方法就是 statistics 和 getExtremelyItems。

還是羅列一些方法的作用：

  • innerAddCallback

監(jiān)聽(tīng)事件函數(shù)的添加，并收集相關(guān)信息

  • innerRemoveCallback

監(jiān)聽(tīng)事件函數(shù)的添加，并清理相關(guān)信息

  • checkAndProxy

檢查并執(zhí)行代理

  • restoreProperties

恢復(fù)被代理屬性

  • gc

如果可以，執(zhí)行垃圾回收

  • #getListenerContent

統(tǒng)計(jì)時(shí)，獲取函數(shù)內(nèi)容

  • #getListenerInfo

統(tǒng)計(jì)時(shí)，獲得函數(shù)信息,主要是name和content。

  • statistics

統(tǒng)計(jì)所有事件監(jiān)聽(tīng)函數(shù)信息。

  • #getExtremelyListeners

統(tǒng)計(jì)高危事件

  • getExtremelyItems

基于#getExtremelyListeners匯總高危事件信息。

  • watch

執(zhí)行監(jiān)聽(tīng)，需要被重寫(xiě)的方法

  • cancel

取消監(jiān)聽(tīng)，需要被重寫(xiě)的方法

  • removeByTarget

清理某個(gè)對(duì)象的所有數(shù)據(jù)

  • removeEventsByTarget

清理某個(gè)對(duì)象某類類型的事件監(jiān)聽(tīng)

ETargetEVM

我們已經(jīng)提到過(guò)，實(shí)際上已經(jīng)實(shí)現(xiàn)了三個(gè)系列，我們就以ETargetEVM為例，看看怎么通過(guò)繼承和重寫(xiě)獲得對(duì)某個(gè)系列事件監(jiān)聽(tīng)的收集和統(tǒng)計(jì)。

核心就是重寫(xiě)watch和cancel，分別對(duì)應(yīng)了代理和取消相關(guān)代理

checkAndProxy是核心，其封裝了代理過(guò)程, 通過(guò)自定義第二個(gè)參數(shù)(函數(shù))，過(guò)濾數(shù)據(jù)。

就這么簡(jiǎn)單

 
 
 
    
  
  
  
  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("參數(shù)et的原型必須是一個(gè)有效的對(duì)象") 
    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.

總結(jié)

  • 單獨(dú)設(shè)計(jì)了一套存儲(chǔ)結(jié)構(gòu)EventsMap
  • 把基礎(chǔ)的邏輯封裝在BaseEVM
  • 通過(guò)繼承重寫(xiě)某些方法，從而可以滿足不同的事件監(jiān)場(chǎng)景。

本文題目：事件監(jiān)聽(tīng)函數(shù)的內(nèi)存泄漏，都給我退散吧！
URL標(biāo)題：http://m.5511xx.com/article/codhhje.html