성능 보장 렌더링 순서

성능 보장 렌더링 순서

requests/resopnse → loading → scripting → rendering → layout → painting

Critical Rendering Path

• Construction
  • DOM
  • CSSOM
  • RenderTree
• Operation
  • layout : 우리가 만든 RenderTree를 기반으로 해서 레이아웃 구상, 무엇을 어디에 구성할지
  • paint : 각각 부분을 조금씩 나누어 이미지(비트맵) 준비, 레이어 별로 paint를 준비, 중요하지만 너무 많이 남용해서 사용금지
  • compositon:레이어 순서대로 차곡차곡 표기