브라우저 렌더링

HTML, CSS, JavaScript를 브라우저에 출력하는 과정

렌더링 과정

1. 사용자가 브라우저를 통해 웹 사이트에 접속하면 네트워크 통신하여
2. 브라우저는 서버로부터 HTML, CSS, JavaScript 등 웹사이트에 필요한 리소스를 다운
3. 렌더링 엔진은 전달받은 HTML 문서를 파싱(parsing)해 DOM(Document Object Model, 문서 객체 모델) 트리 생성
4. 다운 받은 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱(parsing)해 CSSOM(CSS Object Model, CSS 객체 모델) 트리 생성
5. Render 트리 구축 = DOM 트리 + CSSOM 트리 결합
6. Layout - 각 요소 배치 결정
7. Paint - UI 백엔드에서 Render 트리를 화면에 출력

파싱 Parsing

구문 분석(syntax analysis) 단계

파서(parser) 란?

: 파싱하는 일종의 인터프리터나 컴파일러 구성 요소 가운데 하나.

• HTML 파일의 코드를 문법적 의미를 갖는 최소 단위인 토큰(token)으로 한 번 분해하고,
• 이 토큰을 문법적 의미와 구조에 따라 노드(node)라는 요소로 바꿉니다.
• 노드들은 상하관계에 따라 하나의 트리를 형성하는데, 파스 트리(parse tree)나 문법 트리(syntax tree)라 부름

문서 파싱(document parsing) - 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것

• 렌더링 과정에서는 HTML 파일로 DOM 트리를 구축하고 CSS 파일로 CSSOM 트리를 만드는 것을 파싱한다고 표현.

• 브라우저는 HTML받고 DOM 트리로 파싱.
  파싱되며 HTML 토큰이 생성되는데, 이 토큰에는 시작태그, 마침태그, 속성 이름, 값 포함. 토큰화된 입력값은 파서에 의해 노드가 되고, DOM 트리를 구성함

• 브라우저는 HTML 파싱하면서 CSS스타일 만나면, 텍스트를 CSS 스타일링 레이아웃과 페인팅에 사용하는 데이터 구조인 CSSOM 트리로 파싱하고,
  태그를 만나면, 렌더링을 차단하면서 HTML 파싱 또한 중단합니다.
  이어 script 다운 받아 파싱하고 실행 후, 다시 HTML 파일을 파싱함

• 파싱은 문서에 작성된 언어, 형식의 규칙에 따르는데
  파싱할 수 있는 모든 형식은 정해진 용어와 구문 규칙에 따라야 함.
  따라서 형식을 잘 갖춘 문서면 파싱 과정은 직관적이고 빠르게 진행됨.

DOM 트리

Document Object Mode

• 브라우저가 JS만 알아들으므로 HTML를 이해못함.
  응답으로 받는 HTML은 텍스트로만 이뤄졌기때문에 이해할 수 있는 객체로 바꿔준 것.

CSSOM 트리

CSS Object Model

• HTML에서 <link>, <style> 태그 만나면 파싱 중단 후, 해당 리소스 파일을 서버로 요청하는데, 이 요청한 파일을 파싱해서 만든 트리.

• CSSOM 트리 구축하면 다시 중단됐던 DOM트리 파싱함

Render 트리

DOM 트리 + CSSOM 트리 결합

• dom구조에 맞는 스타일 속성들이 결합됨

• DOM 트리, CSSOM 트리는 트리구조만 비슷하고 리소스부터 다른 독립적인 트리이기 때문에 결합하는 작업이 필요하다.

• 눈에 보이지 않는 요소는 트리에 포함안됨
  ex) <meta>, display:none

Layout

Render 트리 기반으로 HTML 레이아웃 계산하여 화면 배치를 결정하는 과정

• 화면 배치에 대한 계산을 브라우저의 렌더링 엔진이 한다
• 브라우저는 렌더트리를 위에서 아래로 읽음
• %, rem 등 상대적 단위를 뷰포트에 맞는 절대적 단위 px로 변환됨
• 위치와 크기가 결정됨

Paint

레이아웃대로 화면에 그리기

• 브라우저 화면은 픽셀이라는 작은 점들로 구성되어 있음
  각 정보를 가진 픽셀이 화면 구성
• 페인팅은 픽셀 정보를 바탕으로 픽셀 그리는 과정
• 색상, 이미지, 그림자 등 속성 적용됨
• 리플로우(Reflow)와 리페인트(Repaint)
  사용자가 화면늘리거나 요소 추가되는 등이 생기면, 다시 위치 고려하고 다시 그리는 과정

리플로우(Reflow)와 리페인트(Repaint)

• 리플로우(Reflow) - 레이아웃을 반복해 수행하는 것
  • 배치 연산으로 CPU 많이 차지함
• 리페인트(Repaint) - 페인트 반복해 수행하는 것
  • 픽셀을 화면에 재출력함으로 GPU 많이 차지함
    
    

리플로우와 리페인트의 최적화해야 하는 이유

• 초당 60 프레임은 반드시 유지. 떨어지면 않좋다

• DOM 변경시마다 렌더트리 다시 구축하므로 리플로우,리페인트 다시 해야함

• 프레임 드랍(Frame Drop) 현상
  초당 60프레임의 수가 브라우저의 과부하로 인해 줄어드는 현상

  • 없어진 프레임은 렌더링 엔진이 인식 못해서 화면 출력 못함
  • 화면이 버벅이므로 UX에 안좋음
    
    

리플로우와 리페인트의 최적화

• CSS에서 레이아웃, 페인트 발생시키는 속성 줄이기

1. left 속성 중 left-top, left-bottom 속성 (주로 position 속성과 같이 씀)
2. ✅ 위 속성 말고 transform: translate(x,y) 속성을 사용하기
   transform에 있는 translate를 사용하면 좌표 값을 사용해 위치를 이동하지만, 레이아웃을 발생시키지 않기 때문에 페인트만 다시 발생시키는 쪽으로 렌더링 과정이 일어나기 때문에 유지하고자 하는 프레임 수를 기대할 수 있습니다.
3. tranform: translate3d(x,y,0)

• 변경될 요소에 css will-change:transform 속성 사용
  참고유튜브

4. visibility/display 보다 opacitiy 사용하기

5. 영향 주는 노드 줄이기
   position을 absolute 또는 fixed를 사용해주면 영향을 받는 주변 노드들을 줄일 수 있다. fixed와 같이 영향을 받는 노드가 전혀 없는 경우 리플로우 과정이 필요 없어서 리페인트 연산 비용만 들일 수 있다.