江苏龙网

  1. 主页 > 生活百科 > >

深入JavaScript教你内存泄漏如何防范

JavaScript内存泄漏


深入JavaScript教你内存泄漏如何防范

文章插图
 
作者：大道至简
转发链接：
https://mp.weixin.qq.com/s/0w6aWwpR3MAJnmyLwDnAzA
前言一般情况下，忽视内存管理不会对传统的网页产生显著的后果 。这是因为，用户刷新页面后，内存数据都被清理了 。
但是随着SPA（单页应用）的普及，我们不得不更加关注页面的内存管理 。用户在 SPA 上往往很少刷新页面，随着页面停留时间的增长，内存可能越占越多，轻则影响页面性能，严重的可能导致标签页崩溃 。
在这篇文章中，我们将探讨导致 JAVAScript 中内存泄露的常见原因，以及如何改善内存管理 。
具体如何内存管理，请见这篇：「前端进阶」JS中的内存管理
什么是内存泄漏以及如何发现浏览器将对象保留在堆内存中，通过引用链可从根对象到达这些对象 。垃圾回收器（GC）是 JavaScript 引擎中的一个后台进程，它可以识别无法到达的对象，将其删除，并回收相应的内存 。
深入JavaScript教你内存泄漏如何防范

文章插图
 
引用链 - GC - 对象关系图当内存中本应在垃圾回收循环中被清理的对象，通过另一个对象意外的引用从而维持可访问状态，就会发生内存泄漏 。将多余的对象保持在内存中，会导致应用程序内部的内存使用量过大，进而影响性能 。
深入JavaScript教你内存泄漏如何防范

文章插图
 
内存泄露如何判断代码是否存在内存泄漏呢？内存泄漏通常比较隐蔽，难以发现和定位 。造成内存泄漏的 JavaScript 代码看上去挺正常，浏览器在运行的时候也不会抛出错误 。如果发现页面性能越来越差，通常是内存泄漏的征兆，可以通过浏览器内置的工具判断是否存在内存泄漏，并分析出原因 。
最快的方法是查看浏览器的任务管理器（注意，不是操作系统的任务管理器） 。它提供了浏览器运行中的所有 tab 页和进程的资源使用情况，比如内存占用、CPU 占用和进程 ID 等 。Chrome 的任务管理器可通过 Shift+Esc 快捷键打开，Firefox 可在地址栏输入about:performance打开 。
如果页面都没有任何交互，内存占用却越来越多，很可能存在泄漏 。
深入JavaScript教你内存泄漏如何防范

文章插图
 
Chrome 任务管理器浏览器 DevTools 则提供了更丰富的内存管理功能 。可以在 Chrome 的性能面板录制页面运行情况，查看可视化的性能分析数据 。
深入JavaScript教你内存泄漏如何防范

文章插图
【深入JavaScript教你内存泄漏如何防范】 
Chrome 性能面板除此之外，Chrome 和 Firefox 的 DevTools 还有专门的内存工具用于分析内存使用情况 。通过比较连续的内存快照，可以看出内存分配情况 。
通过前面的分析，内存泄露的根本原因就是代码在无意之中引用了本该被 GC 回收的对象 。那么，哪些情况容易造成内存泄露呢？
1意外的全局变量
全局变量一直处于可访问状态，不会被 GC 回收 。在非严格模式下，有时会不小心让局部变量变成全局变量 。
  • 给未声明的变量赋值
  • 使用指向全局对象的 this
function createGlobalVariables() {    leaking1 = '变成全局变量了'; // 给未声明的变量赋值    this.leaking2 = '这也是全局变量'; // 'this' 指向全局对象};createGlobalVariables();window.leaking1; // '变成全局变量了'window.leaking2; // '这也是全局变量'如何避免： 严格模式 ("use strict") 会避免意外的全局变量，以上代码在严格模式下会报错 。
2 闭包函数作用域变量在函数执行完后会被清理，前提是在函数外部没有引用它 。闭包会让变量一直处于被引用状态，即使它的执行上下文和作用域已经不存在了 。
function outer() {    const Array = [];    return function inner() {        bigArray.push('Hello');         console.log('Hello');    };};const sayHello = outer(); // 包含了对 inner 的引用function repeat(fn, num) {    for (let i = 0; i < num; i++){        fn();    }}repeat(sayHello, 10); // 每次调用 sayHello 都会添加 'Hello' 到potentiallyHugeArray // 如果是10万次呢？阔怕：repeat(sayHello, 100000)


推荐阅读


上一篇：机器指令到汇编再到高级编程语言

下一篇：自己设置的WiFi密码忘记了怎么办？教你三招找回来