렌더링 과정

렌더링 엔진을 통해서 렌더링이 되며, 이 렌더링 엔진은 브라우저마다 다르다.

과정)

1. DOM,CSSOM생성 - 객체로 생성이 된다.

2.RenderTree 생성

- 스타일 정보가 설정, 실제 화면에 표현되는 노드들로만 구성이 된다.

**실제 렌더링 노드? visibility:invisible은 display:none과 달리 공간을 차지한다, 그래서 렌더트리에 포함한다.

3.레이아웃 단계

- 브라우저 뷰포트 내에서 각 노드들의 정확한 위치와 크기를 계산하는 단계

4. Paint

- 레이아웃 단계에서 계산이 완료된 요소들의 픽셀 값을 채워넣는다. ex) 텍스트, 색, 이미지, 그림자효과 등

=> 여기 과정들을 좀 더 세세히 알아봐두면 좋을 것 같다.

렌더링 최적화)

1.Reflow(Layout)

렌더링 과정을 끝마쳤더라도 액션 또는 이벤트에 따라서 HTML요소의 크기나 위치 등이 변할 수 있는데 이럴 때 영향을 받는 자식, 부모노드 들을 포함하여 레이아웃 과정을 다시 수행하게 된다.

즉, renderTree 각 요소들의 크기와 위치를 다시 계산한다 이 과정을 Reflow라고 한다.

2.Repaint(Paint)

렌더링과정이 다시 일어나게 되면 또 paint단계가 다시 수행되며 이것을 repaint라고 한다.

이 과정은 Reflow가 일어나야만 일어나는 과정은 아니다.

만약 레이아웃에 영향을 주지 않는 속성이 변경되었을 경우 Repaint만 수행이 됩니다.

위의 두 가지를 줄일 수 있어야 최적화가 가능하다!
1.사용하지 않는 노드(요소)에는 visibility: invisible 보단 display:none 처리해주기

2.left,right,width,height보단 transform을 사용해주기

3.display:none도 좋지만 opacity를 사용하는 것이 성능 개선에 좋다.

4.js + css 조합을 사용하여 애니메이션을 줄때 레이아웃 변화가 많을 경우 position:absolute , position:fixed를 사용하여 주변에 영향을 덜 주는 방법도 있다.

참고하면서 읽어보기)

codedive01