JS内存知识点汇总

废话片:

  讲到内存可以联想到很多,内存分配管理,内存回收机制,内存泄露等等,今天我们就来答题的总结一下。

正文片:

1.内存分配管理

2.内存回收机制

3.内存泄露

一、内存分配管理

  首先让我们看看内存的分配机制吧。其实在所有的语言中内存的分配都是一样的,首先在我们需要的时候记性内存的分配,然后是使用分配的内存,最后是当我们不适用的时候收回内存块。

  问题:在js中是如何分配内存的呢,什么时候分配呢?

  回答:在js中当我们定义了变量的时候实际上就为我们分配好了内存的,这样将会省去我们的很多麻烦。了如如下:

 1 // 给数值变量分配内存
 2 var n = 123;
 3 // 给字符串分配内存
 4 var s = "azerty";
 5
 6 // 给对象及其包含的值分配内存
 7 var o = {
 8   a: 1,
 9   b: null
10 };
11
12 // 给数组及其包含的值分配内存(就像对象一样)
13 var a = [1, null, "abra"];
14
15 // 给函数(可调用的对象)分配内存
16 function f(a){
17   return a + 2;
18 }
19
20 // 函数表达式也能分配一个对象
21 someElement.addEventListener(‘click‘, function(){
22   someElement.style.backgroundColor = ‘blue‘;
23 }, false);

     当然,还有其他的也写情况实际上也是需要系统为我们分配内存的,例如当我们使用构造函数来定义一个新的对象的时候,我们是需要对新的对象讨要空间的。

1 var d = new Date(); // 分配一个 Date 对象
2 var e = document.createElement(‘div‘); // 分配一个 DOM 元素

     有的时候我们需要对于数据进行组合或是在原有的数据上进行值的设置,这时系统也会为我们新分配一块内存区域。

 1 var s = "azerty";
 2 var s2 = s.substr(0, 3); // s2 是一个新的字符串
 3 // 因为字符串是不变量
 4 // JavaScript 可能没有分配内存
 5 // 但只是存储了 [0-3] 的范围。
 6
 7 var a = ["ouais ouais", "nan nan"];
 8 var a2 = ["generation", "nan nan"];
 9 var a3 = a.concat(a2);
10 // 新数组有四个元素,是 a 连接 a2 的结果

  问题:内存空间使用?

  回答:当系统为我们分配了内存空间之后我们实际上在每一次对于当前的值得操作的时候都是使用了这一内存块,读取和写入操作将会是我们对于内存块的基础操作。

二、内存回收机制

  问题:js的内存是如何回收的?

  回答:js是具有自动垃圾收集机制的,这种机制会自动的跟踪每一个变量的动向,并判断当前的变量是否还有存在的必要,然后将不必要的变量所占用的内存进行收回。对于这样的收回机制,实际真正的运用起来是有两种不同的方法来实现的。详情见如下:

  1.方法一:标记清除算法

    这一算法是为进入环境中的变量标记一个“进入环境”的标记。逻辑上讲呢,当我们的变量进入环境的时,变量实际上是不应该被删除的,因为上下文中可能会用到当前的变量进行相关的逻辑演算,而当变量离开环境的时候,竟会为其标记成为“离开环境”的状态。

  2.方法二:引用计数

    其寓意在于耿总记录每一个变量的调用的次数。当变量的计数次数便成为0的时候其实也就是说明我们将不会是在方位当前的变量了,这时候就是需要把内存空间收回的时候了。

  以上其实就是最为常用的内存回收机制,当然我们的内存回收机制是在一定的时间间隔后,自动的运行的,每次都会搜寻是否有变量可以收回,并回收内存。

三、内存泄漏

  内存泄漏是指在我们编码的过程中,有的某一些操作是的当前的内存块即使不在会被使用到,释放机制也因为辨别不出(bug啦)是否需要释放而使得这一不需要的变量得以保留。虽然对于有内存回收机制的js和java是很少有这种情况发生的。但是。。。你懂得,下面就来看一看有哪些情况会导致这一情况

  1、当我们在IE中使用.onclick的时候如果我们没有手动的删除这一事件则会造成和内存泄漏(IE果然好坑啊)

 1 document.getElementById("xxx").onclick = fuction(){};
 2 //在IE中是不会自动的回收内存的。
 3
 4 //改进方法
 5 document.getElementById("xxx").onclick = fuction(){
 6     document.getElementById("xxx").onclick = null;
 7     .......
 8 };
 9
10 //或者使用
11 document.getElementById("xxx").addEventListener(......);

  2、当我们对于DOM对象使用循环引用的情况下,js的回收机制就没有办法回收了。

1 var a = document.getElementById("xxx");
2 a.r = a;

  3、必报在编写过程中的时候是经常要使用到的一个概念。但是但我们在闭包中定义了响应时间的时候就会造成一定量的内存占用。

1 function bindEvent()
2 {
3     var obj=document.createElement("XXX");
4     obj.onclick=function(){
5         //Even if it‘s a empty function
6     }
7 }//这样闭包内的obj元素回因为其中的onclick时间的绑定而没有办法进行释放,这样就造成了运行时的内存浪费。

  4、某些代码不严谨可能导致内存泄漏

1 a = {p: {x: 1}};
2 b = a.p;
3 delete a.p;//a中的元素实际上已已经删除了,可是被删除的元素并没有清空,因为外部中变量b指向了这一元素数据。这样就可能造成内存的浪费

  5、最后,我们在来黑IE一把,实际上在IE中有一些DOM操作或者是属性转化的操作会造成相关的内存泄漏的风险,所以说我们在编写适配IE浏览器的时候还是要更为的注意一些的啊。

  内存泄漏的情况绝对不仅仅是我上面说的着一些,在我们的平时编写代码的过程中我们可以找到更多的这样的bug并对其进行相关的优化,将会使得我们的代码更为的良好而健壮。

  

时间: 2024-10-19 10:43:09

JS内存知识点汇总的相关文章

赵雅智:js知识点汇总

赵雅智:js知识点汇总,布布扣,bubuko.com

JS重要知识点

这里列出了一些JS重要知识点(不全面,但自己感觉很重要).彻底理解并掌握这些知识点,对于每个想要深入学习JS的朋友应该都是必须的. 讲解还是以示例代码搭配注释的形式,这里做个小目录: JS代码预解析原理(包括三个段落): 函数相关(包括 函数传参,带参数函数的调用方式,闭包): 面向对象(包括 对象创建.原型链,数据类型的检测,继承). JS代码预解析原理 /****************** JS代码预解析原理 ******************/ /* JS代码预解析.变量作用域.作用域

【数据库】数据库面试知识点汇总

转自:https://www.cnblogs.com/wenxiaofei/p/9853682.html 数据库面试知识点汇总 一.基本概念 1.主键.外键.超键.候选键 超键:在关系中能唯一标识元组的属性集称为关系模式的超键.一个属性可以为作为一个超键,多个属性组合在一起也可以作为一个超键.超键包含候选键和主键. 候选键:是最小超键,即没有冗余元素的超键. 主键:数据库表中对储存数据对象予以唯一和完整标识的数据列或属性的组合.一个数据列只能有一个主键,且主键的取值不能缺失,即不能为空值(Nul

C++知识点汇总文档

C++知识点汇总文档 持续更新 朝花夕拾. 不写下来, 仿佛一切都没了见证. 编程来源于生活, 无非是对现实的抽象. 整理这份文档的时候我才发现, 自己对C++的了解无非是冰山一角 另, C++11真的太恐怖了, 新"特性"真的是"恐怖如斯" 另注: 本人才疏学浅, 难免有错漏之处, 还望不吝赐教 1.基本概念 内存管理 C++中的内存划分(内容来自博客): 堆 由用户使用new delete关键字管理的内存区域 栈 栈中用来存放临时变量, 比如函数中的局部变量,

js基础知识点收集

js基础知识点收集 js常用基本类型 function show(x) { console.log(typeof(x)); // undefined console.log(typeof(10)); // number console.log(typeof('abc')); // string console.log(typeof(true)); // boolean console.log(typeof([])); // object console.log(typeof(function (

js基础知识点总结

js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避免全局变量和方法(命名空间,闭包,面向对象),模块化(seaJs,requireJs) 常用内部类:Data Array Math String HTML属性,CSS属性HTML:属性.HTML属性="值":CSS:对象.style.CSS属性="值"; class和f

CodeIgniter框架——知识点汇总

NO1.学习要点: 一.CodeIgniter 框架的简介 二.CodeIgniter 框架的安装 三.CodeIgniter 框架的目录结构分析 四.CodeIgniter 框架是如何工作的? 五.CodeIgniter 框架中的控制器.视图.模型及数据库操作 六.CodeIgniter 框架中辅助函数.类库.适配器的学习 七.…… NO2. 一.CodeIgniter 是什么? 1.CodeIgniter 是一个应用程序框架 CodeIgniter 是一个为用 PHP 编写网络应用程序的人员

《正则表达式》知识点汇总摘录

开园一个月了,但一直没有抽出多少时间,就算有时间,也不知道怎么组织语言记(不是写,是记,写是一个创造的过程,像我这等程序猿,猿嘴吐不出象牙!)点东西!翻翻过去手头整理的一些知识点杂记,然后再结合网上的一些,今天对正则表达式在做一个个人的知识汇总摘录吧!程序员都是共产主义者,一点不假!大部分时候我们只是互联网的搬运工,堆砌者(扯远了,当然成为互联网创造者一直使我们的目标!). 正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个"规则字符串&quo

Node.js内存泄漏分析

在极客教育出版了一个视频是关于<Node.js 内存泄漏分析>,本文章主要是从内容上介绍如何来处理Node.js内存异常问题.如果希望学习可前往极客学院: 本文章的关键词 - 内存泄漏 - 内存泄漏检测 - GC分析 - memwatch 文章概要 由于内存泄漏在Node.js中非常的常见,可能在浏览器中应用javascript时,对于其内存泄漏不是特别敏感,但作为服务器语言运行时,你就不得不去考虑这些问题.由于很小的逻辑可能导致服务器运行一天或者一个星期甚至一个月才会让你发现内存不断上涨,而