前端内存泄漏及前端如何利用调试工具查看内存泄露

内存泄漏又叫做Detached DOM node(脱离文档的节点)

javascript垃圾回收机制常见的两种方法:

  • 引用计数算法
  • 标记清除算法

引用计数法

IE使用的是引用计数算法, 这种方法无法解决循环引用的垃圾回收问题, 容易造成内存泄漏

那么什么是引用计数算法呢? 什么又是循环引用问题呢?

所谓引用计数即, 我们有一个变量每次被引用GC机制就会给这个变量计数加一, 当引用减少就计数减一, 如果计数为零, 在下一次垃圾回收时, 就会被释放掉.

前端内存泄漏及前端如何利用调试工具查看内存泄露_第1张图片

 当存在循环引用的情况

前端内存泄漏及前端如何利用调试工具查看内存泄露_第2张图片

 这就是循环引用, 所以垃圾回收机制并不会对obj, obj2进行内存释放, 变量常驻内存, 导致内存泄漏.

 标记清除法

堆内存中的对象没有人引用他们, 但是他们还占用内存, 这时候垃圾回收就会销毁他们了, V8引擎的垃圾回收机制不仅销毁掉堆内存中无人引用的空间, 还会对堆内存进行碎片整理

前端内存泄漏及前端如何利用调试工具查看内存泄露_第3张图片

 常见的内存泄漏情况

//一 

window对象, 是浏览器中javascript的顶级对象, 它的存在贯穿这个javascript的生命周期, 如果我们不小心把庞大又用不上的变量挂到了window对象上, 将会造成内存泄漏

 //二

滥用闭包

//三

没及时清理定时器

//四

给某个dom节点绑定了很多事件, 使用过程中dom节点被移除但是被释放内存

前端内存泄漏及前端如何利用调试工具查看内存泄露_第4张图片 移除了box元素后, box仍然占用内存, 这也是内存泄漏, 因为box用不到了但是没有释放内存

怎么使用调试工具查看

前端内存泄漏及前端如何利用调试工具查看内存泄露_第5张图片

前端内存泄漏及前端如何利用调试工具查看内存泄露_第6张图片

你可能感兴趣的:(javascript,前端)