박규한

woowacourse 6th FE

2 분 소요

transform을 사용하면 reflow, repaint를 일으키지 않고 합성 단계만 거쳐 애니메이션 최적화를 통해 개선되었다.

[ transform 속성을 활용하면 왜 합성 단계만 거치나요? ]
transform은 좌표공간을 변형함으로써 문서 흐름을 방해하지 않고 콘텐츠의 형태와 위치를 바꾼다.
transform을 적용하면 브라우저는 해당 요소를 별도의 레이어로 분리한다.
레이어가 분리되면 해당 레이어의 변경 사항은 렌더 트리 전체에 영향을 주는 게 아니라, 해당 레이어의 변환만을 적용한다.
따라서 reflow, repaint 단계를 거치지 않고 합성 단계만 거친다.

[ 합성 단계만 거치기 때문에 transform 속성이 빠른 건가요? ]
CPU는 메인스레드 작업을 담당하는데, CPU가 무거운 연산을 처리 중이면 CPU 기반 애니메이션은 동작이 멈출 수 있다.
따라서 그래픽 처리에 최적화되어 있는 GPU를 활용하여 애니메이션을 병렬로 처리할 수 있다.
transform을 사용하면 해당 요소를 별도의 레이어로 분리하면서 GPU 가속을 활용한다.

따라서, transform 속성은 별도의 레이어에서 처리되어 reflow를 발생시키지 않으며, GPU를 활용하여 병렬 처리되기 때문에 애니메이션 최적화가 이뤄진다.

image

비대체 인라인 박스, <colgroup>, <col> 은 transform을 적용할 수 없다.

비대체 인라인 박스 : 인라인 박스에 속하면서 비대체 요소인 요소들이 생성하는 박스

  • <span>, <a>, <strong>과 같은 인라인 요소들이 텍스트와 함께 생성하는 박스

Element는 블록 박스와 인라인 박스로 분류되며, 대체 요소와 비대체 요소로도 분류된다.

경고: 변형 가능한 요소만 transform할 수 있습니다. 즉, CSS 박스 모델이 레이아웃을 결정하는 모든 요소 중 비대체 인라인 박스, 표 열 박스, 표 열 그룹 박스를 제외한 요소에만 적용할 수 있습니다. - MDN

왜 Non-Replaced Inline Boxes는 transform을 사용할 수 없나요?

비대체 인라인 박스는 레이아웃이 텍스트의 흐름에 밀접하게 연결되어 있다.

이러한 요소에 transform이 적용되면 레이아웃을 재계산해야 한다.

colgroup과 col도 같은 이유로 transform이 적용되면 table의 레이아웃을 재계산해야 한다.

따라서 transform 속성을 사용하면 합성 단계만 이뤄지도록 타겟 요소에서 제외된걸로 이해할 수 있다.

테스트 결과

  • 블록 박스인 div는 transform이 적용된다.
  • 비대체 인라인 박스 요소인 span, a, strong 태그는 transform이 적용되지 않는다.
  • colgroup과 col 태그도 transform이 적용되지 않는다.
const TransformComponent = () => {
  return (
    <div>
      <span style=>span : 안녕하세요</span>
      <a style=>a : 안녕하세요</a>
      <strong style=>strong : 안녕하세요</strong>
      <div style=>div : 안녕하세요</div>
      <p style=>p : 안녕하세요</p>
      <table>
        <caption>transform 테스트</caption>
        <colgroup
          style=
        >
          <col />
          <col span={2} style= />
          <col span={2} style= />
        </colgroup>
        <tbody>
          <tr>
            <td></td>
            <th scope="col">Batman</th>
            <th scope="col">Robin</th>
            <th scope="col">The Flash</th>
            <th
              scope="col"
              style=
            >
              Kid Flash
            </th>
          </tr>
          <tr>
            <th scope="row">Skill</th>
            <td>Smarts, strong</td>
            <td>Dex, acrobat</td>
            <td style=>
              Super speed
            </td>
            <td>Super speed</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')!).render(<TransformComponent />);

image

will-change

will-change : 브라우저에게 앞으로 변화를 예고하는 역할

특정 속성이 변경될 때 성능을 최적화할 수 있도록 컴포지터 레이어(compositor layer)를 미리 생성

transform 속성만 사용해도 새로운 레이어를 생성할 수 있지만, will-change 를 명시적으로 지정하면 브라우저가 해당 요소를 위한 새 레이어를 미리 준비한다.

will-change 는 브라우저가 메모리 내에 오랫동안 최적화 상태를 유지하게 하여 성능적인 문제가 생긴다. 과도한 최적화는 독이 되므로 성능 문제가 생겼을 때만 사용해야 한다.

📘 reference

댓글남기기

참고