paint 단계 질문

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

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

작성

314

안녕하세요. paint단계에 대해 질문이 있습니다.

paint단계에서는 layout단계에서 크기와 위치가 계산된 것들을 영역별로 쪼개서 레이아웃을 만드는 것으로 알고 있는데 강의에서처럼 색을 칠하고 레이아웃도 만든다고 생각을 하면 될까요?

react devtools

답변 2

열씨미살자!

질문자

답변 감사합니다. 질문의 의도는 composite 단계에서 일어나는 레이아웃들을 차곡차곡 쌓는 과정에서 사용되는 레이아웃들이 어느 단계에서 만드는지에 대한 질문이였습니다.

유동균

지식공유자

Layout 단계 이후 Update layer tree 단계가 있습니다.
이 때 layer들을 나누게 되고, paint 단계를 거칩니다.

참고:

https://developers.google.com/web/updates/2018/09/inside-browser-part3?hl=ko#%EB%A0%88%EC%9D%B4%EC%96%B4%EC%97%90_%EB%8C%80%ED%95%9C_%EA%B3%A0%EC%B0%B0

유동균

지식공유자

안녕하세요 dongwoo kim님,

layout과 paint 과정에 대해서 질문을 주셨는데요,

우선 layout 과정에서는 요소들의 위치, 사이즈 등을 결정하고,

그것을 기준으로 paint 단계에서는 스타일(색상, 테두리 등)을 입힙니다.

말씀하신, paint 단계에서 레이아웃을 만든다는 말이 정확히 어떤 의미인지는 모르겠으나, 요소의 위치와 사이즈를 말씀하시는 거라면, 그 작업은 paint가 아니라 layout에서 이루어 집니다.

답변이 도움되었기를 바라며, 강의에 관심을 가져주셔서 감사합니다. :)

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

paint 단계 질문