직접 DOM에 접근하는 것은 지양해야 한다

회사 프론트엔드 개발 문서 규칙에 적혀있었다. 그래서 그 이유를 한 번 더 되짚어 보았다.

 

 

브라우저 렌더링 과정을 생각해보면 DOM이 변경될 때마다, DOM 트리 생성 및 파싱 작업을 재수행한다. (Reflow가 일어난다) → 비효율적이고 렌더링 부담이 큼

 

 

 

Virtual DOM이 이 문제를 해결

Virtual DOM은 자바스크립트 객체이기 때문에 변경에 대한 부담이 적다.

Virtual DOM과 실제 DOM의 차이점을 파악하여 그 부분만 변경되도록 한다. (Reconciliation)

→ React와 Vue 등은 가상 DOM을 사용하고 있다.

 

 

결론적으로 DOM을 직접 조작하는 것은 렌더링 성능에 큰 영향을 끼치지 때문에 특별한 경우가 아니면 getElementById 등의 메서드를 통해 JS로 DOM을 직접 조작하는 것은 지양하자~ 라는 것이다.