JavaScript的垃圾回收机制,清除无用变量,释放多余内存,展现更好的性能

简介: 本篇文章将讲解一下javascript的垃圾回收机制。同时,我们必须先具备作用域链的概念,不懂的小伙伴可以先花3分钟观看一下这篇文章,简单了解一下作用域链的知识——从零开始讲解JavaScript中作用域链的概念及用途

01

垃圾回收机制


在JavaScript中,具有自动垃圾回收机制,也就是说执行环境会自动负责管理代码执行过程中的内存使用情况,会自动清除一些没有用的变量,以此来释放内存。该机制每隔一段时间会执行一次。


例如下面这段代码,函数 change 在执行时,声明了一个局部变量my_color,然后等函数执行完毕以后,这个局部变量也没有作用了,所以这时垃圾回收机制就会将这个没用的的局部变量my_color给清除掉。


    let color = 'red'
    function change() {  let my_color = 'blue'  color = 'green'}
    change()


    JavaScript中能实现这样的垃圾回收的功能的一共有两种方式: 标记清除引用计数


    02

    标记清除


    标记清除是JavaScript中最常用的垃圾回收方式。它的实现方式是这样的,当代码执行在一个环境中时,每声明一个变量,就会对该变量做一个标记,例如标记一个进入执行环境;当代码执行进入另一个环境中时,也就是说要离开上一个环境,这时对上一个环境中的变量做一个标记,例如标记一个离开执行环境,等到垃圾回收执行时,会根据标记来决定要清除哪些变量。



    03

    引用计数


    引用计数是一种不太常用的垃圾回收方式。顾名思义,就是针对值为引用类型数据的变量进行计数,那么我们先来看一下以下这个例子,来理解一下这个方式的实现方式


      let color = [1, 2, 3]
      function change() {  let new_color = [4, 5, 6]  color = new_color}
      change()
      console.log(color)  //返回  [4, 5, 6]


      这个例子中的函数change内部声明了一个变量new_color,并将一个引用类型值赋值给它,同时又将变量new_color赋值给了全局变量color,那么这种情况下,这个局部变量new_color就不会被当成垃圾回收了,因为此时的变量new_color并不是一个无用的局部变量了,它被全局变量color所引用了。


      那么为什么变量new_color不会被当成垃圾回收呢?其实引用计数的垃圾回收方式是这样的,当声明一个变量时,会给该变量设定一个值为0的引用次数,当该变量被别的变量所引用,就将引用次数+1,若取消了原本的引用,则引用次数-1,而垃圾回收机制就是判断一个变量的值的引用数是否为0,如果为0,就被当成无用变量给回收掉,如果不为0,则不对该变量做任何的处理。



      04

      管理内存


      有时我们需要手动管理一下内存的分配和清除,应该很好理解,如果有更大的内存空间,因为可以给更多的变量分配内存,就会提高代码运行的效率,增加线程中能够执行的代码语句的数量。


      所以我们要确保占用更少的内存使得页面获得更好的性能,就可以只将需要用到的数据保存到变量中,一旦数据不再使用,我们可以通过给变量赋值null来释放数据的引用,这种方法就叫做解除引用。这种方法大多数是用于全局变量,因为局部变量一般在离开环境以后就会被自动清除。


      我们来改变一下上面这个例子,使得变量new_color被引用完后,当成无用变量给清除掉。


        let color = [1, 2, 3]
        function change() {  let new_color = [4, 5, 6]  color = new_color}
        change()
        console.log(color)  //返回  [4, 5, 6]
        color = null


        在这个例子中,函数change内部声明的变量new_color被全局变量color所引用,所以此时变量new_color的引用次数为1,我们为了让变量new_color被清除,所以在代码的最后一行,赋值一个null给全局变量color手动解除了变量color对变量new_color的引用,此时变量new_color的引用次数-1,所以啊当前它的引用次数为0了。当垃圾回收机制执行的时候,发现它的引用次数为0,就把该变量当成无用变量给清除了,释放了内存。



        05

        结束语


        理解了js的垃圾回收机制,我们才能修改代码对性能进行优化 。好了,JavaScript的垃圾回收机制的讲解就讲到这里,希望对大家有所帮助。


        相关文章
        |
        5月前
        |
        消息中间件 存储 关系型数据库
        千亿消息“过眼云烟”?Kafka把硬盘当内存用的性能魔法,全靠这一手!
        Apache Kafka 是由 LinkedIn 开发并捐赠给 Apache 基金会的分布式消息队列系统,具备高吞吐、可扩展和容错能力。其核心设计围绕主题、分区、分段和偏移量展开,通过顺序写入磁盘和 Page Cache 提升性能,广泛应用于大数据实时处理场景。
        228 0
        |
        8月前
        |
        存储 缓存 分布式计算
        高内存场景必读!阿里云r7/r9i/r8y/r8i实例架构、性能、价格多维度对比
        阿里云针对高性能需求场景,一般会在活动中推出内存型r7、内存型r9i、内存型r8y和内存型r8i这几款内存型实例规格的云服务器。相比于活动内的经济型e和通用算力型u1等实例规格,这些内存型实例在性能上更为强劲,尤其适合对内存和计算能力有较高要求的应用场景。这些实例规格的云服务器在处理器与内存的配比上大多为1:8,但它们在处理器架构、存储性能、网络能力以及安全特性等方面各有千秋,因此适用场景也各不相同。本文将为大家详细介绍内存型r7、r9i、r8y、r8i实例的性能、适用场景的区别以及选择参考。
        |
        7月前
        |
        存储 弹性计算 固态存储
        阿里云服务器配置费用整理,支持一万人CPU内存、公网带宽和存储IO性能全解析
        要支撑1万人在线流量,需选择阿里云企业级ECS服务器,如通用型g系列、高主频型hf系列或通用算力型u1实例,配置如16核64G及以上,搭配高带宽与SSD/ESSD云盘,费用约数千元每月。
        727 0
        |
        弹性计算 安全 数据库
        【转】云服务器虚拟化内存优化指南:提升性能的7个关键策略
        作为云计算服务核心组件,虚拟化内存管理直接影响业务系统性能表现。本文详解了内存优化方案与技术实践,助您降低30%资源浪费。
        255 0
        【转】云服务器虚拟化内存优化指南:提升性能的7个关键策略
        |
        9月前
        |
        存储 分布式计算 安全
        阿里云服务器内存型实例怎么选?r7/r8y/r8i实例性能、适用场景与选择参考
        在选择阿里云服务器时,针对内存密集型应用和数据库应用,内存型实例因其高内存配比和优化的性能表现,成为了众多用户的热门选择。在目前阿里云的活动中,内存型实例主要有内存型r7、内存型r8y和内存型r8i实例可选。为了帮助大家更好地了解这三款实例的区别,本文将详细对比它们的实例规格、CPU、内存、计算、存储、网络等方面的性能,并附上活动价格对比,以便用户能够全面了解它们之间的不同,以供选择和参考。
        |
        8月前
        |
        存储 缓存 数据挖掘
        阿里云服务器实例选购指南:经济型、通用算力型、计算型、通用型、内存型性能与适用场景解析
        当我们在通过阿里云的活动页面挑选云服务器时,相同配置的云服务器通常会有多种不同的实例供我们选择,并且它们之间的价格差异较为明显。这是因为不同实例规格所采用的处理器存在差异,其底层架构也各不相同,比如常见的X86计算架构和Arm计算架构。正因如此,不同实例的云服务器在性能表现以及适用场景方面都各有特点。为了帮助大家在众多实例中做出更合适的选择,本文将针对阿里云服务器的经济型、通用算力型、计算型、通用型和内存型实例,介绍它们的性能特性以及对应的使用场景,以供大家参考和选择。
        |
        JavaScript Java 测试技术
        基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
        基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
        331 2
        |
        JavaScript 前端开发
        JavaScript中的原型 保姆级文章一文搞懂
        本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
        270 1
        JavaScript中的原型 保姆级文章一文搞懂
        JS+CSS3文章内容背景黑白切换源码
        JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
        167 0

        热门文章

        最新文章