[DOM] Critical Rendering Path

Date: 2021-04-26

---

Summary

• HTML이 브라우저에서 해석되어 사용자에게 보여지는 과정은 크게 Construction과 Operation으로 나눌 수 있다.
  • Construction: DOM -> CSSOM -> Render Tree
  • Operation: layout -> paint -> composition
• Operation의 layout과정은 앞의 Render Tree(computed css rules를 가지고 있음.)를 참고해 개략적이고 전체적인 layout을 구성한다. 정확히 어디에 얼마만큼 크게 구성되는지를 결정함.
• Operation의 paint과정은 웹페이지에서 애니메이션이 발생했을 때 layout을 다 그리는 비효율적인 일을 최대한 피하기 위해 각 요소들을 layer로 분리하여 만듦. => 변경 된 부분에 해당 layer만 다시 그려주면 됨!
• Operation의 composition과정은 앞의 paint과정에서 만들어진 layer들을 z-index에 맞게 쌓아준다. (z-index가 높을수록 나중에 쌓음; 위로 감)