Browser rendering optimization
javascript: JavaScript로 시각적 변화가 트리거되는 작업을 처리하는데 사용
style: css rule을 어떤 요소에 적용할지 계산하는 프로세스
layout: 요소가 화면에서 얼마의 공간을 차지하고 배치되는지 계산하는 작업
paint: 픽셀을 채우는 프로세스로, 다수의 layer에서 수행
composite: 그려진 여러 layer를 가지고 page를 그리는데 정확한 순서로 화면에 그리는 합성 과정
60fps (60 tiems a second)란?
각 기계마다 1초에 몇 프레임이 그려지는지를 표현하는 단위
한장을 그릴 때 1초 (1000ms/60) = 16.6ms안에 브라우저가 표현되어야 한다.
브라우저에서 그리지 못할 경우 애니메이션이 끊겨서 보여지는 현상이 나타난다.
위 모든 단계를 16.6ms안에 그래서 불필요한 과정은 생략하고 압축해서 수행해야 하는것이 기본적인 최적화이다.
[크롬 브라우저 Rendering Path]
- Recalculate Style
- height 속성 변경으로 좌표 계산이 필요한지?
- 필요하다면 layout발생(reflow)
- 효과적인 처리를 위해 update layer tree
- 계산된 영역 정보를 비트맵으로 저장하기 위해 paint 발생
- composite layer 작업에서 레이어를 병합 후 화면을 출력이러한 애니메이션 동작을 위해서는 16.6ms내에 처리되어야 한다.
[layoer 모델]
웹 페이지를 렌더링하기 위해 필요한 이미지 단위 요소이다.
- 레이어들을 배치/합성하여 최종적인 웹 페이지를 표현한다.
- 모든 페이지를 root레이어를 가진다.
- 레이어의 이미지는 텍스처로서 paint작업시 CPU에 의해서 Video Memmory에 로드된다.
- 결국 레이어 생성 비용이 크고 추가 memory가 필요하게 된다.
마치 층 처럼 움직이는데 기존의 process와 별개로 하나의 레이어가 특정한 레이어 층과 만났을 때 생성되는 것이다.
레이어 트리거: 어떤 특정 프로퍼티
transform이라는 css property를 만들게 되면 레이어를 새롭게 만들라는 트리거로 작용하게 된다.
결국은 웹 브라우저화면에서 기존의 렌더링 프로세스와 별개로 또 하나의 화면이라 부를수 있다. 어떠한 화면을 렌더링 할 것인지 병합하는 과정이 composite layer이다.
브라우저 렌더링 프로세스들이 어떤 장치가 수행하는 것일까?
더 빠른 렌더링을 위해 렌더링 최적화 작업이 필요하다.
script가 들어왔을 때 CPU에서는 Recalculate style을 수행한다.
레이어를 업데이트 -> 메인 메모리 저장 -> 페인트
GPU안에서 연산을 한다.
Composite Layer
연산 능력보다 GPU가 더 빨리 연산을 할 수 있다.
Composite layer가 연산 비용이 더 적다.
같은 dom을 조작시키는 상태에서 cpu조작보다 GPU조작을 하는 것이 비용적으로 더 적게 드는 것이다.
어떻게 하면 성능을 개선할 수 잇는지에 대한 대답은
RAYPER와 PAINT를 최
✔️ 참고
