前端高频面试题 js中堆和栈的区别和浏览器的垃圾回收机制

2023-11-20

一、 栈(stack)和 堆(heap)

栈(stack):是栈内存的简称,栈是自动分配相对固定大小的内存空间,并由系统自动释放,栈数据结构遵循FILO(first in last out)先进后出的原则,较为经典的就是乒乓球盒结构,先放进去的乒乓球只能最后取出来。
在这里插入图片描述
堆(heap):是堆内存的简称,堆是动态分配内存,内存大小不固定,也不会自动释放,堆数据结构是一种无序的树状结构,同时它还满足key-value键值对的存储方式;我们只用知道key名,就能通过key查找到对应的value。比较经典的就是书架存书的例子,我们知道书名,就可以找到对应的书籍。
在这里插入图片描述
栈的特点:开口向上、速度快,容量小;堆的特点:速度稍慢、容量比较大;
在这里插入图片描述

二、 基本类型和引用类型

在这里插入图片描述
基本数据类型:Undefined,String,Boolean,Null,Number,都是直接按值存放在栈内存中,占用的内存空间的大小是确定的,并由系统自动分配和自动释放。这样带来的好处就是,内存可以及时得到回收,相对于堆来说,更加容易管理内存空间。
引用数据类型:指那些可能由多个值构成的对象,如对象(Object)、数组(Array)、函数(Function) ,它们是通过拷贝和new出来的,这样的数据存储于堆中。

三、 传值和传址的区别

基本类型:采用的是值传递。
引用类型:则是地址传递。

引用类型的数据的地址指针是存储于栈中的,将存放在栈内存中的地址赋值给接收的变量。当我们想要访问引用类型的值的时候,需要先从栈中获得对象的地址指针,然后,在通过地址指针找到堆中的所需要的数据(保存在堆内存中,包含引用类型的变量实际上保存的不是变量本身,而是指向该对象的指针)。

四、 内存分配垃圾回收

1.内存分配
(1)栈内存:线性有序存储,容量小,系统分配效率高。
(2)堆内存:首先要在堆内存新分配存储区域,之后又要把指针存储到栈内存中,效率相对就要低一些了。

2.垃圾回收:
(1)栈内存:变量基本上用完就回收了,相比于堆来说存取速度会快,并且栈内存中的数据是可以共享的。
(2)堆内存:堆内存中的对象不会随方法的结束而销毁,就算方法结束了,这个对象也可能会被其他引用变量所引用(参数传递)。创建对象是为了反复利用(因为对象的创建成本通常较大),这个对象将被保存到运行时数据区(也就是堆内存)。只有当一个对象没有任何引用变量引用它时,系统的垃圾回收机制才会在核实的时候回收它。

五、浏览器垃圾回收机制

1. 浏览器的垃圾回收机制

(1). 垃圾回收的概念
垃圾回收:JavaScript代码运⾏时,需要分配内存空间来储存变量和值。当变量不在参与运⾏时,就需要系统收回被占⽤的内存空间,这就是垃圾回收。

回收机制:
● Javascript 具有⾃动垃圾回收机制,会定期对那些不再使⽤的变量、对象所占⽤的内存进⾏释放,原理就是找到不再使⽤的变量,然后释放掉其占⽤的内存。
● JavaScript中存在两种变量:局部变量和全局变量。全局变量的⽣命周期会持续要⻚⾯卸载;⽽局部变量声明在函数中,它的⽣命周期从函数执⾏开始,直到函数执⾏结束,在这个过程中,局部变量会在堆或栈中存储它们的值,当函数执⾏结束后,这些局部变量不再被使⽤,它们所占有的空间就会被释放。
● 不过,当局部变量被外部函数使⽤时,其中⼀种情况就是闭包,在函数执⾏结束后,函数外部的变量依然指向函数内部的局部变量,此时局部变量依然在被使⽤,所以不会回收。

(3) 垃圾回收的⽅式
浏览器通常使⽤的垃圾回收⽅法有两种:标记清除,引⽤计数。
(1)标记清除

● 标记清除是浏览器常⻅的垃圾回收⽅式,当变量进⼊执⾏环境时,就标记这个变量“进⼊环境”,被标记为“进⼊环境”的变量是不能被回收的,因为他们正在被使⽤。当变量离开环境时,就会被标记为“离开环境”,被标记为“离开环境”的变量会被内存释放。

● 垃圾收集器在运⾏的时候会给存储在内存中的所有变量都加上标记。然后,它会去掉环境中的变量以及被环境中的变量引⽤的标记。⽽在此之后再被加上标记的变量将被视为准备删除的变量,原因是环境中的变量已经⽆法访问到这些变量了。最后。垃圾收集器完成内存清除⼯作,销毁那些带标记的值,并回收他们所占⽤的内存空间。
(2)引⽤计数
● 另外⼀种垃圾回收机制就是引⽤计数,这个⽤的相对较少。引⽤计数就是跟踪记录每个值被引⽤的次数。当声明了⼀个变量并将⼀个引⽤类型赋值给该变量时,则这个值的引⽤次数就是1。相反,如果包含对这个值引⽤的变量⼜取得了另外⼀个值,则这个值的引⽤次数就减1。当这个引⽤次数变为0时,说明这个变量已经没有价值,因此,在在机回收期下次再运⾏时,这个变量所占有的内存空间就会被释放出来。

● 这种⽅法会引起循环引⽤的问题:例如: obj1 和 obj2 通过属性进⾏相互引⽤,两个对象的引⽤次数都是2。当使⽤循环计数时,由于函数执⾏完后,两个对象都离开作⽤域,函数执⾏结束,obj1 和 obj2 还将会继续存在,因此它们的引⽤次数永远不会是0,就会引起循环引⽤。

function fun() {
  let obj1 = {}
  let obj2 = {}
  obj1.a = obj2 // obj1 引用了 obj2
  obj2.a = obj1 // obj2 引用了 obj1
}

这种情况下,就要⼿动释放变量占⽤的内存:

obj1.a = null
obj2.a = null

(3) 减少垃圾回收
虽然浏览器可以进⾏垃圾⾃动回收,但是当代码⽐较复杂时,垃圾回收所带来的代价⽐较⼤,所以应该尽量减少垃圾回收。
对数组进⾏优化:在清空⼀个数组时,最简单的⽅法就是给其赋值为[ ],但是与此同时会创建⼀个新的空对象,可以将数组的⻓度设置为0,以此来达到清空数组的⽬的。
对 object 进⾏优化:对象尽量复⽤,对于不再使⽤的对象,就将其设置为null,尽快被回收。
对函数进⾏优化:在循环中的函数表达式,如果可以复⽤,尽量放在函数的外⾯。

2. 哪些情况会导致内存泄漏

以下四种情况会造成内存的泄漏:
● 意外的全局变量:由于使⽤未声明的变量,⽽意外的创建了⼀个全局变量,⽽使这个变量⼀直留在内存中⽆法被回收。
● 被遗忘的计时器或回调函数:设置了 setInterval 定时器,⽽忘记取消它,如果循环函数有对外部变量的引⽤的话,那么这个变量会被⼀直留在内存中,⽽⽆法被回收。
● 脱离 DOM 的引⽤:获取⼀个 DOM 元素的引⽤,⽽后⾯这个元素被删除,由于⼀直保留了对这个元素的引⽤,所以它也⽆法被回收。
● 闭包:不合理的使⽤闭包,从⽽导致某些变量⼀直被留在内存当中。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前端高频面试题 js中堆和栈的区别和浏览器的垃圾回收机制 的相关文章

  • createHTMLNotification() 替换

    我创建了一个 Chrome 扩展程序 其中使用createHTMLNotification 在所有内容之上显示一个窗口 然而 从 Chrome 28 开始 谷歌决定放弃createHTMLNotification 完全 为什么 谷歌 为什么
  • jQuery mobile 中的文本区域高度和宽度?

    我修复了 jQuery mobile 中文本区域元素的高度 并且在纵向中得到了完美的高度和宽度 但在横向中宽度没有放大 谁能帮我 提前致谢 HTML
  • 将 Javascript 对象的属性从 string 更改为 int

    我有一个对象数组 每个对象具有三个属性 年份 总计 人均 例子 0 Object per capita 125 8 total 1007 2 year 2009 这些属性是字符串 我想创建一个循环来遍历数组并将它们转换为 int 我尝试了以
  • 在 HTML5 Javascript 中将 BlobBuilder 转换为字符串

    function blobToString blob var reader new FileReader var d reader onloadend function d callback reader result console lo
  • 位置特征检测:固定

    我正在尝试找到一个脚本来检测设备是否放置position fixed元素相对于视口而不是整个文档 目前 标准桌面浏览器和 Mobile Safari 适用于 iOS 5 都是这样做的 而 Android 设备则相对于整个文档放置固定元素 我
  • 为什么 window 与 Internet Explorer 中的 window.self 不同?

    关于我如何遇到这个问题有一个复杂的背景故事 但为什么self属性不完全等于窗口本身 在 Safari 和 Firefox 及其朋友中 结果如我所料 gt window window self true gt window window se
  • 如何在React Native Android中获取响应头?

    您好 我想在获取 POST 请求后获取响应标头 我尝试调试看看里面有什么response with console log response 我可以从以下位置获取响应机构responseData但我不知道如何获取标题 我想同时获得标题和正文
  • 如何使用javascript确保元素仅在圆上朝一个方向移动?

    好吧 我承认我对三角学真的很糟糕 出于上下文的考虑 我将添加我在这里提到的问题中的内容 参考问题 https stackoverflow com a 39429290 168492 https stackoverflow com a 394
  • 如何在网站上使用 svg 元素制作块的屏幕截图?

    我在网站上创建了一个构造函数 其本质是将所选元素及其颜色 svg中的元素 添加到访问者选择的背景和背景颜色 png中的背景 中 然后必须单击 保存 结果 按钮并仅执行工作区的屏幕截图 我写了这个脚本 但它需要屏幕截图 但只有背景 并忽略选定
  • 本地推送通知到在应用程序内运行 JS 代码的 Win8 Live Tile

    我正在尝试将更新发送到我的应用程序的磁贴 当应用程序运行时 这可以正常工作 例如 当用户单击按钮时 我可以轻松地将磁贴更新通知发送到磁贴 我无法解决的是当应用程序无法运行时如何更新磁贴 我找到的唯一选择是使用以下命令从远程 Web 服务器拉
  • JavaScript 验证和 PHP 验证?

    我正在使用 jquery 验证插件来验证空表单 我还应该在 PHP 中检查一下以确保 100 正确吗 或者用 javascript 验证就可以了 谢谢 您应该始终在服务器上进行验证 如果用户以某种方式不使用 Javascript 提交表单
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包
  • 为什么 setTimeout 在 Chrome 中触发两次,而在 IE 或 Firefox 中则不然?

    有人能告诉我为什么 javascript 函数 生成新号码 在 Chrome 中触发两次 但在 IE 或 Firefox 中则不会 使用 Chrome 20 0 1132 57 IE9 和 Firefox 13
  • 如何使用 Greasemonkey 监视静态 HTML 页面的更改?使用哈希?

    我希望我的 Greasemonkey 脚本仅在其访问的静态页面具有与以前完全相同的内容时运行 现在我可以设置一个包含该页面哈希的变量 我正在寻找一种动态散列页面的方法 以便我可以将我的散列与生成的散列进行比较 关于如何即时实现散列的任何想法
  • JavaScript推送函数中的动态变量

    我在 JavaScript 中使用推送功能 var chartData for var i 0 i lt 3 i chartData push date new Date year s mon s date s hr s min s sec
  • JavaScript eval("{}") 返回行为?

    根据ECMA 262 规范 http www ecma international org publications files ECMA ST Ecma 262 pdf 以下语句返回1 eval 1 eval 1 eval 1 var a
  • 聆听 Angular 2 中的元素可见性

    我正在为我的网络应用程序使用 Bootstrap 和 Angular 2 v4 我想监听指令中的元素以了解可见性变化 我的元素有一个可以隐藏其子元素的父元素hidden sm up我需要在每次隐藏或显示时触发一个函数 div hidden
  • react-native - 图像需要来自 JSON 的本地路径

    你好社区 我正在react native中开发一个测试应用程序 并尝试从本地存储位置获取图像 我实际在做什么 我将图像直接链接源提供给 var 并在渲染函数中调用此方法 react 0 14 8 react native 0 23 1 np
  • 如何从 json 文件创建模型? (ExtJS)

    这是我想使用 json 文件创建的模型 Ext define Users extend Ext data Model fields name user id type int name user name type string 为了根据服
  • 使用velocity.js制作可拖动元素的动画

    我正在使用velocity js 为用户拖动的可拖动 SVG 元素设置动画 然而 velocity js 将先前的 mousemove 坐标排队并通过所有后续的 mousemove 坐标进行动画处理 我想要的是velocity js 不要对

随机推荐

  • ElasticSearch教程

    第一章 ElasticSearch入门篇 第一节 ElasticSearch概述 1 1ElasticSearch是一个基于Lucene的搜索服务器 它提供了一个分布式多用户能力的全文搜索引擎 基于RESTfulweb接口 ElasticS
  • Signature verification failed on downloaded file

    下载文件上签名验证失败 原因 为了验证文件下载过程中是否出现丢包或其他原因导致文件出现损坏 会对比前后的hash码 不一致就会报错 Hash码 基于文件的内容通过算法得到的数值 与文件的名称无关 根据文件内容计算
  • STM32F103C8移植uCOSIII(HAL库)

    少年 一 随笔 二 uCOSIII源码 三 项目导入文件整理 四 导入文件和增加头函数路径 五 代码改动 六 参考资料 一 随笔 移植一个嵌入式系统用了一天时间 只能说不愧是我 在不了解的情况下还是少一些自己的操作 自己挖坑埋自己 记录一下
  • JavaEE项目实战(OA系统)之十九_流程审批之二

    JavaEE项目实战 OA系统 之十九 流程审批之二 这部分的程序界面原型如下 1 请假页面 员工如需请假 在登录系统后 点击请假功能 填写各项数据后 提交审批 也可以暂时不提交 将内容保存为草稿 以后可以加入功能 查看我的请假 和 草稿箱
  • 【Linux】Linux中jar包的压缩和解压缩

    1 概述 问题 在生产环境 有时会有需要修改jar中url的需求 目前我遇到的 此时 unzip tar命令都失去了用武之地 解决办法 假如文件 是file jar ls l xx xxx xx flink lang jar xx xxx
  • 端口访问被拒绝的解决方案

    端口访问被拒绝的解决方案 ps 本人亲测 阿里云2核4G5M的服务器性价比很高 新用户一块多一天 老用户三块多一天 最高可以买三年 感兴趣的可以戳一下 阿里云折扣服务器 问题描述 比如在本机telent到192 168 8 170 主机的9
  • 02Linux下C语言锁的学习之Linux下的读写锁

    02Linux下C语言锁的学习之Linux下的读写锁 概述 下面的锁的意思均是代表读写锁 读写锁的特性 1 若一把锁被一个线程以读方式锁住 当其它线程以读方式上锁的话 那么可以上锁成功 2 若一把锁被一个线程以写方式锁住 当其它线程以读或者
  • JavaScript HSL拾色器

    HSL 和 HSV 在数学上定义为在 RGB 空间中的颜色的 R G 和 B 的坐标的变换 从 RGB 到 HSL 或 HSV 的转换 设 r g b 分别是一个颜色的红 绿和蓝坐标 它们的值是在 0 到 1 之间的实数 设 max 等价于
  • 快慢指针解决 LeetCode 数组移除元素

    题面 移除元素 给你一个数组 nums 和一个值 val 你需要 原地 移除所有数值等于 val 的元素 并返回移除后数组的新长度 不要使用额外的数组空间 你必须仅使用 O 1 额外空间并 原地 修改输入数组 元素的顺序可以改变 你不需要考
  • SAP WM LT21界面里源发仓位以及目的地仓位的显示

    SAP WM LT21界面里源发仓位以及目的地仓位的显示 SAP WM模块中事务代码LT21用于显示转储单 TO单 在这个界面里 在TO单号码下方的位置 看起来像是HEADER的位置 会显示source storage bin destin
  • PCB设计笔记

    系列文章目录 1 元件基础 2 电路设计 3 PCB设计 4 元件焊接 5 板子调试 6 程序设计 7 算法学习 8 编写exe 9 检测标准 10 项目举例 11 职业规划 文章目录 前言 一 PCB板上的 地 1 详解电路设计中单点接地
  • FBX导入Unity中模型没有材质的处理

    一 3dMax导出FBX时的注意事项 导出时 确保maps文件存在 里面放着fbx用到的image 二 在Unity中的设置 1 文件拖入Unity的Assets文件夹中 2 查看模型的材质是否存在 如下所示 材质为None 此时拖入sce
  • 11-9 复制一个文件(方法三)

    1 利用 fread 和 fwrite 函数进行文件复制 方法一 利用读写一个字符的函数进行文件复制 速度较慢 但是适用于文本和二进制文件 方法二 利用读写一行字符的函数进行文件复制 速度较快 但仅适用于文本文件 使用 fread 和 fw
  • css3属性将单词换行并添加中划线(连字符)

    1 HTML页面 必须为英文语言 2 CSS页面 product desc width 520px max height 160px overflow hidden hyphens auto 效果 这样就把单词performance换行并添
  • [LINUX]虚拟机LinuxUbuntu上对.tarxz和.zip解压

    在虚拟机中的Linux Ubuntu系统上 你可以使用以下命令来解压 tar xz 和 zip 压缩包 1 解压 tar xz 压缩包 使用 tar 命令来解压 tar xz 压缩包 命令的格式是 tar xJf 压缩包文件名 tar xz
  • elasticsearch-head chrome 插件安装

    前言 由于不能直接访问谷歌商店下载插件 但可以直接在 Github 下载 地址 https github com mobz elasticsearch head raw master crx es head crx 如果觉得慢 可在此下载
  • SAS安装错误

    SAS安装 SAS安装分为两个阶段 系统要求 安装 第1阶段 Stage1 系统要求 System Requirement 需确保安装Microsoft Office Access Database Engine Microsoft Run
  • 定位shadow

    1 先定位到 shadow root 的宿主节点 此处为 id box 的 div 2 切换到 shadow root 中 3 然后再选择 shadow root 下的 span 标签 import time from selenium i
  • 2022亚太数学杯数学建模竞赛C题(思路、程序......)

    目录 一 英文题目及数据 二 中文翻译题目参考 2 1 题目 2 2 题目 三 思路 程序参考 四 参考文献 一 英文题目及数据 Canada s 49 6 C has set a new temperature record for re
  • 前端高频面试题 js中堆和栈的区别和浏览器的垃圾回收机制

    一 栈 stack 和 堆 heap 栈 stack 是栈内存的简称 栈是自动分配相对固定大小的内存空间 并由系统自动释放 栈数据结构遵循FILO first in last out 先进后出的原则 较为经典的就是乒乓球盒结构 先放进去的乒