잊혀진 콜백, 클로저 얻기

JS가 인터넷 전체에서 사랑받는 이유는 매우 짧은 시간에 효율적인 웹 페이지를 만들 수 있도록 지원하는 강력한 라이브러리와 도구 때문입니다. 폐쇄는 꽤 많이 사용되는 JS의 특전 중 하나입니다. 이제 이러한 일반적으로 사용되는 현상이 개발자를 두 배로 교차하고 어두운 면의 희생양이 되는 동안 매번 발생합니다. 이 블로그에서 우리는 클로저와 콜백이 어떻게 메모리 누수를 초래하는지 이해할 것입니다.

Minify JSON에 대해 들어보셨나요? 구문을 유지하면서 JSON과 유사한 콘텐츠 블록에서 공백과 주석을 제거하는 JavaScript 라이브러리입니다.

클로저와 콜백

자바스크립트에서 함수를 정의하면 상위 함수의 경계 내에서 정의한 다른 함수에서 해당 상위 함수의 모든 데이터에 액세스할 수 있습니다. 클로저는 데이터를 연결하고 내부의 다른 기능을 참조할 수 있도록 합니다.

function strongestavenger() {
    var name = "HULK";                     // name is a local variable created by 
                                           // strongestavenger
    function displayName() {               // displayName() is the inner function, a closure
                            alert (name);  // displayName() uses variable declared in 
                                           // the parent function       
                           }
    displayName();    
}
strongestavenger();

strongavenger 기능을 시작하면 strongavenger에 HULK가 표시됩니다. DisplayName()은 HULK를 저장하는 이름에 접근할 수 있는 클로저입니다.

이름 자체가 나타내는 콜백은 함수와 해당 구성 요소가 호출될 때 외에는 아무 것도 아닙니다.

var shield_data = getData();
setInterval(function() {
    var node = document.getElementById('Node');
    if(node) {
        // Do stuff with node and shield_data
        node.innerHTML = JSON.stringify(someResource));
    }
}, 1000);

콜백과 클로저는 기본적으로 사용을 위해 데이터 노드를 참조하는 원칙에 따라 작동합니다. 따라서 이러한 노드가 제거되거나 데이터 자체가 삭제되면 어떻게 됩니까? 둘 다 메모리 누수가 발생하고 브라우저의 효율성이 저하됩니다. DOM 노드 참조도 같은 방식으로 작동하며 그 효과도 동일합니다.
클로저와 재귀를 제대로 사용하지 않으면 브라우저가 쉽게 장애를 일으키고 중복 변수와 혼합되어 재앙을 초래할 수 있습니다.

아세요? JSON Prettify은 데이터를 저장하기 위한 일반적인 형식이지만 읽기 어려울 수 있습니다. Prettify JSON은 JSON 파일을 들여쓰기하고, 유사한 방식으로 정렬되었는지 확인하고, 닫는 괄호를 매번 같은 공간에 넣습니다.

해결책

이전 버전의 인터넷 익스플로러에는 잊혀진 콜백 및 클로저로 인한 메모리 누수로 인해 충돌이 발생하는 버그가 있었습니다. 문제는 자바스크립트와 DOM 노드의 주기적인 차이를 구분할 수 없다는 것이었습니다. 오늘날 브라우저의 최신 버전에서도 메모리 누수를 0으로 줄일 수 있을 만큼 효율적이지 않습니다. 부모(창) 함수 내에서 노드에 도달할 수 있을 때까지는 가비지 수집에 의해 스윕될 수 없습니다.

스크립팅하는 동안 클로저를 사용하지 않는 것은 불가능합니다. 할 수 있는 일은 누출이 발생하는 위치를 확인하는 것입니다. 브라우저 프로파일링(메모리 디버깅 블로그에서 언급됨) 시간 경과를 사용하면 메모리 증가를 쉽게 감지할 수 있습니다. 근본 원인, 이 급증을 일으키는 이벤트 또는 기능을 찾은 다음 명시적으로 삭제합니다.

특히 jQuery를 사용하는 경우 이벤트 리스너를 너무 많이 사용하지 않는 것이 중요합니다. 이벤트를 만들어야 하는 스크립트를 작성하는 경우 이벤트 목록을 만드는 대신 목록에 이벤트를 만듭니다.

다음을 확인하십시오. Base64 decoding - 이메일 및 HTML 양식 데이터를 통해 보다 쉽게 ​​전송할 수 있도록 텍스트 양식을 이진 데이터로 변환하는 방법입니다.