하드웨어 가속에 대한 이해와 적용
📄

하드웨어 가속에 대한 이해와 적용

Created
Dec 30, 2022 05:34 AM
Tags
performance
web
css

Introduce

  • 웹 렌더링은 전통적으로 CPU에 의존했으나, 최근 GPU(하드웨어 가속)를 많이 활용
    • GPU를 렌더링에 활용하는 하드웨어 가속을 사용하면 성능 향상의 이점
    • 그러나 무별하게 사용하면 오히려 해가 될 수 있음
  • 여기서는
    • 하드웨어 가속의 기본적 이론
    • 하드웨어 가속을 사용할 때 유의 사항
    • will-change CSS 명세를 이용한 하드웨어 가속

하드웨어 가속이란

  • 하드웨어 가속
    • Graphics Layer 단위로 렌더링 된 이미지를
    • GPU가 한 장의 이미지로 합성(Composition)해 화면에 출력하는 기술
  • 브라우저가 웹 페이지를 렌더링하기까지의 과정
    • notion image
      1. HTML 소스 로딩 & 파싱
      1. DOM Tree 구성
          • 화면에 표현되는 요소와 그렇지 않은 요소로 구성됨
          • <head> 또는 <script> 는 화면에 표현되지 않음
      1. Render Object Tree 구성
          • 화면에 실제로 표현되는 요소
      1. Render Layer 구성
          • z-index 와 같은 레이어 개념을 처리하기 위해 고안된 Layer Tree
      1. Graphics Layer
          • Render Layer 요소 중 GPU에 업로드 될 요소
          • 레이어 각각을 이미지로 출력해 하드웨어 가속에 사용
      1. GPU에 업로드 된 이미지는 연산을 통해 화면에 표시될 최종 이미지로 합성
          • GPU에 업로드 된 이미지 = 3차원 그래픽 표면에 다양한 형태로 매핑 가능
          • 이동, 변형(Transformation)과 같은 작업도 이미지를 매핑하는 형태로 진행
          • GPU의 도움으로 더 적은 비용 & 다양한 선형 변환을 할 수 있게 됨
  • Render Layer 요소 중 아래 조건 하나 이상에 부합되는 경우 하드웨어 가속 대상
  • 가속 대상에 포함되었는지 확인할 수 있는 방법
  • 최상위 레이어
    • <body>Hi</body> 와 같은 단순한 HTML 처리 시에도 Graphics Layer 생성
    • 따라서 항상 하나 이상의 Graphics Layer가 존재하게 됨

유의 사항

  • 성능 향상을 기대할 수는 있으나, 모든 요소를 대상으로 적용하면 안 됨
    • 무분별한 하드웨어 가속은 되려 성능 하락으로 이어짐
    • 하드웨어 가속 대상이 되면 GPU에 업로드 → 이 때 영역이 크면 깜빡이는 현상이 발생될 수 있음
    • 하드웨어 가속 속성이 부여되면 Graphics Layer로 분리 → 변경되는 내용이 없으면 GPU 메모리에 다시 업로드하지 않음
    • 하드웨어 가속 대상이 된 이후 요소의 내용이 변경되면 GPU 메모리가 갱신 → 모든 변경 이후 하드웨어 가속 속성을 부여하는 것이 좋음
    • 성능이 낮은 기기에서는 부적절
  • 그 외 고려 사항들
    • 하드웨어 가속을 적용하는 요소의 크기는 작을수록 좋음
      • 요소의 개수는 화면에서 5~6개로 구성하는 것이 좋음
    • 하드웨어 가속을 결정하는 CSS 프로퍼티의 값에 따라 요소의 영역이 커질 수도 있다는 것을 유의
      • 가령 text-indent 또는 left 의 값을 -9999px 같이 해버리면 콘텐츠 영역의 크기가 늘어나며
      • 따라서 Graphics Layer 크기도 증가하기에 불필요하게 메모리 사용하게 됨
    • 내용이 자주 변경되지 않는 영역에 하드웨어 가속을 적용
      • 내용이 아닌 이동이나 크기가 자주 변경되는 영역에만 하드웨어 가속을 적용
      • 내용이 변경되면 GPU 메모리가 갱신되기에 불필요하게 리소스가 낭비됨

will-change CSS 프로퍼티

  • Graphics Layer 생성 비용 = 높음
    • translate3d() 등의 Layer-Hack을 이용해 하드웨어 가속 → 무의미한 CSS 프로퍼티까지 하드웨어 가속에 포함되어 성능 저하 발생 가능
    • will-change 프로퍼티를 이용해 어떤 CSS 프로퍼티가 동적으로 변할지 브라우저에게 알려줌
  • will-change
    • .some { will-change: transform, opacity; }
    • 브라우저에서 지정된 CSS 프로퍼티를 변경하기 위한 작업을 사전에 최적화
    • 더 효율적으로 Graphics Layer 생성이 가능
    • 다만 브라우저는 최적화를 위해 일정 시간 동안 데이터를 캐싱 → 더 이상 하드웨어 가속을 사용하지 않으면 해당 프로퍼티를 제거하는 것이 좋음