DOM 조작을 최소화하여 성능 최적화하기 DocumentFragment
안녕하세요 초원입니다. 👩🏻💻최근 자바스크립트로 직접 DOM을 구현하는 과제 중,부모 요소에 appendChild를 호출하여 자식을 추가할 때마다브라우저가 매번 렌더링을 수행하는 문제를 겪었습니다.이 글에서는 DocumentFragment를 사용하여 이를 해결하는 과정을 소개드립니다. > 자바스크립트 엔진과 렌더링 엔진'리액트에서 state, props가 렌더링을 유발한다'는 개념만 달달 외우다 보니자바스크립트에서는 언제 렌더링이 되는 것인지 당황스럽게도 기억이 안났습니다.그래서 다시 한 번 정리해봅니다. • 자바스크립트 엔진: DOM 조작을 수행하고, 변경 사항을 렌더링 엔진에 전달합니다.• 렌더링 엔진: DOM을 받아 레이아웃 재계산 및 화면 그리기를 수행합니다. (비용이 큼) > 렌더링 엔..
