前端 JS 经典:闭包与内存泄漏、垃圾回收

简介: 前端 JS 经典:闭包与内存泄漏、垃圾回收

1. 闭包

函数嵌套函数,内部函数可以引用外部函数的参数和变量。参数和变量不会被垃圾回收机制收回。

2. 垃圾回收机制

什么是垃圾?就是不再需要的内存。什么是垃圾回收机制?就是浏览器会自动回收掉我们不要的数据。那浏览器怎么判断什么是我们不要的数据?就是我们无法触达的数据,也就是访问不到的数据。

3. 内存泄漏

有些数据是我们不要的,但是还能被访问,被触达。浏览器的垃圾回收机制无法将这些数据回收,这就是内存泄漏。

那怎么处理内存泄漏?我们需要让这些内存不可触达,垃圾回收机制就会把它回收掉,怎么让它不可触达呢,设置为 null,之前的数据就无法触达了,就能被回收掉。

4. 闭包导致的内存泄漏

在闭包中持有了不再需要的函数引用,会导致函数关联的词法环境无法销毁,从而导致内存泄漏。如下:dfn 函数在我们调用一次后,其实不在需要了,但是我们没有将它设置为 null,那么它所关联的 arr 变量,还可以被访问到,浏览器的垃圾回收机制就不会回收它,就会导致内存泄漏。

function fn() {
  const arr = [1, 2, 3, 4];
  function _fn() {
    console.log(arr);
  }
  return _fn;
}
const dfn = fn();
dfn();

当多个函数共享词法环境时,会导致词法环境膨胀,从而导致出现无法触达也无法回收的内存空间。从而导致内存泄漏。如下:_fn 函数没用到 arr 数据,arr 数据我们无法触达,但是在同一个词法环境中,还有一个函数用到了 arr,垃圾回收机制不敢将它回收。

function fn() {
  const arr = [1, 2, 3, 4];
  function __fn() {
    console.log(arr);
  }
  function _fn() {}
  return _fn;
}
const dfn = fn();
dfn();

总结:永远不要提前优化,出了问题再去优化。这样我们开发的时候,心智负担就小很多。

目录
相关文章
|
2月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
163 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
23天前
|
JavaScript 前端开发 API
|
1月前
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
75 8
|
1月前
|
JavaScript 前端开发 Java
js 垃圾回收机制的方法
JS回收机制方法讲解
|
2月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
1147 24
|
3月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
90 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
5月前
|
缓存 监控 算法
Python内存管理:掌握对象的生命周期与垃圾回收机制####
本文深入探讨了Python中的内存管理机制,特别是对象的生命周期和垃圾回收过程。通过理解引用计数、标记-清除及分代收集等核心概念,帮助开发者优化程序性能,避免内存泄漏。 ####
120 3
|
6月前
|
算法 Java 开发者
Java内存管理与垃圾回收机制深度剖析####
本文深入探讨了Java虚拟机(JVM)的内存管理机制,特别是其垃圾回收机制的工作原理、算法及实践优化策略。不同于传统的摘要概述,本文将以一个虚拟的“城市环卫系统”为比喻,生动形象地揭示Java内存管理的奥秘,旨在帮助开发者更好地理解并调优Java应用的性能。 ####
|
5月前
|
存储 监控 算法
Java内存管理的艺术:深入理解垃圾回收机制####
本文将引领读者探索Java虚拟机(JVM)中垃圾回收的奥秘,解析其背后的算法原理,通过实例揭示调优策略,旨在提升Java开发者对内存管理能力的认知,优化应用程序性能。 ####
99 0
|
10月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
185 2

热门文章

最新文章