0

0

JS内存管理实例讲解

小云云

小云云

发布时间:2018-02-22 13:46:09

|

2067人浏览过

|

来源于php中文网

原创

js有完善的内存处理机制,所以之前我们不用特别的去关注这块的实现。页面不快了,刷新一下就好了;浏览器卡顿,重启一下就ok。但是随着spa和移动app的流行,以及未来可能存在的pwa的实现,js内存可能成为新的内存瓶颈。

1.什么是内存泄漏

当我们决定不再使用某些内存时,由于错误的编码,未能使得GC(Gabbage Collection)正确的将这些内存回收的情况,就是内存泄漏。

2.内存的占用,分配和回收

2.1 内存的占用

JS内存管理实例讲解
一个对象占用的内存分为直接占用内存(Shallow Size)和占用总内存(Retained Size)。

直接占用内存:对象本身占用的内存。典型的JavaScript对象都会有保留内存用来描述这个对象和存储它的直接值。一般,只有数组和字符串会有明显的直接占用内存(Shallow Size)。但字符串和数组常常会在渲染器内存中存储主要数据部分,仅仅在JavaScript对象栈中暴露一个很小的包装对象。占用总内存:直接占用内存和这个引用的依赖对象所占用的内存。

赋值和New操作都会涉及到内存的占用。

2.2 内存的分配

Chrome V8的垃圾回收(GC)算法基于Generational Collection,内存被划分为两种,分别称为Young Generation(YG)和Old Generation(OG)。

所谓Young和Old是根据他们占用的时间来划分的。内存在YG的分配和回收快而频繁,一般存在的时间很短,所以称为Young;而在OG中则慢而少发生,所以称为Old。

因为在V8中,YG的GC过程会阻塞程序,而OG的GC不会阻塞。所以通常情况下开发者更关心YG的细节。

YG又被平分为两部分空间,分别称为From和To。所有内存从To空间被分配出去,当To满时,开始触发GC,接下来细看一下。

某时刻,To已经分A、B和C分配了内存,当前它剩下一小块内存未分配出去,而From所有的内存都空闲着。

JS内存管理实例讲解

此时,一个程序需要为D分配内存,但D需要的内存大小超出了To未分配的内存,如下图。此时,触发GC,页面停止执行。
JS内存管理实例讲解

接着From和To进行对换,即原来的To空间被标志为From,From被标志为To。并且把活的变量值(例如B)标志出来,而”垃圾“(例如AC)未被标志,它们将会被清掉。
JS内存管理实例讲解

活的B会被复制到To空间,而「垃圾」AC则被回收,同时,D被分配到To空间,最后成下图的分布

JS内存管理实例讲解

至此,整个GC完成,此过程中页面停止执行,所以要尽可能的快。当YG中的值存活比较久时,它会被推向OG,OG的空间满时,触发OG内的GC,OG的GC时会触发YG的GC。

  • 每次分配都使To的可用空间减小,程序又更接近GC

  • YG的GC会阻塞程序,所以GC时间不宜太长10ms以内,因为16ms就会出现丢帧;GC不宜太频繁

  • 某个值变成垃圾后,不会立马释放内存,只有在GC的时候所占内存才会被回收。

    PHP经典实例(第二版)
    PHP经典实例(第二版)

    PHP经典实例(第2版)能够为您节省宝贵的Web开发时间。有了这些针对真实问题的解决方案放在手边,大多数编程难题都会迎刃而解。《PHP经典实例(第2版)》将PHP的特性与经典实例丛书的独特形式组合到一起,足以帮您成功地构建跨浏览器的Web应用程序。在这个修订版中,您可以更加方便地找到各种编程问题的解决方案,《PHP经典实例(第2版)》中内容涵盖了:表单处理;Session管理;数据库交互;使用We

    下载

2.2 内容均来自参考文献

2.3 内存的回收

GC Root是内存的根结节,在浏览器中它是window,在NodeJS中则是global对象。

JS内存管理实例讲解

从GC Root开始遍历图,所有能到达的节点称为活节点,如果存在GC Root不能到达的节点,那么该节点称为“垃圾”,将会被回收,如图中灰色的节点。

至于根节点的回收,不受用户的控制。

3. 导致内存泄漏的原因

3.1 没有完全切断与GC root之间的路径

因为没有完全切断与根节点之间的路径,导致自动GC不会回收这部分内存,从而造成内存泄漏。

具体的原因有:

  • 对象之间的相互引用

var a, b;
a.reference = b;
b.reference = a;
  • 错误使用了全局变量

a = "1234567";
相当于
window.a = "1234567";
  • DOM元素清空或删除时,绑定的事件未清除






  • 闭包引用

function bindEvent() {
var obj = document.getElementById('xxx');

obj.onclick = function () {
/** 空函数*/
};

/** delete this reference */
// obj = null;
}
  • DOM元素清空或删除时,子元素存在JS引用,导致子元素的所有父元素都不会被删除

// b是a的子dom节点, a是body的子节点
var aElement = document.getElementById("a");
var bElement = document.getElementById("b");
document.body.removeChild(aElement);
// aElement = null;
// bElement = null;

3.2 过度占用了内存空间

更多的出现在nodejs中,例如:

  • 无节制的循环

while(1) {
// do sth
}
  • 过大的数组

var arr = [];
for (var i=0; i< 100000000000; i++) {
var a = {
'desc': 'an object'
}
arr.push(a);
}

相关推荐:

详细介绍Linux中的内存管理

php内存管理之垃圾回收机制的详解(图)

如何避免JavaScript的内存泄露及内存管理技巧

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

843

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

748

2023.11.06

全局变量怎么定义
全局变量怎么定义

本专题整合了全局变量相关内容,阅读专题下面的文章了解更多详细内容。

82

2025.09.18

python 全局变量
python 全局变量

本专题整合了python中全局变量定义相关教程,阅读专题下面的文章了解更多详细内容。

96

2025.09.18

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

340

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

212

2023.09.04

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

1503

2023.10.24

字符串介绍
字符串介绍

字符串是一种数据类型,它可以是任何文本,包括字母、数字、符号等。字符串可以由不同的字符组成,例如空格、标点符号、数字等。在编程中,字符串通常用引号括起来,如单引号、双引号或反引号。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

625

2023.11.24

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

54

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.6万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号