우리 모두는 지금쯤 메모리 누수가 무엇인지, 그리고 그것이 성능을 엉망으로 만들고 패치하기 까다로울 수 있다는 사실을 거의 알고 있습니다.
이는 애플리케이션의 JavaScript 코드가 브라우저에서 GC(가비지 수집)를 위해 해제하는 대신 더 이상 필요하지 않은 객체를 메모리에 더 많이 보유할 때 발생할 수 있습니다.
장기 실행 앱의 경우 몇 킬로바이트의 작은 메모리 누수가 누적되어 시간이 지남에 따라 성능이 눈에 띄게 저하될 수 있습니다.
최근 Redmond에 기반을 둔 기술 회사는 문제를 식별하고 누출을 방지하는 데 도움이 되는 새로운 Detached Elements 도구를 만들었습니다.
메모리 누수 디버깅이 이렇게 쉬웠던 적이 없습니다.
마이크로소프트 설명 Detached Elements 도구가 작동하는 방식과 이 주제에 관심이 있는 모든 사람들에게 적절한 개요를 제공했습니다.
기본적으로 이 새로운 도구는 DOM 메모리 누수를 조사하고 해결하는 데 도움이 되며 Microsoft Teams 부서에서 영감을 받았습니다.
자신의 웹 콘텐츠에 이 새로운 도구를 사용하기 전에 분리된 요소와 DOM 누수 사이의 미묘한 차이를 이해하는 것이 중요합니다.
일반적으로 Microsoft는 JavaScript에서 DOM 노드를 만들어 페이지 어딘가에 삽입하여 표시합니다.
그러나 노드를 생성하고 페이지에서 노드를 연결하거나 제거하지 않고 JavaScript에서 노드에 대한 참조를 유지하는 것도 가능합니다.
원하는 경우 데모 앱을 통해 새 도구의 기능을 테스트할 수 있습니다. GitHub에서. 이를 통해 메모리 누수를 시뮬레이션하고 Detachable Elements 유틸리티가 유용한 위치를 확인할 수 있습니다.
Microsoft는 새로운 제작에 관심이 있는 사람들에게 잠재적인 문제를 발견하기 위해 실제 시나리오에서 도구를 테스트할 것을 촉구합니다.
또한 매우 필요한 피드백을 제공하고 싶다면 DevTools 피드백 버튼을 통해 제공하거나 Edge DevTools 트위터 계정.
이 새로운 도구 세트가 마음에 드십니까? 아래 의견 섹션에서 의견을 공유하십시오.
