브라우저 렌더링 성능을 고려하여 개발하고 최적화한 경험이 있다면 구체적으로 어떤 방법을 사용했는지 이야기해 주세요.

모바일 웹뷰 프로젝트에서 스크롤할 때마다 프레임이 튀는 현상이 있었습니다. 처음에는 이미지 최적화 문제라고 생각했으나, DevTools 프로파일러로 확인해 보니 JavaScript가 스크롤 이벤트 핸들러에서 DOM 레이아웃을 강제로 읽고 있었습니다. offsetTop, clientHeight를 스크롤마다 반복 호출하면서 레이아웃 스래싱이 발생하는 구조였습니다.

수정 방향은 두 가지였습니다. 첫째, Intersection Observer로 스크롤 이벤트 직접 리스닝을 제거하였고, 둘째, 레이아웃 값 읽기와 쓰기를 requestAnimationFrame 한 사이클 안에서 분리하였습니다. 결과적으로 스크롤 중 프레임이 42에서 59 수준으로 개선되었습니다. 다만 Intersection Observer를 처음 사용해 보아 rootMargin 설정을 잘못 잡아 뷰포트 진입 감지가 100px 이상 늦게 트리거된 실수가 있었습니다.

모바일 웹뷰는 네이티브보다 GPU 자원이 제한적이므로 will-change, transform 같은 레이어 분리 힌트도 함께 사용하였으나, 과도하게 적용하면 오히려 메모리 압박이 생긴다는 것을 알고 나서부터 필요한 요소에만 선택적으로 사용하였습니다.