브라우저 작동 방식

• 브라우저란?
  • HTML, CSS, JS로 이루어진 웹 페이지를 해석, 화면에 그려주는 프로그램
• 알아야 할 것
  • 렌더링 최적화
  • DOM, Repaint, reflow, Layout 등의 이해 -> 성능 이슈 사전예방
  • JS는 브라우저의 JS 엔진 위에서 실행 (V8)
• 동작

1. URL 입력
2. DNS 조회 -> 요청 -> 응답(HTML)
3. HTML 파싱 -> DOM 생성
4. CSS 파싱 -> CSSOM 생성
5. DOM + CSSOM -> 렌더트리 구성
6. Layout 계산 -> 실제 위치와 크기 계산
7. Paint -> 픽셀 단위로 화면에 그려줌
8. Composite -> 최종 화면 출력

• 실생활 / 실무 예시
  • 페이지가 느릴 때 -> 렌더링 관련된 이슈 파악 가능
  • css 변경 -> repaint or reflow?
  • 브라우저 별 동작 차이를 고려한 크로스 브라우징 전략 수립
• 관련 개념
  
  • V8