인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

Inflearn Community Q&A

takeaways's profile image
takeaways

asked

Real-world web performance optimization for frontend developers (feat. React) - Part. 1

2-3) Animation Analysis (Reflow and Repaint Theory)

textContent 변경하면

Written on

·

286

1

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

DOM -> renderTree -> composition 인가요? 

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

reactdevtools

Answer 1

1

hackurity01님의 프로필 이미지
hackurity01
Instructor

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

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

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

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

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

takeaways's profile image
takeaways

asked

Ask a question