Link Search Menu Expand Document
saeeng

Rendering Engine, Reflow, Repaint

Browser와 Rendering Engine

  • 우리가 흔히 web 이라는 것에 접근하기 위해서는 Browser를 사용한다.
  • Browser의 종류는 다양하고 각 Browser에서는 요청한 자원을 Browser상에 나타내기 위해서 Rendering Engine이라는 것을 사용한다.
  • Browser의 종류가 다양함에 따라 Rendering Engine의 형태도 서로 다르지만, 현대 Browser 들은 W3C에서 정해준 표준을 따름으로, 호환성에 대처한다.

Rendering Engine의 기본 구조에대하여 알아보자

  • 위에서 말했듯이 Rendering Engine의 목적은 html,css와 같은 콘텐츠를 파싱하여 화면에 표시하는 것이다.(html,css 외에도 pdf,이미지와 같은 파일도 파싱할 수 있다.)
  • 일반적인 랜더링 엔진의 동작과정은 아래와 같다.
  1. DOM 트리 구축 위한 HTML 파싱
    • HTML,StyleSheets를 파싱 트리(parse tree) 또는 문법 트리(syntax tree)라고 불리는 형태로 파싱한다.
    • HTML,StyleSheets 파싱을 통하여 각각 아래와 같은 결과물을 만들어낸다.
      • HTML => DOM Tree
      • StyleSheets => Styles Structure
  2. 랜더 트리 구축
    • DOM 트리가 구축되는 동안 브라우저는 렌더 트리를 구축한다. 표시해야 할 순서와 문서의 시각적인 구성 요소로써 올바른 순서로 내용을 그려낼 수 있도록 하기 위한 목적이 있다.
  3. 랜더 트리 배치
    • 생성된 Render Tree로 Element의 위치나 크기정보를 생성한다.
    • [webkit] 에서는 랜더 트리와 배치 라는 용어를 사용한다.
    • [gecko]에서는 형상 트리와 리플로 라는 용어를 사용한다.
  4. 랜더 트리 그리기
    • 앞선 과정에서 생성된 정보를 바탕으로 화면에 콘텐츠를 그려준다.

Repaint

  • Element에 변화가 발생하지만, 전체 레이아웃에 영향을 미치지 않는 경우 발생한다.
  • 앞선 과정에서 4 번의 과정에서 단순히 color만 바꿔주는 경우 rePaint가 발생한다.
  • 또한, reflow가 발생하는 경우에도 repaint는 뒤따라 발생한다.

Reflow

  • 문서의 모든 레이아웃과 포지션을 다시 계산 후 랜더링한다.
  • 앞선 구조의 1,2,3의 과정에 해당한다.
  • Repaint에 비하여 심각한 퍼포먼스 저하를 유발한다.

Reflow를 유발시키는 것들

  • 브라우저 창 크기의 변화
  • Dom Element의 추가 삭제
  • Dom Element의 Class 변경

Reflow를 최소화하는 방법

  1. 스타일 변화가 예상되는 Element의 경우 DOM 구조 끝단에 위치시킨다.
  2. 애니메이션이 들어간 Element는 position:fixed;,position:absolute를 사용한다.
  3. js를 통해 스타일변화가 발생하는 경우 class를 활용하여 한번에 변화시킨다.
  4. Inline 스타일을 최소화한다.3과 같이 class를 활용하는것이 랜더링 속도개선에 좋다.
  5. Table 사용을 줄인다. Table 태그의 경우 테이블 내의 값에따라 넓이와 주변 Element의 위치를 조절하기 때문에 랜더링 속도가 느려진다.

참고

https://m.blog.naver.com/PostView.nhn?blogId=sef16&logNo=70185648139&proxyReferer=https:%2F%2Fwww.google.com%2F

https://www.slideshare.net/doosungeom/reflow-and-repaint

https://wit.nts-corp.com/2017/06/05/4571