Critical rendering path

브라우저에서 URL을 입력하게 되면 이런 순서로 진행이 된다.

requests/response -> loading -> scripting -> rederting -> layout -> painting

• requests: 브라우저가 서버에서 HTMl 파일을 요청
• response: HTML파일을 서버에게 받는다.
• loading : HTML파일 로딩
• scripting: HTML파일을 한줄씩 읽어 DOM 요소로 변환. CSS 요소를 CSSOM으로 변환.
• rendering: 브라우저에 표기할 준비 Rendering tree 생성(DOM tree + CSSOM tree)
• layout: 각의 요소들의 위치나 크기를 계산한다.
• painting: 그림을 그린다.

• construction 파트

  • HTML페이지에서 브라우저가 이해할수 있는 언어로 바꿔주는 파트.
  • DOM요소, CSS규칙이 작을수록 좋다. 이유는 tree가 작아지기 때문에 빠르게 만들수있다.
  • DOM요소 변환 및 CSSOM 만들고 최종적으로 RenderTree까지 만드는 파트

• Operation 파트

  • 브라우저가 이해 할 수 있는 Rendering tree를 이용해서 구조를 작성하고 어디에 배치할 건지 계산한 다음 실제로 브라우저 window에 그림을 그려주는 rendering하게 되는 파트.
  • layout, paint, composition을 통해서 최종적으로 사용자에게 웹페이지가 보여지게 된다.
  • layout: CSS스타일의 정보를 기반으로 요소들의 위치, 크기를 계산하여 레이아웃 구상.
  • paint: 레이어단계를 만들어 레이어별로 준비해만 놓는다.
    (부분수정이 가능하여 성능 개션을 위해 레이어별로 준비하는것이다.) ex) will-change: opacity
  • composition: 레이어를 순서대로 브라우저에 표기한다.
  • 자바스크립트나 CSS로 DOM 요소를 조작할 때:
    Composition만 일어나면 좋고, paint는 썩 좋지는 못하고, layout이 일어나면 최악의 경우이다.