[브라우저] 브라우저의 렌더링 과정

브라우저(Browser)

• 브라우저란, 인터넷에 접속할 때 사용하는 Crome, Edge, Firefox과 같은 도구

 

 

브라우저의 렌더링 과정

 

1. 서버에 리소스 요청

• 서버에 html, css, javascript, 이미지 등 렌더링에 필요한 리소스 파일을 요청하여 다운로드 받는다.

 

2. html과 css를 파싱(parsing)하여 Object Model을 생성

• html → DOM(Document Object Model)
• css → CSSOM(Cascading Style Sheets Object Model)
• 파싱 과정
  1. 바이너리 코드의 형태로 온 서버의 응답을 읽고, meta태그의 charset에 의해 지정된 인코딩 방식을 기준으로 이진수를 문자열로 변환
  2. 문자형태의 html을 토큰화(토큰화 알고리즘에 따라 의미 단위의 코드 분해)
  3. 토큰을 다시 객체로 변환하여 node를 생성
  4. node의 관계를 이용한 트리구조 생성 → DOM
• 렌더링 엔진은 html을 순차적으로 파싱해 나가다가 css를 로드하는 파일이나 style태그를 만나게 되면 DOM 생성을 멈추고 CSSOM을 생성. CSS파싱이 완료되면 다시 DOM 생성 진행
• 또한, html 파싱과정에서 script태그를 만나게 되면 DOM 생성을 멈추고 자바스크립트 코드를 실행하게 됨.
• display : none 과 visibility : invisible 속성
  • 두 속성 모두 눈에 보이지 않는 요소이지만, 차이가 있다
  • display : none으로 설정된 노드는 Render Tree에서 제외되지만, visibility : invisible은 보이지는 않지만 공간을 차지하며 Render Tree에 포함됨
    

 

3. 렌더 트리(Render Tree) 생성

• DOM과 CSSOM 생성이 완료되면 렌더링을 위해 렌더 트리로 결합됨.
• 렌더 트리는 브라우저 화면에 보여지지 않는 것들은 포함하지 않는다. (meta 태그, css의 display : none 속성 등)
• 렌더 트리는 html 각 요소의 레이아웃(Layout)을 계산하는데 사용

 

4. 레이아웃 계산

• 렌더 트리를 화면에 어떻게 배치할 것인지 위치와 크기를 계산
• em, rem, %... 등을 계산하여 픽셀로 변환

 

5. 페인트

• 레아이웃에서 계산된 값(위치, 색상)을 이용하여 각 노드를 화면상의 픽셀을 채워나감

 

❓리플로우와 리페인트

• 자바스크립트 코드에 html이나 CSS를 변경하는 DOM API가 사용된 경우, 변경된 DOM와 CSSOM이 다시 렌더 트리로 결합되고 변경된 렌더 트리를 기반으로 레이아웃 계산과 페인트가 다시 실행되는 과정
• 대표적인 리플로우의 원인
  • 윈도우 리사이징 (뷰포트 변화는 Global Layout에 영향)
  • 폰트의 변화 (height계산에 영향을 주므로 Global Layout에 영향)
  • 스타일 추가 또는 제거(레이아웃을 바꾸므로)
  • 내용 변화 (인풋박스에 텍스트 입력 등..)
  • :hover와 같은 CSS Pseudo Class
  • 클래스 Attribute의 동적 변화
  • JS를 통한 DOM 동적 변화
  • 엘리먼트에 대한 offsetWidth / offsetHeight (화면에서 보여지는 좌표) 계산시
  • 스타일 Attribute 동적변화