메모리 누수를 방지하기 위해 모든 MutationObserver의 연결이 끊어졌는지 테스트하세요.

WBOY
풀어 주다: 2024-08-22 22:34:02
원래의
777명이 탐색했습니다.

Test that every MutationObserver is disconnected to avoid memory leaks

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!