安徽建站网站吴江建网站

当前位置： 首页 > news >正文

安徽建站网站,吴江建网站,百度首页优化排名,编程免费自学网站目录 内存泄漏到底是个什么东西#xff1f;如何避免内存泄漏 一、什么是内存泄漏#xff1f; 1、内存泄漏 2、GC#xff08;垃圾回收#xff09;机制是什么#xff1f; 二、常见内存泄漏场景 1、意外的全局变量 2、被遗忘的定时器/回调 3、闭包未释放大对象 4、D…目录 内存泄漏到底是个什么东西如何避免内存泄漏 一、什么是内存泄漏 1、内存泄漏 2、GC垃圾回收机制是什么 二、常见内存泄漏场景 1、意外的全局变量 2、被遗忘的定时器/回调 3、闭包未释放大对象 4、DOM 引用未解绑 5、被遗忘的监听器、websocket、观察者等如 IntersectionObserver 6、缓存未清理Map / WeakMap 使用不当 三、结语 作者watermelo37         CSDN万粉博主、华为云云享专家、阿里云专家博主、腾讯云、支付宝合作作者全平台博客昵称watermelo37。         一个假装是giser的coder做不只专注于业务逻辑的前端工程师Java、Docker、Python、LLM均有涉猎。 ——————————————————————— 温柔地对待温柔的人包容的三观就是最大的温柔。 ——————————————————————— 内存泄漏到底是个什么东西如何避免内存泄漏 内存泄漏Memory Leak是 Web 开发中常见但容易忽视的问题。随着项目体量增长或长时间运行的单页应用增多内存泄漏所带来的性能下降、页面卡顿甚至崩溃问题变得尤为突出。 本文将带你深入理解内存泄漏的成因常见场景以及应对方案助你写出更加稳健高效的前端应用。 一、什么是内存泄漏 1、内存泄漏 内存泄漏指的是程序中某些对象已经不再被需要但由于某种原因仍然被引用导致垃圾回收器无法释放这些内存。 2、GC垃圾回收机制是什么 现代 JavaScript 引擎如 V8 采用 “可达性算法Reachability”当某个对象从根对象如 window、全局变量、闭包引用等开始无法被访问到它就会被回收。 有些情况下会绕过垃圾回收机制那些已经不需要但是不会被回收的变量等就会一直保存在内存中会持续的浪费内存直到进程被杀死才会彻底清除。这就是内存泄漏产生的原因。 二、常见内存泄漏场景 1、意外的全局变量 函数内如果不使用 let / var / const 声明变量就会直接挂载到 window 对象上。所以需要尽量避免直接写变量或者开始‘ use strict ’严格模式避免隐式全局变量。 尽量不要使用 var 定义变量在全局作用域里面即函数外通过 var 定义的变量均会挂载在 window 对象上不会被销毁会持续造成内存泄漏。 尽量使用 const  / let 来定义变量哪怕是在全局作用域里面通过 const  / let 定义的变量也只会挂载在 Script 作用域中。即全局词法环境Lexical Environment 中这是一种抽象的作用域管理方式浏览器自己维护的你访问不到它但 JavaScript 引擎知道该怎么找。相比于直接通过 var 挂载到window对象上相对更好被GC清除一些 function foo() {leaked I am global!; } foo(); // leaked 被隐式挂载在 window 上2、被遗忘的定时器/回调 闭包中的 userData 永远被回调引用永远不被释放。 const userData { name: Tom }; setInterval(() {console.log(userData.name); // 闭包引用 userData }, 1000);所以应该在组件销毁时清除定时器。 const timer setInterval(…); clearInterval(timer);3、闭包未释放大对象 闭包允许函数访问其创建时的作用域链中的变量即使这些变量在函数外部已经不可访问。闭包会保留对 createClosure 函数作用域链的引用这意味着 bigData 也会被保留。 function createClosure() {const bigData new Array(1e6);return function () {console.log(I am using closure);}; } const closure createClosure(); // bigData 被保留解决方案一般有两种思路避免大对象进入闭包逻辑 function createClosure() {const bigData new Array(1e6); // 创建一个大数组console.log(I am using closure); } createClosure(); 或者手动释放引用 function createClosure() {const bigData new Array(1e6); // 创建一个大数组return function () {console.log(I am using closure);bigData null; // 手动释放引用}; } const closure createClosure(); closure(); // 调用闭包释放 bigData 4、DOM 引用未解绑 DOM 被移除时如果事件监听没有解绑闭包可能继续引用 DOM。 const element document.getElementById(btn); element.onclick () {console.log(clicked); };应在DOM被销毁时及时解绑事件。 element.removeEventListener(click, handler);5、被遗忘的监听器、websocket、观察者等如 IntersectionObserver 比如元素删除了observer 还在监听需要使用 observer.disconnect() 手动解除观察。 const observer new IntersectionObserver(() {console.log(intersected); }); observer.observe(document.getElementById(foo));6、缓存未清理Map / WeakMap 使用不当 Map 会强引用 key 和 value导致无法释放。致无法释放。 const cache new Map(); function addToCache(key, value) {cache.set(key, value); // 永久引用 }三、结语 内存泄漏的本质是代码“留下来不该留下来的东西”的体现。通过了解 JavaScript 的垃圾回收机制和闭包原理我们可以更有意识地优化代码避免性能隐患。 说实话闭包这个东西说简单几句话就说完了 但是要扯到各种作用域垃圾回收机制各种作用域创建的函数上下文可能一万字都讲不清楚今天就说到这里有探究想法的读者可以在评论区讨论。 只有锻炼思维才能可持续地解决问题只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助麻烦您点个赞支持一下还可以收藏起来以备不时之需有疑问和错误欢迎在评论区指出~ 其他热门文章请关注 极致的灵活度满足工程美学用Vue Flow绘制一个完美流程图 你真的会使用Vue3的onMounted钩子函数吗Vue3中onMounted的用法详解 DeepSeek全栈开发者视角下的AI革命者 通过array.filter()实现数组的数据筛选、数据清洗和链式调用 通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能 TreeSize免费的磁盘清理与管理神器解决C盘爆满的燃眉之急 通过MongoDB Atlas 实现语义搜索与 RAG——迈向AI的搜索机制 深入理解 JavaScript 中的 Array.find() 方法原理、性能优势与实用案例详解 el-table实现动态数据的实时排序一篇文章讲清楚elementui的表格排序功能 前端实战基于Vue3与免费满血版DeepSeek实现无限滚动懒加载瀑布流模块及优化策略 MutationObserver详解案例——深入理解 JavaScript 中的 MutationObserver JavaScript中通过array.map(实现数据转换、创建派生数组、异步数据流处理、DOM操作等 高效工作流用Mermaid绘制你的专属流程图如何在Vue3中导入mermaid绘制流程图 干货含源码如何用Java后端操作Docker命令行篇 在线编程实现如何在Java后端通过DockerClient操作Docker生成python环境 Dockerfile全面指南从基础到进阶掌握容器化构建的核心工具