안녕하세요 지금부터 세션 시작하겠습니다.
저는 황현구 입니다. 사내 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 추가하는 거와 거의 동일
레이아웃 함수는 제너레이터로 작성해야함
작성에 대한 설명..