其实不知道怎么起这篇blog的题目了 其实只要涉及的内容是内存泄漏的问题,也有内存管理的一些知识,把学习的过程拿来分享

垃圾回收机制

js具有自动的垃圾收集机制,它会找出那些不在继续使用的变量然后释放其内存,垃圾收集器会按照固定的时间间隔周期性的执行这一操作


我们通过下面的例子来理解垃圾收集器的执行过程

<div id="test">sss</div>
<script type="text/javascript">
function test() {
this.elem = document.getElementById("test"); }
var a = new test();
document.body.innerHTML = "";
console.log(a.elem);//<div id="test">sss</div>
console.log(document.getElementById("test"));//null
a = new test();
console.log(a.elem);//null
</script>

在上面的例子中,我们定义了一个构造函数,它返回的对象中有elem属性指向页面中id为test的元素,我们创建了一个变量a指向构造函数返回的对象,然后在父元素中删除这个id为test的元素,但是我们通过a.elem属相仍然能获取到这个id为test的div 但是我们通过正常的document.getElementById("test")已经无法获取到这个元素了,此时这个div元素只存在内存中,是因为这个div被这个elem引用着,所以它不会被垃圾回收器回收,仍然存在内存中.当我们重新将变量a指向另一个返回的引用值的时候,此时不存在对这个div的引用了,这段内存就会被回收,第二次输出a.elem输出为null是因为页面中不存在这个id为test的元素

闭包经常会导致环装的引用

<div id="test">sss</div>
<script type="text/javascript">
function test() {
var div = document.getElementById("test");
div.onclick = function() {
console.log(1);
}
}
test();

在上面的例子中 有这样一个函数,它的功能是为页面中id为test的元素绑定click事件,这个click事件(function)绑定后,就存在了js的运行环境(内存中),它引用了一个局部的变量div,这样当这个函数运行完后,这个局部变量div所占据的内存不会被垃圾回收器回收,会存在在内存中,这样就会导致内存的泄漏

仔细理解闭包:

  function test() {
var a = 100;
var b = 200;
function say(){ }
return say;
} var aa = test();

在上面的例子中,我们定义了一个方法,它有两个局部的变量 a b 和一个方法say并且通过return语句返回了这个方法,这就构成了一个闭包.这个时候say存在内存中,它引用的父级作用域的变量也会存在内存中,也就是a b 也同时存在内存中,(js的解释器无法优化的知道say方法到底使用了父级作用域的哪些变量和方法,所以它将父级作用域的所有变量和方法都保存在内存中,不被垃圾回收器回收),这也造成内存的泄漏

管理内存

系统分配给浏览器的内存是存在一定的限制的,我们必须更好的管理好这些内存才能更好的使我们的网页性能最大化,目标就是尽可能的保存必要的数据,将不必要的数据通过解除引用,设置其为null.这样做的目的是让这个变量脱离当前的执行环境,以便在垃圾回收器下次运行的时候对这个变量的内存进行回收

  function test() {
var a = 100;
var b = 200;
function say(){ }
var a = null;
var b = null;
return say;
} var aa = test();

上面的例子就将a b脱离的执行环境,在垃圾回收器下次运行的时候,会被回收

参考 JavaScript高级程序设计                memory leaks

2016 5 10 事件处理中的内存问题

为什么添加事件处理程序会增加内存的占用  事件处理程序就是函数,在js中函数均是对象,对象的存在就会占用内存,如何最小化的添加事件处理程序就最大限度的提高了页面的性能 所以出现了事件委托

通过事件冒泡,在父元素处理上通过event.target来进行事件的处理

移除不需要的事件处理程序也能降低内存的占用  但是这种情况有例外的情况

    <div>
<input type="button" value="test" />
</div>

在上面的例子中,我们为button添加了事件处理程序,当获取外层的div 并且通过innerHTML将这个button移除的时候,可能会存在这个btn 和 事件处理程序还存在页面的情况 也就是这篇blog刚开始的例子,所以当我们要移除元素的时候,可以将他的事件处理程序设置为null(移除事件处理程序)

2016 6 19   贴出一篇园友的blog 讲解的很细致   javascript中对内存的一些了解  在这篇文章中引用了另一篇园友的文章  var a.x = a = {n:2}的这个问题很有意思

js 内存小记的更多相关文章

  1. JS内存泄露常见原因

    详细内容请点击 分享的笔记本-前端 开发中,我们常遇见的一些关于js内存泄露的问题,有时候我们常常会找半天找不出原因,这里给大家介绍简单便捷的方法 1.闭包上下文绑定后没有释放:   2.观察者模式在 ...

  2. Chrome JS内存泄漏排查方法(Chrome Profiles)

     原文网址:http://blog.csdn.net/kaitiren/article/details/19974269 JS内存泄漏排查方法(Chrome Profiles)   Google Ch ...

  3. Js内存泄露问题总结

    最近接受了一个Js职位的面试,问了很多Js的高级特性,才发现长时间使用已知的特性进行开发而忽略了对这门语言循序渐进的理解,包括Java我想也是一样,偶尔在Sun官方看到JDK6.0列举出来的new f ...

  4. js内存深入学习(二)

    继上一篇文章 js内存深入学习(一) 3. 内存泄漏 对于持续运行的服务进程(daemon),必须及时释放不再用到的内存.否则,内存占用越来越高,轻则影响系统性能,重则导致进程崩溃. 对于不再用到的内 ...

  5. js内存深入学习(一)

    一. 内存空间储存 某些情况下,调用堆栈中函数调用的数量超出了调用堆栈的实际大小,浏览器会抛出一个错误终止运行.这个就涉及到内存问题了. 1. 数据结构类型 栈: 后进先出(LIFO)的数据结构  堆 ...

  6. js内存空间的那点事

    由于js具有自动垃圾回收机制,导致接触js后一直没去关注js的内存分配及变量回收等原理,只是懵懂的了解用变量标记法(null)可以手动的去清除或是回收:是时候弥补这个大坑了... 垃圾回收两种方法 一 ...

  7. 转---单页面应用下的JS内存管理

    正文从这开始- 内存问题对于后端童鞋而言可能是家常便饭,特别是C++童鞋.我在实习时做过半年的c++游戏客户端开发(也是前端开发哦),也见识了各式各样的内存问题,就说说我的第一个坑,当时做个需求,就是 ...

  8. js内存空间详细图解-笔记

    原文参考http://mp.weixin.qq.com/s/NGqdjhoU3MR9LD0yH6tKIw 栈-先进后出堆-类比成书于书架(形象),只要知道Key就可以找到value 基础数据类型(Un ...

  9. JS内存空间详细图解

    JS内存空间详细图解 变量对象与堆内存 var a = 20; var b = 'abc'; var c = true; var d = { m: 20 } 因为JavaScript具有自动垃圾回收机 ...

随机推荐

  1. JSP网站开发基础总结《九》

    本篇属于附加篇,在之前的总结中给大家提到过一个关于登录状态验证的效果,当时是通过Session对象完成的,今天我查了一下,JSP为我们封装了一个用于过滤用的过滤器类Filter,通过它我们就可以非常轻 ...

  2. Hadoop官方文档翻译——MapReduce Tutorial

    MapReduce Tutorial(个人指导) Purpose(目的) Prerequisites(必备条件) Overview(综述) Inputs and Outputs(输入输出) MapRe ...

  3. (原创)详解KMP算法

    KMP算法应该是每一本<数据结构>书都会讲的,算是知名度最高的算法之一了,但很可惜,我大二那年压根就没看懂过~~~ 之后也在很多地方也都经常看到讲解KMP算法的文章,看久了好像也知道是怎么 ...

  4. jQuery中$.extend

    $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个 ...

  5. 百度地图JavaScript API覆盖物旋转时出现偏移

    在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...

  6. Windows Azure Web Site (8) 设置Web Site时区

    <Windows Azure Platform 系列文章目录> 许多已经使用Azure Web Site的用户已经发现了,Azure Web Site默认的系统时间是UTC时区. 比如我们 ...

  7. 利用ListView的基本方法实现效果

    日常的开发工作经常需要ListView作为布局的组件,而且很多时候都会遇到需要自定义ListView的情况. 也有些问题并不需要自定义的ListView,基于原生的ListView就能实现,但需要灵活 ...

  8. 阅读《LEARNING HARD C#学习笔记》知识点总结与摘要五

    本篇文章主要是总结异步编程的知识点,也是本系列的最后一篇文章,每一个知识点我都有写出示例代码,方便大家理解,若发现有误或不足之处还请指出,由于书中作者对此知识点讲解过于简单,所以在写这篇文章时本人参考 ...

  9. Java魔法堂:类加载器入了个门

    一.前言 <Java魔法堂:类加载机制入了个门>中提及整个类加载流程中只有加载阶段作为码农的我们可以入手干预,其余均由JVM处理.本文将记录加载阶段的核心组件——类加载器的相关信息,以便日 ...

  10. HBase相关

    hadoop和hbase节点添加和单独重启 有时候hadoop或hbase集群运行时间久了后,某些节点就会失效,这个时候如果不想重启整个集群(这种情况在很多情况下已经不被允许),这个时候可以单独重启失 ...