inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

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

textContent 변경하면

306

Boom

작성한 질문수 20

1

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

DOM -> renderTree -> composition 인가요? 

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

react devtools

답변 1

1

유동균

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

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

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

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

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

bundle analyzer 에 대한 질문이 있습니다.

0

108

2

Cannot find module serve 에러

1

104

1

성능 탭에서 소요시간이 안보입니다

0

205

2

이미지 CDN 만드는 방법

0

459

1

Performance FPS 탭이 안보여요.

1

797

1

CPU throttling이 뭔가요?

0

1119

1

default export가 아닌 named export일 때 lazy사용법

1

1070

1

lazy적용하였는데 네트워크탭에 분리하여 보이지 않습니다

1

583

1

network 캐싱에 대해서 질문 있습니다!

1

427

1

vue project에서 chrome performance tab 확인하기

1

458

1

node version으로 인한 오류

4

1231

1

강의 자막

1

956

2

번들파일과 병목현상 질문

2

396

1

webpack-bundle-analyzer 질문

1

786

1

이미지 프리로딩 질문

1

385

1

이미지 최적화 활용

1

581

1

강력 새로고침

1

323

1

Suspense 관련해서 질문드립니다

2

360

1

config-overrides cant resolve path

1

362

1

이미지 preload 컴포넌트 preload 차이 질문드립니다.

1

611

1

custom react 환경에서 node_modules chunk 분리

1

380

1

removeSpeical 함수를 줄여야겠다고 하는 이유!

1

282

1

Factory pattern에 대해서 궁금한 점이 있습니다

2

366

2

텍스트 압축 방식에 대해 질문이 있습니다

2

951

1