[성능 개선] MutationObserver 효율성 및 선택자 관리 최적화

[sudo-Terry]

배경

현재 Ad-Blocker 기능은 MutationObserver를 사용하여 DOM 변경을 감지하고 광고 요소를 제거 및 숨깁니다. 이 과정에서 일반적인 선택자를 사용하며, chrome.storage.sync.get 호출이 반복됩니다.

문제점

1. MutationObserver가 document.body 전체에 대해 childList: true, subtree: true로 설정되어 있어 DOM 변경 감지 시 성능 저하가 발생할 수 있습니다.
2. TARGET_SELECTORS에 정의된 선택자가 너무 일반적이어서 의도치 않은 요소가 제거되거나 숨겨질 수 있습니다.
3. hideElementsBySelector에서 CSS ID를 생성하는 방식(adblock-style-${selector.replace(/[^a-zA-Z0-9]/g, '')})은 여러 선택자가 유사한 문자열을 포함할 경우 ID 충돌을 일으킬 수 있습니다.
4. 동적으로 생성되거나 난독화된 광고에 대한 차단 효과가 제한적일 수 있습니다.
5. 개발 과정에서 사용된 console.log가 주석 처리되어 코드에 남아있습니다.

예상 동작

1. MutationObserver의 감지 범위를 최적화하여 성능 저하를 최소화합니다.
2. 광고 요소를 더 정확하게 식별하고 제거할 수 있도록 선택자 관리 방식을 개선합니다.
3. 동적으로 로드되는 광고에 대한 차단 기능을 강화합니다.
4. 프로덕션 환경에서 불필요한 console.log 코드를 제거합니다.

재현 단계 (버그인 경우)

1. 특정 웹사이트에서 광고가 로드되는 것을 확인합니다.
2. Ad-Blocker가 활성화되어 있음에도 불구하고 일부 광고가 차단되지 않는 것을 확인합니다.
3. 개발자 도구의 성능 탭을 통해 MutationObserver로 인한 성능 오버헤드를 확인합니다.

관련 파일

• features/ad-blocker/content.js

기술적 고려사항

• MutationObserver의 콜백 함수 내에서 chrome.storage.sync.get 호출을 최소화하는 방안을 고려해야 합니다.
• 보다 정교한 광고 선택자 패턴 또는 휴리스틱 기반의 차단 로직 도입을 검토해야 합니다.
• CSS ID 생성 시 충돌을 방지하기 위한 유니크한 ID 생성 전략이 필요합니다.

추가 정보

없음.

라벨 (예시):

• bug
• enhancement
• performance

담당자 (고정):
@sudo-Terry