자바스크립트 성능 이야기, 렌더링과 UI 스레드 최적화

브라우저에서 렌더링이 진행되는 과정은 다음과 같다:

1. DOM 트리 생성
2. 스타일 구조체 생성
3. 렌더 트리 생성
4. 레이아웃 처리
5. 페인트

이 과정에서 성능 저하를 유발하는 대표적인 문제가 리플로(Reflow)와 리페인트(Repaint)이다.
렌더링 성능을 개선하기 위한 방법은 아래와 같다:

• 비슷한 작업은 그룹으로 묶어 리플로 발생 횟수를 줄인다.
• 리플로와 리페인트를 한 실행 사이클 내에서 처리하도록 조율한다.
• 스타일을 여러 번 변경할 경우, 요소를 일시적으로 숨긴 후 스타일 변경 완료 시 보이게 한다.
• 리플로를 유발하는 속성/메서드 호출 시 값을 캐싱해 불필요한 호출을 줄인다.
• 여러 요소의 스타일 변경은 CSS 규칙으로 묶어 반영한다.

---

UI 스레드와 타이머 활용

 

브라우저의 UI 스레드는 화면 업데이트와 자바스크립트 코드 실행을 담당하는 단일 스레드다.
타이머는 이 단일 스레드의 한계를 극복하기 위한 비동기 처리 방법 중 하나로, 다음과 같은 특징이 있다:

• setTimeout()과 setInterval()을 사용해 작업을 예약 가능.
• 페이지 로딩 시 시간이 오래 걸리는 작업은 setTimeout(0)으로 큐에 넣어 비동기로 처리.
• 실행 시간이 긴 코드는 필요 시점에만 실행되도록 설정해 로딩 대기 시간을 줄인다.

추가로 활용할 수 있는 최적화 기법:

1. requestAnimationFrame(): 스크립트 애니메이션의 효율적 실행.
2. setImmediate(): 보다 빠르게 스크립트 실행(브라우저 지원 확인 필요).
3. Web Worker: 스레드를 분리해 무거운 작업을 백그라운드에서 실행.

---

렌더링 최적화와 UI 스레드 활용법은 성능 개선의 기본이지만, 상황에 따라 방법을 다르게 적용해야 한다.

책에서 소개된 기법들을 하나씩 적용해 보면서, 코드의 성능뿐 아니라 가독성과 유지 보수성까지 고려한 최적의 방식을 찾아가는 것이 중요하다고 느꼈다.