[Browser Rendering] - 3. 브라우저 렌더링 최적화

 

 

위의 내용을 보고 정리한 내용입니다..! 

 

 

Layer

웹페이지를 렌더링 하기 위해 필요한 이미지 단위 요소

레이어를 배치, 합성 하여 최종적인 웹페이지를 표현한다

 

페인트 단계에서 메인 스레드는 하나의 페이지를 여러 층의 레이어로 분리하고

그 레이어들을 어떠한 순서로 그릴지 결정한다.
이 과정에서, 레이아웃 트리를 기반으로 레이어 트리가 생성된다.

이렇게 레이어 트리가 생성되면 모든 시각적 부분을 그리기 위해 각 레이어의 픽셀을 채우게 된다.

 

즉, 웹 브라우저 화면에 있을때 기존의 렌더링 프로세스와 별개로 또 하나의 화면이라고 부를수 있는것이 Layer이다.

 

 

렌더링 과정

1. 스크립트가 들어오면

2. cpu에서 recalculate style이라고 스타일을 다시 계산함

3. 레이아웃 과정이 일어남 ( 브라우저 엔진의 렌더링 엔진의 레이아웃 프로세스가 CPU에서 일어남)

4. 레이어 업데이트

5. 메인 메모리에 결과가 전달되어서 저장됨

6. 비디오 메모리로 paint 라는 과정을 통해서 전달

7. CPU 안에서 연산을 하게 되는데 그 연산이 composite layer (여러가지 레이어가 병합되는 과정 > GPU)

8. CPU안에서 연산하는것보다 GPU에서 일어나는 레이아웃 병합 되는 게 더 비용이 적고 빠르다

   Layout과 Paint는 CPU에서 일어나고 composite은 GPU에서 일어나는데 GPU가 비용이 더 적다

    따라서 렌더링 성능을 개선하려면 되도록이면 Layout과 Paint를 발생시키는것보다
    composite을 발생시키는게 렌더링 성능 개선에 유리하다.

 

 

Repaint & Reflow & Composite

1. Reflow

레이아웃의 높이, 너비, 그리고 위치 등에 변화 그리고 DOM이 추가되거나 삭제되면 Reflow가 일어난다

다른 모든 노드의 위치를 다시 계산하고 영향을 받은 부분을 찾아내어 다시 Paint한다

가장 리소스를 많이 잡아먹는 과정

2. Repaint

Reflow에서 언급했던 것 외의 변화 배경 이미지, 텍스트 색상, 그림자 등의 변화가 일어나면 Repaint가 일어난다

이 과정은 Layout을 건너뛰기 때문에 Reflow보다는 리소스를 덜 잡아 먹는다

3. Composite

여러 Layer로 나눠진 Raster 픽셀들을 우리가 실제로 보는 화면처럼 합성해주는 단계가 Composite단계이다

no reflow, no repaint Composite

Layout 과 Paint 둘 다 거치지 않는 속성이 있다.
위의 두 가지 스타일의 변화를 일으키지 않는 시각적 변화는 두 단계를 건너뛰고 Composite 과정만 실행하게 된다
transform, opacitiy, cursor, orphans, perspective 등이 해당

 

https://boxfoxs.tistory.com/409

 

 

어떻게 하면 렌더링을 더 빨리 할수 있을까, 성능을 개선할수 있을까?

   1. 레이아웃과 페인트를 최소한으로 발생시키고 

   2. 같은 기능을 한다면 composite으로 대체한다.

   3. 레이어를 잘 분리하고 최적의 레이어를 구성하는것

 

 

레이아웃 크기나 위치에 영향이 가지 않는
Paint Only(Repaint) 속성을 사용하면 Layout을 건너뛰고
바로 Paint과정으로 넘어가게 되어 연산하는 양이 줄어들어 렌더링 속도가 개선된다.

 

reflow 가 발생하면 repaint 는 무조건 발생하므로, 

최대한 reflow 를 발생시키지 않는 것이 

repaint 를 발생시키지 않는 것보다 더욱 렌더링 비용을 절약하는 방법이다.

 

 

 

 

transform을 사용하는것이 렌더링에 좋은 이유

transform이라는 속성이 있으면 레이어를 분리하는데,

새로운 레이어를 만들기 때문데 기존 렌더링 프로세서가 지연이 되더라도 전혀 문제 없이 쭉 렌더링 프로세스가 진행될수 있다

그래서 끊김이 없고 속도가 빠른 애니메이션을 구현할 수 있다.

그래서 position으로도, transform으로도 구현 할 수 있는 레이아웃이라면

transform을 사용하여 구현하는것이 렌더링 성능 개선에 도움을 줄 수 있다.

 

---

✔️ 참고

https://boxfoxs.tistory.com/409

https://www.youtube.com/watch?v=G4eQziVzCTE 

https://medium.com/@jihyerish/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%8F%99%EC%9E%91-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-4245c2f0a606