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