性能优化加持之WeakMap

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情

前情提要

• 客户终端内存小，很多开发者会说放弃这个用户，或者让这个用户更换大内存终端等...
  • 但是往往事与愿违，兼容需求是公司要求的，是否更换终端是客户自己的意愿，我们无法左右...
• 需求已经下达，该用什么方案解决呢？
  • 我们首先知道js在运行的过程中会不断的生成变量存储在内存里。这个时候你可能会说不是有垃圾回收机制吗？
  • 我们要知道js是单线程语言，同一时间只能做一件事，所以如果在用户使用的过程中去执行垃圾回收操作，则会阻塞用户的操作执行。所以垃圾回收机制会在用户操作空闲的时候才会执行。
  • 那么如果用户一直高频操作，导致内存占用居高不下，这个时候我们有什么办法进行优化呢？

优化方案：weakMap

• map属于ES6中新增的数据结构，类似与数组，可以用任何类型作为key值，且成员唯一。属于强引用。如果被其他变量引用，则不会被垃圾回收器回收，当创建的多了便会有内存泄漏的风险。
• weakMap只能以对象作为key值(null除外)，这点与map数据结构不太一样。属于ES6的新特性。属于弱引用，一旦没有了引用便会被垃圾回收器立即回收。
• 现在做个小小的对比
  • Map代码

    let obj = { aa: 1 };
    const a = new Map();
    a.set(obj, 10086);
    console.log(a);
    obj = null;
    console.log(a.size);console.log(a)
    

  • Map结果
  • WeakMap代码: 因为WeakMap只有has，get,set,delete方法且没有任何属性。所以只能通过has来验证

    let obj = { aa: 1 }
    const a = new WeakMap();
    a.set(obj, 10086);
    console.log(a);
    obj = null;
    console.log(a.has(a));
    console.log(a.has({ aa: 1 }))
    

  • WeakMap结果