[TIL/나만무 기획]기획 단계에서 지금까지 배운 것들

브라우저 렌더링 과정

DOM + CSSOM -> Render Tree -> LayOut -> Paint -> Composite 순

• DOM : HTML을 브라우저가 이해할 수 있는 형태로 변환하여 요소간 관계를 트리구조로 표현
• CSSOM : CSS를 브라우저가 이해할 수 있느 형태로 변환하여 요소간 관계를 트리구조로 표현
• Render Tree : DOM + CSSOM, 화면에 표시되는 각 요소의 레이아웃 계산시 사용
• LayOut : 렌더트리 완성 후 화면 구성 요소 위치 및 크기 계산, 해당위치에 요소 배치
• Paint : LayOut으로 잡은 요소에 색 추가
• Composite : Layer를 합성하는 단계

Reflow & Repaint

• Reflow : 렌더링 과정을 모두 재실행하여 화면을 새로 그리는 것(Positon, Display)
• Repaint : 글씨, 배경 같이 전체적 레이아웃이 아닌 속성이 변화(color, background)]

이런 과정이 자주 반복되면 화면을 새로 그리는 것이 느려짐.
transform, opacity 등의 속성을 활용하여 해당 요소를 별도의 레이어로 분리 & GPU에게 위임하여
애니메이션 성능 향상 가능.

애니메이션 최적화

기본 원리

애니메이션의 기본 원리는 여러장의 이미지를 빠르게 전환하여
눈에 잔상을 남겨 연속되는 것처럼 보이는 것.
보통 일반적인 디스플레이의 주사율은 60Hz 이다.
이말은 1초에 60장의 화면을 새로 그린다는 말.
애니메이션이 끊기는 Jank가 발생했다면 이게 제대로 되지 않았다는 말.

주사율을 어떻게 가져올까? : requestAnimationFrame

    <script>
      const hzDisplay = document.getElementById("hz-display");

      // 프레임 간의 타임스탬프를 저장할 배열
      const frameTimestamps = [];
      const numFramesToAverage = 60; // 평균을 낼 프레임 수

      function measureRefreshRate(timestamp) {
        // 타임스탬프 배열에 현재 프레임의 타임스탬프 추가
        frameTimestamps.push(timestamp);

        // 배열이 너무 길어지면 가장 오래된 타임스탬프 제거
        if (frameTimestamps.length > numFramesToAverage) {
          frameTimestamps.shift();
        }

        // 충분한 데이터가 쌓이면 주사율 계산 시작
        if (frameTimestamps.length >= 2) {
          // 첫 프레임과 마지막 프레임의 시간 차이 계산
          const timeDiff =
            frameTimestamps[frameTimestamps.length - 1] - frameTimestamps[0];

          // 프레임 수
          const frameCount = frameTimestamps.length - 1;

          // 초당 프레임 수(Hz) 계산
          const fps = (frameCount / timeDiff) * 1000;

          // 화면에 소수점 한 자리까지 표시
          hzDisplay.textContent = fps.toFixed(1);
        }

        // 다음 프레임에 또 이 함수를 호출하도록 예약
        requestAnimationFrame(measureRefreshRate);
      }

      // 측정 시작
      requestAnimationFrame(measureRefreshRate);
    </script>

직접적으로 가져올 수는 없고 requestAnimationFrame 이라는 함수를 이용하여 추적해야한다.
requestAnimationFrame은 브라우저에서 리페인트 주기에 따라 호출되는 함수.
이 함수를 1초에 몇번 호출하는지를 계산해서 주사율을 추정해야한다.

• 정글에서 제공한 DELL 모니터
  
• Macbook Pro M1 Retina Display
  

이 함수를 활용해서 브라우저가 화면을 갱신하는 주기와 맞추어 애니메이션을 매끄럽게 실행할 수 있다.