강의

멘토링

커뮤니티

인프런 커뮤니티 질문&답변

Boom님의 프로필 이미지
Boom

작성한 질문수

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1

2-3) 애니메이션 분석 (Reflow와 Repaint 이론)

textContent 변경하면

작성

·

301

1

innerText 를 사용해서 태그 내부의 글자를 변경한다면.

DOM -> renderTree -> composition 인가요? 

아니면 전플로우 인가요 리페인트 인가요..

답변 1

1

유동균님의 프로필 이미지
유동균
지식공유자

안녕하세요, Geonil Jang님.
innerText 의 변경은 어떤 렌더링 과정을 거치게 되는지 질문해주셨는데요.

결론을 바로 말씀드리면, 모든 과정을 거치는 reflow가 일어납니다.
그 이유는 innerText를 수정하는 것은 DOM 요소들의 사이즈에 영향을 미칠 수 있는 작업이기 때문입니다.

아래 사이트는 어떤 작업 또는 css 요소가 reflow 또는 repaint를 일으키는지를 정리한 사이트입니다.

https://gist.github.com/paulirish/5d52fb081b3570c81e3a
https://csstriggers.com/

강의에 관심을 가져주셔서 감사합니다. :)

Boom님의 프로필 이미지
Boom

작성한 질문수

질문하기