Browser Rendering

Taehee Kim·2022년 7월 11일
0

기술 면접 스터디

목록 보기
3/8
post-thumbnail

✨ Rendering?

렌더링은 개발자가 작성한 HTML, CSS, JavaScript 등의 문서를 읽어서 사용자가 볼 수 있게 화면에 보여주는 과정입니다! 절대 어려운 개념이 아닙니다!

브라우저들은 각자 다른 렌더링 엔진을 사용하고 있습니다. 대표적인 엔진으로는 크롬과 오페라가 사요하는 블링크(Blink), 사파리의 웹키트(Webkit), 파이어폭스의 Gecko가 있습니다.

✨ Rendering Process

렌더링 과정에는 총 5가지로 정리할 수 있습니다.

1. Parsing
1) HTML 파일을 해석하여 DOM(Document Object Model) Tree를 구성한다. DOM이란 HTML, XML 파일을 노트 트리 구조로 객체화하여 웹브라우저에 보여지게 해주는 인터페이스이다.

* DOM과 관련된 자세한 설명은 https://velog.io/@greenth322/Virtual-DOM 참고

2) 인라인 스타일 및 외부 파일에 작성된 CSS 파일의 코드를 해석하여 CSSOM Tree를 생성합니다.


2. Style
파싱단계에서 만들어진 DOM Tree와 CSSOM Tree를 서로 매칭시켜 Render Tree를 생성합니다. Render Tree가 바로 실제 화면에 그려지는 트리!

💡 display: none vs visibility: hidden
display:none는 완전히 제거 되어 렌더트리에 탑승 불가! 그래서 실제로 화면에서도 공간을 차지 않는다. visibily: hidden은 투명하게 보이지 않을 뿐 렌더 트리에 탑승해 자리를 차지하고 있다. 이러한 차이점을 잘 알고 CSS 속성을 사용하는 것도 성능 최적화에 기여할 수 있는 작은 노력이 될 수 있다.


3. Layout
position, width 등 Render Tree의 노드들의 레이아웃을 결정하는 속성값에 맞춰 위치와 크기를 계산하는 단계이다. 예를들면 %값으로 CSS를 작성했다면 이것을 px 값으로 변환하는 과정이 있다. 레이아웃단계에서는 색상 스타일까지 모두 계산이 된다!


4. Paint
레이아웃 단계에서 계산된 값들을 여러 개의 Layer로 나뉘어서 화면에 그려진다.

paint 단계는 Layout 단계에 따라 작업시간이 결정되기 때문에 Layout은 성능 최적화에 막대한 영향을 끼친다고 볼 수 있다.


5. Compositing
Paint 단계에서 나뉘어져 관리되고 있는 여러 개의 레이어들을 하나로 합쳐서 실제 화면에서 볼 수 있게 해준다.


✨ Reflow && Repaint

렌더링이 완료된 이후 문서에서 레이아웃 및 디자인 속성이 수정되면서 다시 Layout 단계로 돌아가는데, 이때를 Reflow라고 한다. Reflow가 일어나면 Repaint도 당연히 다시 거치게 된다.

하지만 모든 속성이 무조건 Reflow까지 돌아가는 건 아닌고 Layout과 관련이 없는 속성일 경우 Repaint 단계로만 돌아갈 수도 있다.

  • Reflow를 일으키는 속성
    position, width, height, margin, padding, text-align, font관련 속성들, overflow

  • Repaint를 일으키는 속성
    background관련 속성, color, border 속성들 ..

✨ 추가로 알아본 렌더링을 줄이는 애니메이션 주기

위치가 변경되는 애니메이션 효과를 주는 방법은 크게 2가지가 있는데, position을 단순하기 top/ left를 변경하는 방법과 translate를 사용하는 방법이 있습니다.

렌더링과 브라우저 성능을 향상하는 데에는 어떤 방법이 좋을까요? 바로 translate를 사용하는 것입니다!

그 이유는? 개발자 도구의 성능 탭에서 직접 녹화한 사진을 보면 알 수 있습니다.

top/left

  • 렌더링의 전 과정을 다 진행
  • 특히 눈에 띄는 것은, Reflow와 Repaint가 반복적으로 일어나고 있음
  • 결국 성능 최적화에 부적절

translate

  • compositing 단계만 거치고 있음
  • 처음부터 layout, paint 일어나지 않음
  • 반복적인 움직임에도 Reflow, Repaint도 없음
  • 성능최적화에 적절

0개의 댓글