jquery加载页面的几种方法(页面加载完成就执行)如何去掉css 渐变时的锯齿效果AJAX请求以及解决跨域的问题浅析Vue3动态组件怎么进行异常处理html+css+js写的AI五子棋游戏(附源码)基于jquery 实现导航条高亮显示的两种方法EasyUI使用DataGrid实现动态列数据绑定Vue怎么通过JSX动态渲染组件JS 获取当前日期、时间、星期聊一聊Node.js中的 GC(垃圾回收)机制Ajax 请求队列解决方案并结合elementUi做全局加载状态前端代码风格规范总结JS Generator函数yield表达式示例详解javascript子窗口父窗口相互操作 取值赋值的问题CSS如何实现波浪效果ECharts实现数据超出Y轴最大值max但不隐藏CSS样式穿透的几种方法JavaScript 类型转换CSS 设置页面缩放如何在Vue3+Vite中使用JSXlinux平台下node cnpm的安装方法vue中v-if和v-for的区别是什么详解Vue PC端如何实现扫码登录功能CSS 网格(Grid)布局JavaScript 请求服务端接口Angular开发问题记录:组件拿不到@Input输入属性聊一聊CSS中的盒模型和box-sizing属性vue3.0对服务端进行渲染Web 页面如何实现动画效果移动端 H5 实现拍照功能的几种方法CSS 样式优先级HTML 块级元素、行内元素和行内块级元素深入聊一聊vue3中的reactive()CSS 媒体查询Angular中的路由(Routing)原理怎么移除css的hover事件让交互更加生动!巧用CSS实现鼠标跟随 3D 旋转效果Web页面的几种布局方式JavaScript 评测代码运行速度的几种方法优化jQuery性能的多种方法(整理总结)说一下Vue组件中的自定义事件和全局事件总线列举一下JavaScript中对数组进行合并的几种方法JavaScript 对象合并带你深入了解一下vue.js中的this.$nextTick!如何在JavaScript中对文件进行处理Vue.js 前端项目在常见 Web 服务器上的部署配置vue中$set的实现方法CSS 实现文本装饰效果JavaScript 高阶函数History 和 Hash 路由模式Vue3学习之深度剖析CSS Modules和ScopeCSS 清除浮动CSS 设置背景图片【整理分享】一些常见Vue面试题(附答案解析)CSS里面的transform 属性CSS中的几种尺寸单位总结JavaScript中的条件判断与比较运算uni-app 滚动通知组件的实现JavaScript 执行上下文与作用域前端兼容性问题总结前端性能优化——图片优化JS中数组去重的几种方法JavaScript里实现继承的几种方式JavaScript使用reduce方法实现简单的 i18n 功能JavaScript 日期和时间的格式化大汇总(收集)JS里的原始值与引用值JavaScript 文件处理检测js代码中可能导致内存泄漏的工具Angular学习之ControlValueAccessor接口详解uni-app 日历组件的实现Vue 组件之间传值JavaScript里的回调函数属于闭包吗?JavaScript 解决冒泡事件导致的性能问题总结一下JavaScript中的一些奇怪问题简单说一下JavaScript中的事件冒泡和事件捕获关于 WebpackJavaScript中的循环类型5个实用的TypeScript操作符,助你提升开发能力!HTML img 元素无法显示 base64 图片的可能原因jQuery 遍历方法总结前端性能优化——内存问题javascript中脚本加载和执行机制Web 页面之间传递参数的几种方法解释一下JavaScript中0.1+0.2不等于0.3的问题总结一下JavaScript 中apply、call、bind的使用方法什么是EventLoop?怎么测试Node或页面的性能JavaScript 中 new Date(time).getTime() 获取时间戳方法在 iOS 中的兼容性问题JS里数组合并的几种方法详解vue各种权限控制与管理的实现思路uni-app 弹出层组件的实现用JavaScript实现文件的上传与下载前端性能优化总结简单说一下JavaScript中的事件委托JavaScript如何删除css总结一下JS中的排序算法关于js中的作用域和闭包让页面元素居中的一些方法【javascript算法】二分查找法如何在前端实现上万行大量数据的秒级响应?CSS中父元素被子元素的margin-top影响的解决方法js使用splice方法删除数组元素可能导致的问题如何运行vue项目(超详细图解)js隐式类型转换的副作用了解js的原型和原型链js中的循环引用js判断变量类型的方法web页面最常用的正则校验规则总结js内存管理和垃圾回收js中this关键字的作用和如何改变其上下文JS中的操作符和运算符大总结Vue3 watch 监听对象数组中对象的特定属性总结一下js的浅拷贝和深拷贝JavaScript中的异步编程JavaScript使用一个数组对另一个对象数组进行过滤一个基于Vue3实现的简单日历组件CSS实现磨砂玻璃(毛玻璃)效果样式解决“Vue3调用本地服务接口失败,老是提示下载并安装本地服务”的办法vue3基于组合式API使异步获取的数据对象具有响应性ASP.NET给前端动态添加修改CSS样式JS 标题 关键字在js中如何获取对象的长度了解一下js中的函数式编程Vue框架中监测数组变化的方法VUE html里的文本框只允许输入数字的两种方法分享几种js格式化金额的方法JavaScript的Promise同步处理js中的简写语法JavaScript 面向切面编程(AOP,装饰者模式)了解一下js的跨域问题谈一谈Vue怎么用extend动态创建组件Vue3实现印章徽章组件js中断 forEach 循环的几种方法vue3组件间怎么通信?简述一下通信方式CSS 设置文字间距CSS 网格(Grid)布局Vue3 实现模态框组件js处理扁平数组和树结构相互转换使用Vue和jsmind如何实现思维导图的历史版本控制和撤销/重做功能?Vue.js与ASP.NET的结合,实现企业级应用的开发和部署检查js中的字符串是否可以成为回文Vue.nextTick函数的用法及在异步更新中的应用关于js中0.1+0.2不等于0.3的问题使用JavaScript开发网页地图导航js中如何使用可选函数参数Vue与js的融合,如何编写现代化的前端应用关于Vue与服务器端的通信:如何实现登录鉴权Vue.js的响应式原理如何使用 FabricJS 禁用椭圆的居中旋转?使用JavaScript实现页面滑动切换效果移动端H5页面的缓存问题js里base64与file之间的转换分享一下利用Vue表单处理实现复杂表单布局如何使用CSS创建渐变阴影?如何在 JavaScript 中查看结构体数组?css的弹性布局(Flex布局)Vue统计图表的数据标签和数值显示技巧js实用工具方法库大总结使用Angular和MongoDB来构建具有登录功能的博客应用程序如何在Vue表单处理中实现表单字段的文件下载使用js开发交互式地图应用Vue.component函数的使用及如何创建局部组件css实现三角形的几种方法移动端H5实现自定义拍照界面如何在js中遍历对象jquery如何修改选中状态如何使用js对图像进行压缩js如何计算base64编码图片的大小关于Vue双向数据绑定原理详解Vue.filter函数及如何自定义过滤器列举一下js数组的reduce方法的一些应用如何在Vue表单处理中实现表单的条件渲染vue中的canvas插件js数组的reduce方法的一些应用VUE里使用虚拟DOM来优化更新流程canvas对象有哪些方法js中URL查询字符串(query string)的序列与反序列化如何使用 JavaScript/jQuery 为网站创建暗/亮模式?总结html5中常见的选择器Vue组件开发:工具提示组件的实现方法总结js中常见的层次选择器利用Vue2实现印章徽章组件Vue组件实战:列表组件开发js中如何将对象转换为数组Vue组件开发:地图组件实现方法如何将数据存储到 DOM 中?Vue实战:图片上传组件开发如何使用Vue实现可视化界面设计?vite+TypeScript+vue3+router4+Pinia+ElmPlus+axios+mock项目基本配置Vue组件库推荐:Ant Design Vue深度解析使用Vue实现弹窗效果React Query 数据库插件:与分布式系统的协作指南如何使用vue ui创建vue项目使用CSS的Positions布局打造响应式网页无感刷新页面(附可运行的前后端源码,前端vue,后端node)Css Flex 弹性布局中的换行与溢出处理方法Vue组件库推荐:Element UI深度解析分享一个用HTML、CSS和jQuery构建的漂亮的登录注册界面如何利用React和Sass实现可定制的前端样式如何在Vue中实现拖拽上传文件vue3+TypeScript全局事件总线mitt分享一个Pinia存储的数据持久化插件HTML、CSS和jQuery:实现图片折叠展开的效果如何使用HTML和CSS创建动画条形图?如何利用React和Flutter构建跨平台移动应用用html、css和jQuery实现图片翻页的特效利用Promise优化Vue异步操作的方法CSS Positions布局与网页导航的优化技巧js多图合成一张图CSS3实现动态旋转加载样式使用Velocity.js将动画添加到网页使用FabricJS创建Image对象的JSON表示vue3递归组件---树形组件vue3+TypeScript全局事件总线mitt在Vue中实现可编辑的表格vue3+TypeScript自定义指令:长按触发绑定的函数Vue中如何处理表单数据的双向绑定和验证Vue 简介Vue 安装Vue 常用指令Vue 实例Vue 计算属性Vue 动态样式绑定Vue 事件处理Vue 侦听器Vue 数据双向绑定Vue过渡 & 动画Vue 实例生命周期Vue 插槽的使用Vue 组件基础Vue动态组件 & keep-aliveVue 组件间通信Vue 过滤器Vue 自定义指令Vue 混入 MixinsVue 插件Vue 渲染函数VueRouter 编程式导航VueRouter 路由嵌套VueRouter 基础应用VueRouter 命名视图VueRouter 命名路由Vuex 简介、安装VueRouter 路由传参VueRouter 路由别名、重定向Vuex GetterVuex StateVuex ActionVuex MutationVue-Cli & VueDevTools安装Vuex ModulesVue 第三方库的使用Vue-Cli 项目文件结构分析Vue 本地 Mock 数据Vue 项目打包部署Element 美化 TODO 项目

js内存管理和垃圾回收

一、内存管理

JavaScript 是一种自动垃圾回收语言,这意味着 JavaScript 引擎会自动监测和清理无用的内存。

JavaScript 中的内存管理主要由 JavaScript 引擎负责,开发人员不需要手动管理内存。JavaScript 引擎使用垃圾回收算法来实现自动垃圾回收。

二、垃圾回收

JavaScript 垃圾回收算法是指在 JavaScript 程序中,用来回收不再使用的内存的算法。常见的垃圾回收算法包括:

  • 标记-清除算法:标记出所有不再使用的对象,然后清除它们。
  • 引用计数算法:维护每个对象的引用计数,当计数为0时回收对象。
  • 标记-整理算法:标记出所有不再使用的对象,然后将所有存活的对象整理到一起,回收其他对象。
  • 增量标记-整理算法:将垃圾回收过程分成多个小步骤执行,并且可以处理循环引用问题。

现代 JavaScript 引擎通常采用增量标记-整理算法或其他类似算法来实现垃圾回收。

1、标记-清除算法

标记-清除算法是通过标记未使用的内存块,然后清除这些标记的内存块来实现垃圾回收的。

标记-清除算法的工作流程如下:

  1. 从根节点开始,遍历所有可达的对象,将其标记为“可用”。
  2. 扫描内存中所有对象,将未被标记的对象标记为“不可用”。
  3. 清除所有不可用对象占用的内存。

标记-清除算法的优缺点

优点:

  • 标记-清除算法简单易实现。
  • 标记-清除算法可以回收任意类型的对象。

缺点:

  • 标记-清除算法会产生碎片化的内存,这可能导致空间浪费。
  • 标记-清除算法会产生暂停,这可能导致程序卡顿。

现在,由于标记-清除算法会产生碎片化的内存和暂停,所以现代的 JavaScript 引擎主要使用增量标记-整理算法来实现垃圾回收。增量标记-整理算法将垃圾回收过程分成多个小步骤执行,避免了长时间的暂停。

标记-清除算法是一种简单易实现的垃圾回收算法,但是会产生碎片化的内存和暂停,因此现在不再常用。

2、引用计数算法

引用计数算法是通过跟踪每个对象的引用次数来确定对象是否被使用,如果一个对象的引用次数为0,则该对象被视为垃圾并被回收。

引用计数算法的工作流程如下:

  1. 每当一个对象被引用时,将其引用计数增加1。
  2. 每当一个对象的引用被删除时,将其引用计数减少1。
  3. 当一个对象的引用计数为0时,该对象被视为垃圾并被回收。

引用计数算法的优缺点

优点:

  • 引用计数算法可以实时回收垃圾。
  • 引用计数算法可以较快地回收循环引用的对象。

缺点:

  • 引用计数算法无法处理循环引用问题。如果两个对象相互引用,而没有其他变量引用它们,则它们的引用计数都为1,而它们都不能被回收。
  • 引用计数算法会增加程序的运行时间和空间开销。

引用计数算法在处理循环引用问题上会有困难。而且引用计数算法会增加程序的运行时间和空间开销。因此现代的 JavaScript 引擎不再使用引用计数算法来实现垃圾回收。

引用计数算法的实现方式可以是各种各样的,例如:

  • 对于每一个对象都维护一个计数器,在有新的引用时将计数器加一,在引用结束时将计数器减一。
  • 对于每一个对象维护一个引用链表,在有新的引用时将引用的对象加入链表中,在引用结束时将引用的对象移除链表。

虽然现在的 JavaScript 引擎不再使用引用计数算法来实现垃圾回收,但是对于引用计数算法的理解对于理解其他算法有很大帮助。

3、标记-整理算法

标记-整理算法是一种垃圾回收算法,它首先标记出所有不再使用的对象,然后将所有存活的对象整理到一起,回收其他对象。

标记-整理算法的工作流程如下:

  1. 标记:从根节点开始,遍历所有可达的对象,将其标记为“存活”。
  2. 整理:将所有存活的对象移动到一起,以便进行回收。
  3. 回收:回收所有未被标记的对象占用的内存。

标记-整理算法的优缺点

优点:

  • 可以有效地处理循环引用问题。
  • 可以减少内存碎片化。

缺点:

  • 整理过程会影响性能。
  • 需要额外的空间来存储活动对象和空闲对象。

标记-整理算法在处理循环引用问题上会有优势,减少内存碎片化,但是会影响性能,需要额外的空间来存储活动对象和空闲对象。

标记-整理算法是一种较为新的垃圾回收算法,相对于标记-清除算法和引用计数算法而言,它可以更好地解决循环引用问题。

在使用标记-整理算法进行垃圾回收时,系统会标记出所有仍然在使用的对象,然后将这些对象移动到一起,这样就可以避免内存碎片化,并且可以减少循环引用问题的影响。

但是,标记-整理算法也有缺点,整理过程会影响性能,需要额外的空间来存储活动对象和空闲对象。另外,在 JavaScript 引擎中,这种算法也没有得到广泛采用,大多数 JavaScript 引擎使用的是增量标记-整理算法或其他类似算法。

4、增量标记-整理算法

现代的 JavaScript 引擎主要使用增量标记-整理算法来实现垃圾回收,这种算法在运行时将垃圾回收过程分成多个小步骤来执行,避免了长时间的暂停。

增量标记-整理算法的工作流程如下:

  1. 标记:从根节点开始,遍历所有可达的对象,将其标记为“存活”。
  2. 整理:将所有未被标记的对象移动到一起,以便进行回收。
  3. 回收:回收所有未被标记的对象占用的内存。

增量标记-整理算法通过将垃圾回收过程分成多个小步骤执行,来避免了长时间的暂停。这样可以在不影响用户体验的情况下进行垃圾回收。

增量标记-整理算法的优缺点

优点:

  • 避免了长时间的暂停,提高了程序的响应性。
  • 增量标记-整理算法可以有效地处理循环引用问题。

缺点:

  • 由于增量标记-整理算法是一种标记-整理算法,所以会产生碎片化的内存,这可能降低内存利用率。
  • 增量标记-整理算法的实现需要额外的空间来存储活动对象和空闲对象。

增量标记-整理算法是基于标记-清除算法和标记-整理算法的结合体。它首先使用标记-清除算法找出所有存活的对象,然后使用标记-整理算法将这些对象移动到一起,以便进行回收。

三、优化措施

JavaScript 中针对垃圾回收的优化措施有很多,主要有如下几种:

  1. 避免循环引用:循环引用是 JavaScript 垃圾回收中常见的问题,为了避免这种问题,开发人员应该尽量避免在不同对象之间建立循环引用关系。

  2. 尽早释放不再使用的对象:尽早释放不再使用的对象可以减少垃圾回收的工作量,进而提高性能。例如,在不再使用的时候将变量赋值为 null 或 undefined,可以帮助 JavaScript 引擎更快地找到垃圾。

  3. 避免使用全局变量:全局变量会一直存在,如果不需要使用,就应该尽早释放。

  4. 避免使用长作用域链:长作用域链会导致 JavaScript 引擎花费更多的时间来跟踪对象的存活状态,因此应该尽量避免使用长作用域链。

  5. 使用 WeakMap 和 WeakSet:WeakMap 和 WeakSet 可以帮助我们维护对象之间的弱引用关系,可以减少循环引。

  6. 使用 requestIdleCallback:requestIdleCallback 允许我们在浏览器空闲时执行一些任务,可以帮助我们在不影响用户体验的情况下进行垃圾回收。

需要注意的是,JavaScript 中的垃圾回收并不能保证程序一定不会出现内存泄漏的情况,例如循环引用,开发人员需要知道这种情况并采取对应的处理措施。

应对循环引用问题的处理措施?

JavaScript 中的循环引用是指两个或多个对象之间相互引用的情况。这种情况下,这些对象就不能被垃圾回收机制正常回收,会导致内存泄漏。

解决循环引用问题主要有以下几种方法:

  1. 使用 WeakMap 和 WeakSet:WeakMap 和 WeakSet 可以帮助我们维护对象之间的弱引用关系,可以减少循环引用问题。

  2. 使用计数器:对于某些情况,通过维护对象之间的引用计数可以帮助我们解决循环引用问题。

  3. 使用双向链表:双向链表可以帮助我们解决循环引用问题,可以支持对象之间相互引用,但是需要手动维护对象之间的关系。

  4. 避免循环引用:是最简单而有效的解决办法,开发人员应该尽量避免在不同对象之间建立循环引用关系。

  5. 使用第三方库:使用第三方库也可以帮助我们解决循环引用问题,如 cycle.js

  6. 使用设置空值的方法:在不再使用某个对象时,将其设置为空值可以消除对该对象的引用。

  7. 使用闭包:闭包可以在函数执行结束后销毁其所引用的对象。

  8. 使用 IIFE:IIFE(立即执行函数表达式)可以在函数执行结束后立即销毁其所引用的对象。

  9. 使用 WeakRef:WeakRef是一种弱引用对象,它不会影响到对象的存活状态,可以使用它来消除循环引用。

需要注意的是, 在使用这些方法解决循环引用问题时, 还需要考虑到代码复杂度和可维护性, 在使用时应该慎重考虑。

JavaScript 中没有强制垃圾回收的方法,也没有手动释放内存的方法, JavaScript 引擎会根据需要自动进行垃圾回收。

在 JavaScript 中,当一个对象不再被任何变量引用时,它就会被视为垃圾并被回收。需要注意的是,JavaScript 中的垃圾回收仅针对不再使用的内存,而不是不再使用的变量。例如,如果一个变量存储的是对象的引用,则该对象可能不再被其他变量引用,但仍然可能被使用。

总之,JavaScript 中的内存管理主要由 JavaScript 引擎负责,开发人员不需要手动管理内存。JavaScript 中的垃圾回收是自动进行的,开发人员只需要了解垃圾回收机制并采取优化措施,就可以帮助程序更好的管理内存。