Keyword

DOM(Document Object Model)
- DOM이 변경되면 렌더 트리를 만들고, 레이아웃(조금이라도 배치가 바뀌어도 레이아웃 과정이 일어남)을 하고, 페인트를 하는 과정이 다시 일어난다.
- 여기서 Layout은 실제로 컴퓨터의 CPU를 많이 먹고, Paint는 GPU를 많이 먹는다.
  - 유저의 눈에 일련의 과정이 부드럽게 처리되기 위해서는 초당 60프레임은 유지시켜야 한다.
    - 1프레임 당 0.024초 정도 됨
  - 이 짧은 시간, 즉 1 프레임 안에 레이아웃과 페인트 과정을 동시에 해야만 한다. 그렇기 때문에 프레임 드랍 현상과 직접적인 연관이 있음
    - 프레임 드랍(Frame Drop) : 초당 유지시키던 프레임의 수가 줄어드는 현상을 뜻한다. 줄어들어 드랍이 되어버린 프레임은 렌더링 엔진이 인식할 수 없어 브라우저 화면에 그리지 않습니다. 그렇기 때문에 유저는 해당 현상을 "화면이 멈춘다, 버벅인다" 라고 느끼게 된다.
  - SPA, SSR 모두 이것과 직접적으로 연관이 됩니다. 따라서 SPA와 SSR이라는 것들이 궁극적으로 무엇을 위해서 나왔는지 알려면 이 과정을 이해해야만 합니다.
불필요한 Layout을 줄여야 한다.
- 불필요한 Layout을 하나만 줄여도 렌더링 퍼포먼스를 최적화할 수 있어 성능 이점이 있다.
  - DOM의 CSS 속성 중에 레이아웃을 발생시키는 속성들이 있는데, 이 속성을 사용하게 되면 DOM은 그때마다 변경이 되어 렌더 트리를 만들고, 레이아웃을 발생시키고, 페인트를 하는 과정이 연속적으로 일어나기 때문에 이런 레이아웃을 발생시키는 속성을 피한다면 해당 과정이 발생하는 횟수를 줄일 수 있을 것이고, 따라서 렌더링 퍼포먼스를 높이는 효과를 보인다.
- 그래서 레이아웃을 발생시키는 속성들을 알고 있어야 한다.
  - 특히 CSS에 그러한 속성이 많이 있음
    - left 속성 중 left-top, left-bottom 속성을 사용하면 위치가 변경이 됩니다. (position 속성과 같이 쓴다.) 이 left 속성은 레이아웃을 발생시키는 속성 이다. 따라서 이 속성을 가지고 애니메이션을 만들 때는 프레임 유지를 보장하기 어려워진다.
    - 그래서 이 속성을 피해 transform이라는 속성을 사용합니다. transform에 있는 translate를 사용하면 좌표 값을 사용해 위치를 이동하지만, 레이아웃을 발생시키지 않기 때문에 페인트만 다시 발생시키는 쪽으로 렌더링 과정이 일어나기 때문에 유지하고자 하는 프레임 수를 기대할 수 있다.
    - 또는 will-change 속성을 사용해서 구현할 수도 있다.
- 레이아웃 과정은 줄일 수 있지만, 페인트는 최적화시킬 수 있는 방법이 존재하지 않음, 페인트는 유저에게 화면을 보여주기 위해 그리는 과정이라서 필수적인 과정입니다. 그래서 페인트 과정을 줄일 수는 없습니다. 따라서 프론트엔드 개발자가 되어 브라우저 렌더링의 최적화 과정을 수행하고자 한다면 레이아웃이 일어나는 상황을 최대한 피하는 것이 좋기 때문에 해당 과정은 굉장히 중요하다.
파싱
- 문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미
- 파싱 결과는 보통 문서 구조를 나타내는 노드 트리가 되는데, 파싱 트리(parse tree) 또는 문법 트리(syntax tree)라고 부르게 된다.
- 렌더링 과정에서는 HTML 파일을 바탕으로 DOM 트리를 만드는 것을 파싱한다고 표현한다.
- 파싱은 문서에 작성된 언어 또는 형식의 규칙에 따르는데 파싱할 수 있는 모든 형식은 정해진 용어와 구문 규칙에 따라야 합니다. 이것을 문맥 자유 문법이라고 합니다. 인간의 언어는 이런 모습과는 다르기 때문에 기계적으로 파싱이 불가능합니다.
객체모델

DOM

Document Object Model 이라고 합니다. 트리 구조로 이루어진 객체 모델이다.

<!DOCTYPE html>
<html>
  <head>
    <title>DOM</title>
  </head>
  <body>
    <h1>
      DOM이란?
    </h1>
    <p>
      Document Object Model
    </p>
  </body>
</html>

(parsing) ⇒

스크린샷 2022-03-31 오후 10.30.34.png

CSSOM

CSS Object Model 이라고 함, 해당 객체 모델 또한 트리 구조로 이루어짐

p,div{
  margin-top : 5px;
}

.error{
  color : red;
}

⇒

스크린샷 2022-03-31 오후 10.52.52.png