브라우저 랜더링3 (최적화)

이전글에서 아래와 같이 설명을 했습니다 

 

CPU 가 레이아웃을 처리하고 레이어를 업데이트 함

메인메모리에서 paint라는 과정으로 비디오 메모리로 전달을함

이후 GPU에서 Composite 레이어 작업이 실행됨

 

위의 과정에서 레이어 분리 composite으로 layer tree 업데이트나 페인팅과정을  생략하면 성능적으로 좋다

CPU 보다 GPU의 연산능력이 비용이 적다 

따라서 랜더링 성능을 개선하려면 

레이아웃과 페인팅을 최소한으로 발생시키고 되도록이면 composite으로 대체한다 

레이어를 잘 분리하고 불필요한 레이어를 제거한다 

 

변경사항에 대해 레이아웃을 최소한으로 발생시키려면

Reflow 가 일어나는 속성들 position width padding 등을 줄이고 ex) left top 을 transfrom으로 show hide를 opacity로 대체

애니메이션 제작시 request animation frame과 transform 을 사용할 수 있다면 transfrom을 쓰자 

왜냐면 transform속성은 레이어를 분리시켜 변경사항에 대해 레이아웃 단계가 없고 비용이 적은 GPU에서 Composite으로 처리하기 때문