프론트엔드 개발자를 위한 레이어 모델 - 인턴님 성함이..?

브라우저 - HTML 문서나 파일과 연동하고 출력하는 응용소프트웨어

DOM은 한장의 비트맵을 만들어 출력함.

웹브라우저는 돔 트리를 그대로 그리지 않습니다.

렌더트리 변환과정이 필요하다.

예전엔 하나그리고 하나그리는 식이었다.

지금은 각각의 레이어를 그리고 GPU가 합친다.

렌더러레이어 - 논리적레이어

렌도링 절차

1. 자바스크립트 읽고 해석하고
2. CSS를 읽고 CSSOM을 생성하고
3. 읽어온 DOM의 적합한 위치에 배치
4. 배치
5. 그리기

업데이트가 발생하면

리플로우 리페인트

리플로우 리페인트는 비싼 비용을 치루기때문에 비용을 줄일 방법을 고민.

그래픽스레이어

하드웨어 가속처리를 위해 물리적 레이어

리플로우 리페인트도 같은 레이어 안에서 처리.

• z인덱스가 다르면 논리적 레이어 2개 물리적레이어 1개 비트맵 1개

• 트랜스레이트요소가 있으면( 레이어 승격 ) 논리적 레이어 2개 물리적레이어 2개 비트맵 1개

• 트랜스레이트요소가 아래레이어에있으면 논리적 레이어 2개 물리적레이어 ? 비트맵 1개 - ?는 2개임. 상위 레이어도 승격해줌.

합성

일부 속성은 CPU에서 레이아웃 재계산 없이 GPU에서 처리가능

transform, opacity 레이아웃 계산 없이 GPU에서 처리 되므로 빠르게 렌더링됨.

애니메이션에 유리.

자바스크립트 애니메이션과 CSS애니메이션으 다른 점 - GPU가속을 사용할 수 있느냐.

레이어만들기 ( 최적화)

transform: transrateZ(0) // 일부러 분리해서 다른 곳에 영향안미치게 - 스피너

will-change: transform

그럼 모든 엘리먼트를 다 레이어로 분리하면?

빌드시간이 오래걸림.

리플로우 리페인트등과 밀당을 해야함.

2023년 새해에는 성장하고 함께하고 싶다면?

Pre A 단계 이상의 스타트업 C 레벨들이 모여서 커뮤니티를 만들었습니다. 같이 스터디하고 친해질 일잘러를 찾습니다.