MutationObserver는 DOM의 변경 사항을 감시하고 이에 대응하는 데 유용한 메커니즘입니다.
MutationObserver 인터페이스는 DOM 트리의 변경 사항을 감시하는 기능을 제공합니다.
다음은 테마 클래스 변경을 감시하는 예입니다.
function setUpThemeClassObservers() { const observer = new MutationObserver(() => { const themeClass = this.getThemeClass(); this.fireStylesChangedEvent('themeChanged'); }); observer.observe(this.eGridDiv, { attributes: true, attributeFilter: ['class'], }); // we must disconnect otherwise "this" will not be GC'd // causing a memory leak return () => observer.disconnect(); }
그러나 연결을 끊는 것을 잊어버린 경우 MutationObserver 함수 내에서 액세스하는 항목에 따라 메모리 누수에 노출될 수 있습니다.
관찰자의 연결이 끊어졌는지 확인할 수 있는 테스트가 있으면 좋지 않을까요?
DOM을 관찰하는 모든 MutationObserver도 연결이 끊어졌는지 검증하는 것이 가능하다는 것이 밝혀졌습니다. (MutationObserver를 설정하기 위해 다른 코드 경로를 실행해야 하는 경우 두 개 이상의 테스트가 필요할 수 있습니다)
관찰 및 연결 끊기 메서드에 대한 하위 모의를 사용하여 전역 MutationObserver를 모의하는 아이디어입니다. 모의 객체가 반환되기 전에 이를 배열에 기록하여 테스트 실행이 끝날 때 모든 인스턴스를 확인할 수 있습니다.
describe('Mutation Observers Disconnected', () => { let originalMutationObserver: typeof MutationObserver; const allMockedObservers: any = []; const mutationObserverMock = jest.fn().mockImplementation(() => { const mock = { observe: jest.fn(), disconnect: jest.fn(), takeRecords: jest.fn(), }; allMockedObservers.push(mock); return mock; }); beforeEach(() => { // Ensure we can restore the real MutationObserver after the test originalMutationObserver = global.MutationObserver; global.MutationObserver = mutationObserverMock; }); afterEach(() => { global.MutationObserver = originalMutationObserver; }); test('observer always disconnected after destroy', async () => { const api = createGrid(); // Perform some actions if required to exercise the code paths api.destroy(); expect(allMockedObservers.length).toBeGreaterThan(0); for (const mock of allMockedObservers) { expect(mock.observe).toHaveBeenCalled(); expect(mock.disconnect).toHaveBeenCalled(); } }); });
이런 방식으로 테스트 중에 설정된 각 MutationObserver도 테스트가 끝나면 연결이 끊어지는지 확인할 수 있습니다.
Stephen Cooper - AG Grid 수석 개발자
X @ScooperDev에서 나를 팔로우하세요
위 내용은 메모리 누수를 방지하기 위해 모든 MutationObserver의 연결이 끊어졌는지 테스트하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!