집 > 기사 > 웹 프론트엔드 > JavaScript 메모리 누수의 4가지 유형과 이를 방지하는 방법

JavaScript 메모리 누수의 4가지 유형과 이를 방지하는 방법

黄舟원래의: 2017-02-23 13:32:131072검색

원본: JavaScript의 4가지 유형의 메모리 누수 및 이를 제거하는 방법

번역 출처: Alon의 블로그

이 기사에서는 일반적인 클라이언트 측 JavaScript 메모리를 탐색합니다. 누출, Chrome 개발자 도구를 사용하여 문제를 찾는 방법.

소개
메모리 누수는 모든 개발자가 결국 직면하게 되는 문제이며 느린 응답, 충돌, 긴 대기 시간 및 기타 애플리케이션 문제 등 많은 문제의 원인입니다.

메모리 누수란 무엇인가요?
기본적으로 메모리 누수는 다음과 같이 정의할 수 있습니다. 애플리케이션이 더 이상 메모리를 차지할 필요가 없어 어떤 이유로 운영 체제나 사용 가능한 메모리 풀에서 메모리를 회수하지 못하는 경우입니다. 프로그래밍 언어는 메모리를 관리하는 방법에 따라 다릅니다. 어떤 메모리가 더 이상 필요하지 않고 운영 체제에서 회수될 수 있는지는 개발자만이 가장 잘 알고 있습니다. 일부 프로그래밍 언어는 개발자가 이러한 작업을 수행하는 데 도움이 되는 언어 기능을 제공합니다. 다른 사람들은 메모리가 필요한지 여부를 명확히 하기 위해 개발자에게 의존합니다.

JavaScript 메모리 관리
JavaScript는 가비지 콜렉션 언어입니다. 가비지 컬렉션 언어는 이전에 할당된 메모리에 접근할 수 있는지 주기적으로 확인하여 개발자가 메모리를 관리하는 데 도움을 줍니다. 즉, 가비지 콜렉션 언어는 "메모리는 여전히 사용 가능하다", "메모리는 여전히 접근 가능하다"는 문제를 완화시킨다. 둘 사이의 차이점은 미묘하지만 중요합니다. 개발자만이 앞으로 어떤 메모리가 사용될지 알 수 있지만, 연결할 수 없는 메모리는 알고리즘에 따라 결정 및 표시되며 운영 체제에서 즉시 회수됩니다.

JavaScript 메모리 누수
가비지 수집 언어에서 메모리 누수의 주요 원인은 원치 않는 참조입니다. 이를 이해하기 전에 가비지 수집 언어가 도달 가능한 메모리와 도달할 수 없는 메모리를 구별하는 방법을 이해해야 합니다.

Mark-and-sweep
대부분의 가비지 컬렉션 언어에서 사용하는 알고리즘을 Mark-and-sweep이라고 합니다. 알고리즘은 다음 단계로 구성됩니다.

1. 가비지 수집기는 "루트" 목록을 생성합니다. 루트는 일반적으로 코드의 전역 변수에 대한 참조입니다. JavaScript에서 "window" 개체는 전역 변수이며 루트로 처리됩니다. 창 개체는 항상 존재하므로 가비지 수집기는 해당 개체와 모든 하위 개체가 존재하는지 확인할 수 있습니다(즉, 가비지가 아님).
2. 모든 루트가 검사되고 활성 상태로 표시됩니다(즉, 가비지가 아님). 모든 하위 개체도 재귀적으로 확인됩니다. 루트에서 시작하는 모든 객체에 접근할 수 있으면 가비지로 간주되지 않습니다.
3. 표시되지 않은 모든 메모리는 이제 가비지로 처리됩니다. 이제 수집기는 메모리를 해제하고 운영 체제로 반환할 수 있습니다.
최신 가비지 수집기는 알고리즘이 개선되었지만 본질은 동일합니다. 즉, 도달 가능한 메모리가 표시되고 나머지는 가비지 수집됩니다.

불필요한 참조는 개발자가 메모리 참조가 더 이상 필요하지 않다는 것을 알고 있지만 어떤 이유로 활성 루트 트리에 여전히 남아 있음을 의미합니다. JavaScript에서 원치 않는 참조는 코드에 남아 더 이상 필요하지 않지만 해제되어야 하는 메모리 부분을 가리키는 변수입니다. 어떤 사람들은 이것이 개발자의 실수라고 생각합니다.

JavaScript에서 가장 흔히 발생하는 메모리 누수를 이해하려면 참조가 어떻게 쉽게 잊혀지는지 이해해야 합니다.

세 가지 유형의 일반적인 JavaScript 메모리 누수
1: 예기치 않은 전역 변수
JavaScript는 정의되지 않은 변수를 느슨한 방식으로 처리합니다. 전역 개체의 새 변수. 브라우저에서 전역 객체는 window 입니다.

function foo(arg) {
    bar = "this is a hidden global variable";
}

진실은:

function foo(arg) {
    window.bar = "this is an explicit global variable";
}

foo 함수에서 내부적으로 var를 사용하는 것을 잊었고 실수로 전역 변수를 만들었습니다. 이 예에서는 무해한 간단한 문자열이 유출되지만 더 나쁜 상황도 있습니다.

다음에 의해 예상치 못한 또 다른 전역 변수가 생성될 수 있습니다.

function foo() {
    this.variable = "potential accidental global";
}

// Foo 调用自己，this 指向了全局对象（window）
// 而不是 undefined
foo();

JavaScript 파일에서

에 의해 참조됨 헤더에 'use strict'를 추가하면 이러한 오류를 피할 수 있습니다. 예상치 못한 전역 변수를 방지하려면 JavaScript의 엄격 모드 구문 분석을 활성화하세요.

전역 변수 고려 사항

예상치 못한 전역 변수에 대해 논의했지만 여전히 명시적 전역 변수에 의해 생성되는 가비지가 있습니다. (비어 있거나 재할당된 것으로 정의되지 않은 경우) 재활용이 불가능한 것으로 정의됩니다. 특히, 전역 변수를 사용하여 많은 양의 정보를 임시로 저장하고 처리하는 경우에는 주의가 필요합니다. 대량의 데이터를 저장하기 위해 글로벌 변수를 사용해야 하는 경우 반드시 null로 설정하거나 사용 후 다시 정의하시기 바랍니다. 전역 변수와 관련된 메모리 소비 증가의 주요 원인 중 하나는 캐싱입니다. 데이터 캐싱은 재사용을 위한 것이며 캐시가 유용하려면 크기에 상한이 있어야 합니다. 메모리 소비량이 많으면 캐시된 콘텐츠를 회수할 수 없기 때문에 캐시가 상한을 위반하게 됩니다.

2: 잊어버린 타이머 또는 콜백 함수
JavaScript에서 setInterval을 사용하는 것은 매우 일반적입니다. 일반적인 코드 부분:

var someResource = getData();
setInterval(function() {
    var node = document.getElementById(&#39;Node&#39;);
    if(node) {
        // 处理 node 和 someResource
        node.innerHTML = JSON.stringify(someResource));
    }
}, 1000);

此例说明了什么：与节点或数据关联的计时器不再需要，node 对象可以删除，整个回调函数也不需要了。可是，计时器回调函数仍然没被回收（计时器停止才会被回收）。同时，someResource 如果存储了大量的数据，也是无法被回收的。

对于观察者的例子，一旦它们不再需要（或者关联的对象变成不可达），明确地移除它们非常重要。老的 IE 6 是无法处理循环引用的。如今，即使没有明确移除它们，一旦观察者对象变成不可达，大部分浏览器是可以回收观察者处理函数的。

观察者代码示例：

var element = document.getElementById(&#39;button&#39;);
function onClick(event) {
    element.innerHTML = &#39;text&#39;;
}

element.addEventListener(&#39;click&#39;, onClick);

对象观察者和循环引用注意事项

老版本的 IE 是无法检测 DOM 节点与 JavaScript 代码之间的循环引用，会导致内存泄露。如今，现代的浏览器（包括 IE 和 Microsoft Edge）使用了更先进的垃圾回收算法，已经可以正确检测和处理循环引用了。换言之，回收节点内存时，不必非要调用 removeEventListener 了。

3：脱离 DOM 的引用
有时，保存 DOM 节点内部数据结构很有用。假如你想快速更新表格的几行内容，把每一行 DOM 存成字典（JSON 键值对）或者数组很有意义。此时，同样的 DOM 元素存在两个引用：一个在 DOM 树中，另一个在字典中。将来你决定删除这些行时，需要把两个引用都清除。

var elements = {
    button: document.getElementById(&#39;button&#39;),
    image: document.getElementById(&#39;image&#39;),
    text: document.getElementById(&#39;text&#39;)
};

function doStuff() {
    image.src = &#39;http://some.url/image&#39;;
    button.click();
    console.log(text.innerHTML);
    // 更多逻辑
}

function removeButton() {
    // 按钮是 body 的后代元素
    document.body.removeChild(document.getElementById(&#39;button&#39;));

    // 此时，仍旧存在一个全局的 #button 的引用
    // elements 字典。button 元素仍旧在内存中，不能被 GC 回收。
}

此外还要考虑 DOM 树内部或子节点的引用问题。假如你的 JavaScript 代码中保存了表格某一个 b6c5a531a458a2e790c1fd6421739d1c 的引用。将来决定删除整个表格的时候，直觉认为 GC 会回收除了已保存的 b6c5a531a458a2e790c1fd6421739d1c 以外的其它节点。实际情况并非如此：此 b6c5a531a458a2e790c1fd6421739d1c 是表格的子节点，子元素与父元素是引用关系。由于代码保留了 b6c5a531a458a2e790c1fd6421739d1c 的引用，导致整个表格仍待在内存中。保存 DOM 元素引用的时候，要小心谨慎。

4：闭包
闭包是JavaScript开发的一个关键方面：匿名函数可以访问父级作用域的变量。

代码示例：

var theThing = null;
var replaceThing = function () {
  var originalThing = theThing;
  var unused = function () {
    if (originalThing)
      console.log("hi");
  };

  theThing = {
    longStr: new Array(1000000).join(&#39;*&#39;),
    someMethod: function () {
      console.log(someMessage);
    }
  };
};

setInterval(replaceThing, 1000);

代码片段做了一件事情：每次调用 replaceThing ，theThing 得到一个包含一个大数组和一个新闭包（someMethod）的新对象。同时，变量 unused 是一个引用 originalThing 的闭包（先前的 replaceThing 又调用了 theThing ）。思绪混乱了吗？最重要的事情是，闭包的作用域一旦创建，它们有同样的父级作用域，作用域是共享的。someMethod 可以通过 theThing 使用，someMethod 与 unused 分享闭包作用域，尽管 unused 从未使用，它引用的 originalThing 迫使它保留在内存中（防止被回收）。当这段代码反复运行，就会看到内存占用不断上升，垃圾回收器（GC）并无法降低内存占用。本质上，闭包的链表已经创建，每一个闭包作用域携带一个指向大数组的间接的引用，造成严重的内存泄露。

引用

Meteor的博文解释了如何修复此种问题。在 replaceThing 的最后添加 originalThing = null 。

Chrome 内存剖析工具概览
Chrome 提供了一套很棒的检测 JavaScript 内存占用的工具。与内存相关的两个重要的工具：timeline 和 profiles。