브라우저 렌더링 파이프라인

정의

• CRP(Critical Rendering Path)
• 브라우저가 HTML, CSS, JS를 이용해 실제 화면에 픽셀을 그리는 단계

과정

1. DOM tree 만들기
   • 트리 노드 개수에 따른 성능 차이 있음
2. CSSOM tree 만들기
   • selector의 복잡성에 따라 성능 차이가 있지만 극히 미미하여 최적화를 고려할 필요까진 없음
   • 최적화를 한다면 차라리 media query를 이용한 non-blocking request 이런걸 하는게 나음
3. Render tree 만들기
   • DOM, CSSOM을 합침
   • 실제 화면에 보이는 애들만 갖고 만듦 (display: none 이런애들은 무시)
4. Layout
   • viewport 기반으로 element의 실제 크기와 위치 계산
   • Render tree가 변하면 이 과정이 무조건 실행 (reflow)
   • animation 쪽 개선 또는 update batching 등으로 최적화 가능
5. Paint
   • 실제 화면 픽셀들을 색칠하는 과정
   • on load: 전체 paint
     after load: 변하는 부분만 paint
   • 상당히 빠른 작업이라 최적화 우선순위는 아니지만 염두에 두기

최적화

• 중요하지 않은 파일 다운로드를 미루기
• 파일 요청 횟수, 요청 크기 최적화
• 파일 중요도에 따른 다운로드 순서 조정

기타

• 렌더링 엔진
  블링크: 크로미움
  게코: 파이어폭스
  웹킷: 사파리
  트라이든트: 인터넷 익스플로러