• 안녕하세요 지금부터 세션 시작하겠습니다.
• 저는 황현구 입니다. 사내 FE 개발자들의 개발환경개선과 역량강화를 위해 일하고 있다.
• 공통 UI 컴포넌트를 활용한다.
• 이번 세션에서는 아직 표준 제안중인 기능을 활용해 성능개선을 해본 경험을 말씀드립니다.
• 사례들은 크게
• paint, layout animation audio, 브라우저 확장하는일

css paint api

• 스위치 컴포넌트
  • 스위치 컴포넌트는 인풋 엘리먼트에 CSS적용 하는거만으로도 가능하다.
  • CSS Painting API css속성중
• CSS Painting API 렌더링 파이프라인 크롬 기준으로 설명 드립니다.
  • 설명....
• css paint api는 개발자가 정의한 페인트 함수를 사용가능하게 해주는 api
• worklet이라는게 있다 경량 버전의 워커와 같다. 워커와 다르게 한 쓰레드에 여러게 생성 될 수 있다.
• 그려야할 대상이 많은등 성능이 필요한 경우에 병렬로 처리가능하게 해준다.
• 모듈작성

  • 기능은 모듈단위로 작성

  • 모듈 추가는 굉장히 단순

    코드..

  • 모듈을 추가하면 css에서 내가 정의한 페인트함수를 적용 할 수 있다.

• 어떻게 그리는지 보여주는 과정
  • 캔버스에 무언가를 그리는 것 처럼 엘리먼트를 어떻게 보여줄지 작성 할 수 있음
  • css 에서 매개 변수를 전달 해줄 수 있다.
  • 대상에게 적용된 css 스타일 정보를 조회해 다르게 렌더링 해 줄 수 있다.
  • 애니메이션을 적용하는 방법에 대해 설명..
• 성능 비교
  • 기존 카카오 맵 툴팁에서는 여러 개의 엘리먼트를 조합해 만듬 4개의div 1개의img를 조합해서 만들었다.
  • 엘리먼트가 많아지면 렌더링 파이프에서 메모리 사용량과 연산량이 많아져 결과적으로 화면 갱신이 늦어짐
  • 완전히 같은 모양의 툴팁을 카카오 맵 위에 천 개를 그려 보았다. 기존 방식으론 5천개의 엘리먼트로 구성 되었지만 css paint api 활용 하였을 때 절반으로 줄고 성능도 버벅이지 않고 빠르다.
• CSS layout api
  • css에 적용된 자식들?의 레이아웃을 적용 할 수있다.
  • 렌더링 파이프에서 레이아웃 계산하는 단계에서 우리가 만든 모듈을 적용시킬수있다.
  • 모듈 작성, 모듈 추가, 사용
    • CSS paint api 추가하는 거와 거의 동일
  • 레이아웃 함수는 제너레이터로 작성해야함
  • 작성에 대한 설명..