메모리 관리에 신경 쓰지 않고 자바스크립트 오류 이해하기_jquery

소개
C와 같은 저수준 언어에는 개발자가 수동으로 메모리를 해제해야 하는 malloc() 및 free()와 같은 저수준 메모리 관리 명령이 있습니다. 그러나 JavaScript와 같은 고급 언어에서는 상황이 다릅니다. 객체(객체, 문자열 등)는 생성될 때 더 이상 사용되지 않을 때 메모리를 자동으로 재활용합니다. 이러한 자동 재활용 프로세스를 가비지 수집이라고 합니다. 가비지 콜렉션의 존재 때문에 자바스크립트 같은 고급 언어 개발자들은 메모리 관리에 신경 쓸 필요가 없다는 잘못된 인식을 갖고 있다.

메모리 수명주기
어떤 프로그래밍 언어이든 메모리 수명주기는 기본적으로 동일합니다.
필요한 메모리 할당
읽기 및 쓰기 작업에 사용
메모리가 더 이상 필요하지 않으면 리소스 해제
1단계와 2단계는 모든 언어에 동일하며 명확하게 알 수 있습니다. 알아 차렸다. 3단계에서는 저수준 언어에서는 개발자가 이를 명시적으로 수행하도록 요구합니다. JavaScript와 같은 고급 언어의 경우 이 작업 부분은 파서에 의해 수행되므로 눈치 채지 못할 것입니다.

javascript의 할당 작업
값 초기화
변수에 값을 할당하면 javascript가 메모리 할당을 완료합니다.

코드 복사 코드는 다음과 같습니다.

var n = 123 // 메모리 할당; for number
var s = "azerty"; // 문자열에 대한 메모리 할당
var o = {
a: 1,
b: null
} // 속성 값을 포함하는 객체의 경우 메모리 할당
var a = [1, null, "abra"]; // 값이 포함된 배열에 메모리 할당
function f(a){
return a 2; for Functions 메모리 할당 (함수는 호출 가능한 객체입니다)
// 함수 표현식도 객체이며, 메모리를 할당하는 경우가 있습니다
someElement.addEventListener('click', function(){
someElement.style . backgroundColor = 'blue';
}, false)

함수 호출을 통해 할당이 완료됩니다
일부 함수가 실행된 후 객체 할당도 발생합니다.

코드 복사 코드는 다음과 같습니다.

var d = new Date()
var e = document.createElement('div'); // DOM 요소 할당

일부 메소드는 새로운 값이나 객체를 할당합니다.

코드 복사 코드는 다음과 같습니다.

var s = "azerty"
var s2 = s.substr(0, 3); // s2는 새로운 문자열입니다
// 문자열은 변경되지 않으므로 자바스크립트는 [0, 3] 범위의 내용에 대해 새 문자열을 생성합니다.
var a = ["ouais ouais", "nan nan"];
var a2 = ["세대", "nan nan"]
var a3 = a.concat(a2); 와 a2를 결합하여 새로운 배열을 생성합니다


값 사용
값을 사용한다는 것은 실제로 할당된 메모리에 대한 읽기 및 쓰기 작업을 수행하는 것입니다. 이러한 작업에는 변수 또는 개체 속성에 대한 읽기 및 쓰기 작업, 매개변수를 함수에 전달하는 작업이 포함됩니다.

더 이상 필요하지 않은 경우 메모리 해제
대부분의 메모리 관리 문제는 이 단계에서 발생합니다. 가장 어려운 일은 할당된 메모리가 더 이상 필요하지 않은 시기를 결정하는 것입니다. 이를 위해서는 개발자가 프로그램에 더 이상 메모리가 필요하지 않은 시기를 결정하고 해당 프로그램이 차지하는 리소스를 해제해야 하는 경우가 많습니다.

고급 언어 파서에는 "가비지 컬렉터"라는 프로그램이 내장되어 있습니다. 그의 임무는 메모리 할당 및 사용을 추적하고, 메모리가 필요한지 확인하고, 필요하지 않을 때 실행하는 것입니다. 더 이상 필요하지 않습니다. 메모리가 필요한지 여부를 결정하는 것은 불확실한 문제이기 때문에 근사값만 얻을 수 있습니다(알고리즘으로 해결할 수 없음).

가비지 컬렉션
위에서 언급했듯이 "메모리가 더 이상 필요하지 않음"을 정확하고 자동으로 판단할 수는 없습니다. 따라서 이 문제에 대한 해결책으로 가비지 컬렉션에는 한계가 있습니다. 이 섹션에서는 주요 가비지 수집 알고리즘과 그 제한 사항을 이해하는 데 필요한 개념을 설명합니다.

참조
가비지 컬렉션의 주요 개념은 참조입니다. 메모리 관리에서는 객체가 명시적이든 암시적이든 다른 객체를 사용하는 경우 해당 객체가 다른 객체를 참조한다고 말합니다. 예를 들어 JavaScript 객체에는 프로토타입에 대한 암시적 참조와 해당 속성 값에 대한 명시적 참조가 있습니다.

여기서 객체의 개념은 JavaScript의 전통적인 객체 개념을 넘어 함수 범위와 전역 범위도 포함합니다.

참조 카운팅 알고리즘을 이용한 가비지 컬렉션
다음은 "더 이상 필요하지 않은 객체"와 "다른 객체가 이를 참조하지 않는다"라는 개념을 도입한 이상적인 알고리즘입니다. "객체"의. 객체의 참조 포인터가 0이 되면 재활용 준비가 된 것으로 간주됩니다.
예:

코드 복사 코드는 다음과 같습니다.

var o = {
a: {
b:2
}
}; // 두 개의 객체가 생성됩니다. 하나의 객체(a)는 다른 객체(o가 참조하는 객체)에 의해 참조되며 a를 다음과 같이 사용합니다. 해당 속성
// 개체는 다시 변수 o에 의해 참조됩니다.
// 당연히 현재로서는 어떤 개체도 재활용할 수 없습니다.
var o2 = o; // 변수 o2는 다시 개체를 참조합니다.
o = 1 ; // o는 더 이상 객체를 참조하지 않으며, o2만 여전히 객체를 참조합니다.
var oa = o2.a; // oa는 o2의 속성 객체 a를 참조합니다.
// 객체는 다른 두 객체에 의해 참조됩니다. 이들은 각각 o2의 속성 a 및 oa 변수입니다.
o2 = "yo" // 이 객체는 더 이상 다른 객체에서 참조되지 않지만 해당 속성 a는 여전히 oa에 의해 참조됩니다. 변수이므로 아직 해제할 수 없습니다.
oa = null; // 이제 속성 a는 더 이상 다른 개체에서 참조되지 않으며 개체를 재활용할 수 있습니다.

제한 사항: 루프
이 알고리즘에는 한 개체가 다른 개체를 참조하고 순환 참조가 형성되면 가비지 수집기가 해당 개체가 더 이상 필요하지 않더라도 해당 개체를 회수하지 않는다는 제한이 있습니다.

코드 복사 코드는 다음과 같습니다.

function f(){
var o = { };
var o2 = {};
o.a = o2; // o는 o2를 나타냅니다.
o2.a = o; // o2는 o를 나타냅니다.
return "azerty"
}
f();
// 두 객체가 생성되어 서로 참조를 형성합니다
// 함수 호출이 끝난 후에도 함수 범위를 벗어나지는 않습니다. 사용되면 릴리스되지 않습니다
// 참조 카운팅 알고리즘은 객체가 참조되는 한 해당 객체에 대해 가비지 수집을 수행할 수 없다고 판단하기 때문입니다

실제 사례
ie6, 7, DOM 개체에 대한 참조 계산 알고리즘을 사용하면 메모리 누수 문제가 발생합니다.

코드 복사 코드는 다음과 같습니다.

var div = document.createElement("div ");
div.onclick = function(){
doSomething();
}; // div는 클릭 속성을 통해 이벤트 핸들러를 참조합니다.
// div 변수에 액세스할 때 이벤트 핸들러 함수는 순환 참조를 형성하므로 두 객체가 모두 재활용되지 않아 메모리 누수가 발생합니다

Mark-Sweep 알고리즘
그는 "더 이상 필요하지 않은 개체"와 "접근할 수 없는 개체(object unreachable)"의 개념을 소개합니다. 이 알고리즘은 일련의 루트 개체가 있다고 가정합니다(JavaScript의 루트 개체는 전역 개체입니다). 때때로 가비지 수집기는 루트 개체에서 시작하여 참조하는 모든 개체를 순회합니다. 참조 개체가 참조하는 개체 등입니다. 이 접근 방식을 사용하면 가비지 수집기가 액세스 가능한 모든 개체를 얻고 액세스할 수 없는 개체를 회수할 수 있습니다.
이 알고리즘은 이전 알고리즘보다 우수합니다. 0으로 참조되는 개체는 액세스할 수 없는 개체로 설정되며, 동시에 순환 참조로 인한 문제도 방지됩니다.
2012년 현재 대부분의 최신 브라우저는 이 "표시 및 스윕" 가비지 수집기를 사용합니다. 자바스크립트 가비지 컬렉션(세대/증분/동시/병렬 가비지 컬렉션) 분야는 지난 몇 년간 이에 관련된 알고리즘이 발전해 왔지만, 가비지 컬렉션 알고리즘 자체(마크-스윕 알고리즘)와 "객체의 존재 여부를 판단하는 방법"은 더 이상 필요하지 않습니다."는 개선되지 않았습니다.

주기는 더 이상 문제가 되지 않습니다
첫 번째 예에서 함수 호출이 끝난 후 두 객체는 ​​전역 객체에서 참조되지 않으며 전역 객체에서도 참조되지 않습니다. 전역 개체 참조된 개체 참조입니다. 따라서 JavaScript 가비지 수집기에 의해 액세스할 수 없는 개체로 표시됩니다. 두 번째 예에서도 동일한 일이 발생합니다. div 및 이벤트 핸들러가 가비지 수집기에서 액세스할 수 없는 것으로 표시되면 해제됩니다.

제한 사항: 객체에 접근 불가능으로 명시적으로 표시해야 합니다
이 표시 방법에는 제한이 있지만 프로그래밍에서는 노출되지 않으므로 쓰레기에 거의 신경 쓰지 않습니다. 관련 콘텐츠 재활용 .